Download index.html from capta1n/bas2-0: direct link, hf CLI and curl.
- Browser
- Download file 62.6 kB
-
https://huggingface.co/spaces/capta1n/bas2-0/resolve/main/index.html
- Command line
-
hf download hf://spaces/capta1n/bas2-0/index.html
-
curl -L -o index.html https://huggingface.co/spaces/capta1n/bas2-0/resolve/main/index.html
62.6 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cyber Attack Simulation</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> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(-50px); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| @keyframes highlight { | |
| 0% { background-color: transparent; } | |
| 50% { background-color: rgba(239, 68, 68, 0.3); } | |
| 100% { background-color: transparent; } | |
| } | |
| .attack-path { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 3s linear forwards; | |
| } | |
| @keyframes dash { | |
| to { stroke-dashoffset: 0; } | |
| } | |
| .phase-container { | |
| transition: all 0.3s ease; | |
| } | |
| .phase-container:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .malware-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| .slide-in { | |
| animation: slideIn 0.5s ease-out forwards; | |
| } | |
| .highlight-step { | |
| animation: highlight 1.5s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Advanced Persistent Threat Simulation</h1> | |
| <p class="text-xl text-gray-600">Visualizing the attack lifecycle from phishing to data exfiltration</p> | |
| </div> | |
| <!-- Attack Flow Visualization --> | |
| <div class="relative mb-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div class="w-1/2 text-right pr-4"> | |
| <div class="inline-block bg-red-500 text-white px-4 py-2 rounded-lg shadow-lg"> | |
| <i class="fas fa-user-secret mr-2"></i> Attacker | |
| </div> | |
| </div> | |
| <div class="w-1/2 pl-4"> | |
| <div class="inline-block bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg"> | |
| <i class="fas fa-user mr-2"></i> Victim | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SVG Connectors --> | |
| <svg class="absolute top-0 left-0 w-full h-full" style="z-index: -1;"> | |
| <path id="attack-path" class="attack-path" stroke="#6B7280" stroke-width="2" fill="none" | |
| d="M20,100 Q250,100 250,200 Q250,300 480,300" /> | |
| <path id="response-path" class="attack-path" stroke="#6B7280" stroke-width="2" fill="none" | |
| d="M480,300 Q250,300 250,400 Q250,500 20,500" /> | |
| </svg> | |
| <!-- Attack Phases --> | |
| <div class="space-y-20"> | |
| <!-- Phase 1 --> | |
| <div class="phase-container bg-white rounded-xl shadow-md overflow-hidden slide-in"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="w-full md:w-1/2 p-6 order-2 md:order-1"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 text-red-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Phase 1: Crafting Phishing Email</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Email subject: "Urgent Notice: Abnormal Login Alert on Your Alibaba Cloud Account"</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Mimics official Alibaba Cloud template requesting "immediate account verification"</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Attachment: Disguised as PDF/Word document</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Link: Points to phishing site with typo-squatted domain</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 bg-gray-50 p-6 order-1 md:order-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Victim Action</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Opens the email and views contents</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Clicks link or downloads attachment</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Triggers malicious payload execution</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 2 --> | |
| <div class="phase-container bg-white rounded-xl shadow-md overflow-hidden slide-in" style="animation-delay: 0.2s;"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="w-full md:w-1/2 p-6 order-2 md:order-1"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 text-red-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Phase 2: Malicious Payload Execution</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Malicious document downloads and executes code</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Phishing site steals user credentials</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Establishes communication channel with attacker</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 bg-gray-50 p-6 order-1 md:order-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">System Compromise</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>PC executes malicious code</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Attacker gains control of system</p> | |
| </div> | |
| <div class="relative mt-6 h-20"> | |
| <div class="absolute malware-pulse bg-red-500 text-white px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-bug mr-1"></i> Malware Active | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 3 --> | |
| <div class="phase-container bg-white rounded-xl shadow-md overflow-hidden slide-in" style="animation-delay: 0.4s;"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="w-full md:w-1/2 p-6 order-2 md:order-1"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 text-red-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Phase 3: C2 Implantation</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Deploys backdoor program</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Configures persistence mechanisms</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Sets up reverse proxy to disguise communication</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 bg-gray-50 p-6 order-1 md:order-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">System Persistence</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Backdoor program remains active</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Attacker maintains continuous control</p> | |
| </div> | |
| <div class="relative mt-6"> | |
| <div class="flex space-x-2"> | |
| <div class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-server mr-1"></i> C2 Active | |
| </div> | |
| <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-sync-alt mr-1"></i> Beaconing | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 4 --> | |
| <div class="phase-container bg-white rounded-xl shadow-md overflow-hidden slide-in" style="animation-delay: 0.6s;"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="w-full md:w-1/2 p-6 order-2 md:order-1"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 text-red-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">4</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Phase 4: Credential Theft</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Steals browser cookies and saved passwords</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Searches for and exfiltrates SSH keys</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Prepares credentials for lateral movement</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 bg-gray-50 p-6 order-1 md:order-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">4</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Data Compromise</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Browser cookies stolen</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>SSH keys compromised</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Attacker prepares for network penetration</p> | |
| </div> | |
| <div class="relative mt-6"> | |
| <div class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm inline-block"> | |
| <i class="fas fa-key mr-1"></i> Credentials Stolen | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 5 --> | |
| <div class="phase-container bg-white rounded-xl shadow-md overflow-hidden slide-in" style="animation-delay: 0.8s;"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="w-full md:w-1/2 p-6 order-2 md:order-1"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 text-red-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">5</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Phase 5: Browser Proxy Pivoting</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Routes victim's browser traffic to attacker server</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Accesses internal applications:</p> | |
| </div> | |
| <div class="ml-6 mb-3"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-300 rounded-full w-3 h-3 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>SSH management platforms</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-red-300 rounded-full w-3 h-3 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Internal document systems</p> | |
| </div> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Captures sensitive information in real-time</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 bg-gray-50 p-6 order-1 md:order-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">5</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Network Penetration</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Attacker masquerades as legitimate user</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Sensitive data captured in real-time</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Internal network access achieved</p> | |
| </div> | |
| <div class="relative mt-6"> | |
| <div class="flex space-x-2"> | |
| <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-network-wired mr-1"></i> Internal Access | |
| </div> | |
| <div class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-exchange-alt mr-1"></i> Traffic Proxied | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 6 --> | |
| <div class="phase-container bg-white rounded-xl shadow-md overflow-hidden slide-in" style="animation-delay: 1s;"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="w-full md:w-1/2 p-6 order-2 md:order-1"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 text-red-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">6</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Phase 6: Lateral Movement & Data Exfiltration</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Uses stolen SSH credentials to access servers</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Scans internal network for additional targets</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Attempts privilege escalation</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-red-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Steals and exfiltrates sensitive data</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 bg-gray-50 p-6 order-1 md:order-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center mr-4"> | |
| <span class="font-bold">6</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Full Network Compromise</h3> | |
| </div> | |
| <div class="ml-14"> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Servers under attacker control</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Sensitive data stolen</p> | |
| </div> | |
| <div class="mb-3 flex items-start"> | |
| <div class="bg-blue-500 rounded-full w-4 h-4 mt-1 mr-3 flex-shrink-0"></div> | |
| <p>Attacker maintains persistent access</p> | |
| </div> | |
| <div class="relative mt-6"> | |
| <div class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm inline-block"> | |
| <i class="fas fa-exclamation-triangle mr-1"></i> Breach Complete | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Summary Timeline --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Attack Lifecycle Timeline</h2> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="absolute left-1/2 h-full w-1 bg-gray-200 transform -translate-x-1/2"></div> | |
| <!-- Timeline items --> | |
| <div class="space-y-8"> | |
| <!-- Phase 1 --> | |
| <div class="relative timeline-item"> | |
| <div class="flex items-center"> | |
| <div class="absolute left-1/2 -ml-3 w-6 h-6 bg-red-500 rounded-full border-4 border-white transform -translate-x-1/2"></div> | |
| <div class="w-1/2 pr-12 text-right"> | |
| <h3 class="font-semibold text-gray-800">Phase 1: Phishing Email</h3> | |
| <p class="text-sm text-gray-600">Attacker crafts convincing phishing email</p> | |
| </div> | |
| <div class="w-1/2 pl-12"> | |
| <h3 class="font-semibold text-gray-800">Victim Action</h3> | |
| <p class="text-sm text-gray-600">Opens email and interacts with content</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 2 --> | |
| <div class="relative timeline-item"> | |
| <div class="flex items-center"> | |
| <div class="absolute left-1/2 -ml-3 w-6 h-6 bg-red-500 rounded-full border-4 border-white transform -translate-x-1/2"></div> | |
| <div class="w-1/2 pr-12 text-right"> | |
| <h3 class="font-semibold text-gray-800">Phase 2: Payload Execution</h3> | |
| <p class="text-sm text-gray-600">Malicious code executes on victim system</p> | |
| </div> | |
| <div class="w-1/2 pl-12"> | |
| <h3 class="font-semibold text-gray-800">System Compromise</h3> | |
| <p class="text-sm text-gray-600">Attacker gains initial foothold</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 3 --> | |
| <div class="relative timeline-item"> | |
| <div class="flex items-center"> | |
| <div class="absolute left-1/2 -ml-3 w-6 h-6 bg-red-500 rounded-full border-4 border-white transform -translate-x-1/2"></div> | |
| <div class="w-1/2 pr-12 text-right"> | |
| <h3 class="font-semibold text-gray-800">Phase 3: C2 Implantation</h3> | |
| <p class="text-sm text-gray-600">Backdoor installed for persistent access</p> | |
| </div> | |
| <div class="w-1/2 pl-12"> | |
| <h3 class="font-semibold text-gray-800">Persistence</h3> | |
| <p class="text-sm text-gray-600">Continuous attacker control established</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 4 --> | |
| <div class="relative timeline-item"> | |
| <div class="flex items-center"> | |
| <div class="absolute left-1/2 -ml-3 w-6 h-6 bg-red-500 rounded-full border-4 border-white transform -translate-x-1/2"></div> | |
| <div class="w-1/2 pr-12 text-right"> | |
| <h3 class="font-semibold text-gray-800">Phase 4: Credential Theft</h3> | |
| <p class="text-sm text-gray-600">Cookies, SSH keys, and passwords stolen</p> | |
| </div> | |
| <div class="w-1/2 pl-12"> | |
| <h3 class="font-semibold text-gray-800">Data Compromise</h3> | |
| <p class="text-sm text-gray-600">Credentials available for lateral movement</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 5 --> | |
| <div class="relative timeline-item"> | |
| <div class="flex items-center"> | |
| <div class="absolute left-1/2 -ml-3 w-6 h-6 bg-red-500 rounded-full border-4 border-white transform -translate-x-1/2"></div> | |
| <div class="w-1/2 pr-12 text-right"> | |
| <h3 class="font-semibold text-gray-800">Phase 5: Browser Pivoting</h3> | |
| <p class="text-sm text-gray-600">Internal network accessed via proxy</p> | |
| </div> | |
| <div class="w-1/2 pl-12"> | |
| <h3 class="font-semibold text-gray-800">Network Penetration</h3> | |
| <p class="text-sm text-gray-600">Internal applications compromised</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 6 --> | |
| <div class="relative timeline-item"> | |
| <div class="flex items-center"> | |
| <div class="absolute left-1/2 -ml-3 w-6 h-6 bg-red-500 rounded-full border-4 border-white transform -translate-x-1/2"></div> | |
| <div class="w-1/2 pr-12 text-right"> | |
| <h3 class="font-semibold text-gray-800">Phase 6: Lateral Movement</h3> | |
| <p class="text-sm text-gray-600">Servers accessed, data exfiltrated</p> | |
| </div> | |
| <div class="w-1/2 pl-12"> | |
| <h3 class="font-semibold text-gray-800">Full Breach</h3> | |
| <p class="text-sm text-gray-600">Network fully compromised</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Interactive Simulation --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Interactive Attack Simulation</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-6 gap-4 mb-8"> | |
| <button onclick="simulatePhase(1)" class="phase-btn bg-red-100 hover:bg-red-200 text-red-800 py-2 px-4 rounded-lg transition-all"> | |
| <i class="fas fa-envelope mr-2"></i> Phase 1 | |
| </button> | |
| <button onclick="simulatePhase(2)" class="phase-btn bg-orange-100 hover:bg-orange-200 text-orange-800 py-2 px-4 rounded-lg transition-all"> | |
| <i class="fas fa-code mr-2"></i> Phase 2 | |
| </button> | |
| <button onclick="simulatePhase(3)" class="phase-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 py-2 px-4 rounded-lg transition-all"> | |
| <i class="fas fa-server mr-2"></i> Phase 3 | |
| </button> | |
| <button onclick="simulatePhase(4)" class="phase-btn bg-green-100 hover:bg-green-200 text-green-800 py-2 px-4 rounded-lg transition-all"> | |
| <i class="fas fa-key mr-2"></i> Phase 4 | |
| </button> | |
| <button onclick="simulatePhase(5)" class="phase-btn bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded-lg transition-all"> | |
| <i class="fas fa-globe mr-2"></i> Phase 5 | |
| </button> | |
| <button onclick="simulatePhase(6)" class="phase-btn bg-purple-100 hover:bg-purple-200 text-purple-800 py-2 px-4 rounded-lg transition-all"> | |
| <i class="fas fa-network-wired mr-2"></i> Phase 6 | |
| </button> | |
| </div> | |
| <div id="simulation-area" class="border-2 border-gray-200 rounded-lg p-6 min-h-64 bg-gray-50"> | |
| <div class="text-center text-gray-500 py-10"> | |
| <i class="fas fa-mouse-pointer fa-2x mb-2"></i> | |
| <p>Click on any phase button to simulate that attack stage</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| </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/bas2-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |