abdullahawan1/dictionary-attack-detector
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Attack Simulator - CyberShield</title>7 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">8 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">9 <style>10 body {11 background: #1a0000;12 color: #eee;13 font-family: 'Segoe UI', monospace;14 min-height: 100vh;15 }16 .navbar { background: rgba(30, 0, 0, 0.95) !important; border-bottom: 1px solid #ff3232; }17 .navbar-brand { color: #ff3232 !important; font-weight: 700; }18 .attack-container {19 max-width: 900px;20 margin: 30px auto;21 padding: 0 15px;22 }23 .config-card {24 background: rgba(30, 10, 10, 0.9);25 border: 1px solid rgba(255, 50, 50, 0.3);26 border-radius: 12px;27 padding: 30px;28 margin-bottom: 20px;29 }30 .form-control, .form-select {31 background: #2a0a0a;32 border: 1px solid #441111;33 color: #eee;34 border-radius: 8px;35 }36 .form-control:focus, .form-select:focus {37 background: #2a0a0a;38 border-color: #ff3232;39 color: #eee;40 box-shadow: 0 0 0 3px rgba(255, 50, 50, 0.2);41 }42 .form-label { color: #ff9999; font-weight: 600; font-size: 0.85rem; }43 .btn-attack {44 background: linear-gradient(to right, #cc0000, #ff3232);45 border: none;46 color: white;47 padding: 12px 30px;48 font-weight: 700;49 font-size: 1.1rem;50 border-radius: 8px;51 width: 100%;52 transition: all 0.3s;53 }54 .btn-attack:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(255, 50, 50, 0.4); color: white; }55 .btn-attack:disabled { opacity: 0.5; transform: none; }56 .btn-stop {57 background: #666;58 border: none;59 color: white;60 padding: 12px 30px;61 font-weight: 700;62 border-radius: 8px;63 width: 100%;64 display: none;65 }66 .btn-load-demo {67 background: rgba(255, 50, 50, 0.2);68 border: 1px solid #ff3232;69 color: #ff9999;70 font-size: 0.85rem;71 border-radius: 6px;72 padding: 5px 12px;73 }74 .btn-load-demo:hover { background: rgba(255, 50, 50, 0.4); color: white; }75 .progress-section {76 display: none;77 margin-top: 20px;78 }79 .attack-log {80 background: #0a0a0a;81 border: 1px solid #333;82 border-radius: 8px;83 padding: 15px;84 max-height: 400px;85 overflow-y: auto;86 font-family: 'Courier New', monospace;87 font-size: 0.85rem;88 margin-top: 15px;89 }90 .log-failed { color: #ffaa00; }91 .log-blocked { color: #ff3232; font-weight: bold; }92 .log-success { color: #00ff41; font-weight: bold; }93 .log-limited { color: #ff66ff; }94 .log-info { color: #888; }95 .summary-card {96 background: rgba(30, 10, 10, 0.9);97 border: 1px solid rgba(255, 50, 50, 0.3);98 border-radius: 12px;99 padding: 25px;100 margin-top: 20px;101 display: none;102 }103 .summary-stat {104 text-align: center;105 padding: 10px;106 }107 .summary-stat .value { font-size: 2rem; font-weight: 700; }108 .summary-stat .label { font-size: 0.8rem; color: #999; }109 .detected-banner {110 background: rgba(255, 50, 50, 0.2);111 border: 2px solid #ff3232;112 border-radius: 12px;113 padding: 20px;114 text-align: center;115 margin-top: 15px;116 display: none;117 animation: flashBorder 1s infinite;118 }119 @keyframes flashBorder {120 0%, 100% { border-color: #ff3232; }121 50% { border-color: #ff6666; }122 }123 </style>124</head>125<body>126 <nav class="navbar navbar-dark">127 <div class="container-fluid">128 <span class="navbar-brand"><i class="fas fa-crosshairs me-2"></i>Attack Simulator</span>129 <a href="/" class="btn btn-outline-light btn-sm"><i class="fas fa-arrow-left me-1"></i> Back to Home</a>130 </div>131 </nav>132 133 <div class="attack-container">134 <!-- Configuration -->135 <div class="config-card">136 <h4 class="mb-3" style="color: #ff3232;"><i class="fas fa-cog me-2"></i>Attack Configuration</h4>137 <div class="row g-3">138 <div class="col-md-6">139 <label class="form-label">TARGET USERNAME</label>140 <input type="text" class="form-control" id="targetUsername" value="demo_user" placeholder="Enter target username">141 </div>142 <div class="col-md-6">143 <label class="form-label">ATTACK SPEED</label>144 <select class="form-select" id="attackSpeed">145 <option value="slow">Slow (1 attempt/sec)</option>146 <option value="medium" selected>Medium (5 attempts/sec)</option>147 <option value="fast">Fast (10 attempts/sec)</option>148 </select>149 </div>150 <div class="col-12">151 <div class="d-flex justify-content-between align-items-center mb-2">152 <label class="form-label mb-0">PASSWORD WORDLIST</label>153 <button class="btn btn-load-demo" id="loadDemoBtn">154 <i class="fas fa-list me-1"></i> Load Demo Passwords155 </button>156 </div>157 <textarea class="form-control" id="passwordList" rows="6"158 placeholder="Enter passwords, one per line... password 123456 admin123 qwerty"></textarea>159 </div>160 <div class="col-12">161 <button class="btn btn-attack" id="startAttackBtn">162 <i class="fas fa-play me-2"></i>START ATTACK163 </button>164 <button class="btn btn-stop" id="stopAttackBtn">165 <i class="fas fa-stop me-2"></i>STOP ATTACK166 </button>167 </div>168 </div>169 </div>170 171 <!-- Progress -->172 <div class="progress-section" id="progressSection">173 <div class="d-flex justify-content-between mb-2">174 <span id="progressText">Attempting 0 / 0</span>175 <span id="progressPercent">0%</span>176 </div>177 <div class="progress" style="height: 8px; background: #333; border-radius: 4px;">178 <div class="progress-bar bg-danger" id="progressBar" style="width: 0%;"></div>179 </div>180 </div>181 182 <!-- Detected Banner -->183 <div class="detected-banner" id="detectedBanner">184 <h3 style="color: #ff3232;"><i class="fas fa-exclamation-triangle me-2"></i>ATTACK DETECTED!</h3>185 <p style="color: #ff9999; margin: 0;">System has detected the dictionary attack and blocked your IP for 15 minutes.</p>186 </div>187 188 <!-- Attack Log -->189 <div class="attack-log" id="attackLog" style="display: none;">190 <div class="log-info">[*] Waiting to start...</div>191 </div>192 193 <!-- Summary -->194 <div class="summary-card" id="summaryCard">195 <h5 class="text-center mb-3" style="color: #ff3232;">Attack Summary</h5>196 <div class="row">197 <div class="col-3 summary-stat">198 <div class="value" id="sumTotal" style="color: #eee;">0</div>199 <div class="label">Total Tried</div>200 </div>201 <div class="col-3 summary-stat">202 <div class="value" id="sumFailed" style="color: #ffaa00;">0</div>203 <div class="label">Failed</div>204 </div>205 <div class="col-3 summary-stat">206 <div class="value" id="sumBlocked" style="color: #ff3232;">0</div>207 <div class="label">Blocked</div>208 </div>209 <div class="col-3 summary-stat">210 <div class="value" id="sumDetected" style="color: #00ff41;">-</div>211 <div class="label">Detected At</div>212 </div>213 </div>214 </div>215 </div>216 217 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>218 <script>219 // Demo password list220 const DEMO_PASSWORDS = [221 'password', '123456', 'password123', 'qwerty', 'letmein',222 'admin123', 'welcome', 'monkey', 'dragon', 'master',223 'trustno1', 'baseball', 'iloveyou', 'sunshine', 'admin',224 'root', 'toor', 'test', 'guest', 'SecurePass123!'225 ];226 227 let attackRunning = false;228 229 // Load demo passwords230 $('#loadDemoBtn').click(function() {231 $('#passwordList').val(DEMO_PASSWORDS.join('\n'));232 });233 234 // Start attack235 $('#startAttackBtn').click(function() {236 const username = $('#targetUsername').val().trim();237 const passwords = $('#passwordList').val().trim().split('\n').filter(p => p.trim());238 const speed = $('#attackSpeed').val();239 240 if (!username) { alert('Enter a target username'); return; }241 if (passwords.length === 0) { alert('Enter at least one password'); return; }242 243 attackRunning = true;244 $('#startAttackBtn').hide();245 $('#stopAttackBtn').show();246 $('#progressSection').show();247 $('#attackLog').show().html('');248 $('#detectedBanner').hide();249 $('#summaryCard').hide();250 251 addLog('info', `[*] Starting dictionary attack against user: ${username}`);252 addLog('info', `[*] Wordlist size: ${passwords.length} passwords`);253 addLog('info', `[*] Speed: ${speed}`);254 addLog('info', '[*] -------------------------------------------');255 256 // Send to server-side attack API257 $.ajax({258 url: '/api/attack',259 type: 'POST',260 contentType: 'application/json',261 data: JSON.stringify({262 username: username,263 passwords: passwords,264 speed: speed265 }),266 success: function(response) {267 attackRunning = false;268 $('#startAttackBtn').show();269 $('#stopAttackBtn').hide();270 271 // Animate results272 let idx = 0;273 const results = response.results;274 const delay = speed === 'slow' ? 500 : (speed === 'medium' ? 200 : 50);275 276 function showNext() {277 if (idx >= results.length) {278 showSummary(response.summary);279 return;280 }281 282 const r = results[idx];283 const pct = Math.round(((idx + 1) / results.length) * 100);284 $('#progressBar').css('width', pct + '%');285 $('#progressText').text(`Attempting ${idx + 1} / ${results.length}`);286 $('#progressPercent').text(pct + '%');287 288 if (r.status === 'FAILED') {289 addLog('failed', `[FAILED] Trying ${r.password}... Wrong password`);290 } else if (r.status === 'BLOCKED') {291 addLog('blocked', `[BLOCKED] ${r.message}`);292 $('#detectedBanner').fadeIn();293 // Change progress bar to gray294 $('#progressBar').removeClass('bg-danger').addClass('bg-secondary');295 } else if (r.status === 'RATE_LIMITED') {296 addLog('limited', `[RATE LIMITED] ${r.message}`);297 } else if (r.status === 'SUCCESS') {298 addLog('success', `[SUCCESS] Password found: ${r.password}`);299 }300 301 idx++;302 setTimeout(showNext, r.status === 'BLOCKED' ? 100 : delay);303 }304 305 showNext();306 },307 error: function(xhr) {308 attackRunning = false;309 addLog('blocked', '[ERROR] Connection failed - IP may be blocked');310 $('#startAttackBtn').show();311 $('#stopAttackBtn').hide();312 }313 });314 });315 316 // Stop attack317 $('#stopAttackBtn').click(function() {318 attackRunning = false;319 addLog('info', '[*] Attack stopped by user');320 $('#startAttackBtn').show();321 $('#stopAttackBtn').hide();322 });323 324 function addLog(type, message) {325 const logEl = $('#attackLog');326 logEl.append(`<div class="log-${type}">${message}</div>`);327 logEl.scrollTop(logEl[0].scrollHeight);328 }329 330 function showSummary(summary) {331 $('#summaryCard').fadeIn();332 $('#sumTotal').text(summary.total_attempts);333 $('#sumFailed').text(summary.failed);334 $('#sumBlocked').text(summary.blocked);335 $('#sumDetected').text(summary.detection_point ? `Attempt #${summary.detection_point}` : 'N/A');336 337 if (summary.attack_detected) {338 addLog('info', '');339 addLog('blocked', '[!] RESULT: Attack was DETECTED and BLOCKED successfully!');340 addLog('info', `[!] Detection triggered at attempt #${summary.detection_point}`);341 addLog('info', `[!] ${summary.blocked} attempts were blocked after detection.`);342 }343 }344 </script>345</body>346</html>347