|
|
<!DOCTYPE html> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
|
|
|
<div class="space-y-20"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<div class="absolute left-1/2 h-full w-1 bg-gray-200 transform -translate-x-1/2"></div> |
|
|
|
|
|
|
|
|
<div class="space-y-8"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
// Highlight attack steps as they appear |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const steps = document.querySelectorAll('.phase-container'); |
|
|
steps.forEach((step, index) => { |
|
|
setTimeout(() => { |
|
|
step.classList.add('highlight-step'); |
|
|
}, index * 300 + 500); |
|
|
}); |
|
|
}); |
|
|
|
|
|
// Interactive simulation |
|
|
function simulatePhase(phaseNum) { |
|
|
const simulationArea = document.getElementById('simulation-area'); |
|
|
const phaseBtns = document.querySelectorAll('.phase-btn'); |
|
|
|
|
|
// Reset all buttons |
|
|
phaseBtns.forEach(btn => { |
|
|
btn.classList.remove('ring-2', 'ring-offset-2'); |
|
|
}); |
|
|
|
|
|
// Highlight current button |
|
|
phaseBtns[phaseNum-1].classList.add('ring-2', 'ring-offset-2', 'ring-current'); |
|
|
|
|
|
// Show appropriate simulation |
|
|
let content = ''; |
|
|
switch(phaseNum) { |
|
|
case 1: |
|
|
content = ` |
|
|
<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://img.icons8.com/color/48/000000/gmail.png" class="w-10 h-10 mr-3"/> |
|
|
<div> |
|
|
<h3 class="font-bold text-gray-800">Urgent Notice: Abnormal Login Alert</h3> |
|
|
<p class="text-sm text-gray-600">security@alibabacloud-support.com</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t pt-4"> |
|
|
<p class="mb-4">Dear Customer,</p> |
|
|
<p class="mb-4">We detected unusual login activity on your Alibaba Cloud account from a new device in Singapore.</p> |
|
|
<p class="mb-4">For your security, please verify your account immediately by clicking below:</p> |
|
|
<a href="#" class="inline-block bg-blue-500 text-white px-4 py-2 rounded mb-4">Verify Account Now</a> |
|
|
<p class="text-sm text-gray-500">Or download and review the attached document for details.</p> |
|
|
<div class="mt-6 p-3 bg-gray-100 rounded text-sm text-gray-700"> |
|
|
<i class="fas fa-paperclip mr-2"></i> Account_Security_Notice.pdf (1.2MB) |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 text-xs text-red-500"> |
|
|
<i class="fas fa-exclamation-triangle mr-1"></i> Warning: This is a simulated phishing email. The sender address contains subtle typos. |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
case 2: |
|
|
content = ` |
|
|
<div class="max-w-md mx-auto"> |
|
|
<div class="bg-white p-6 rounded-lg shadow mb-4"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-red-500 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-file-pdf"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-gray-800">Account_Security_Notice.pdf</h3> |
|
|
<p class="text-sm text-gray-600">1.2MB • Contains macros</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-400"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm text-yellow-700"> |
|
|
This document contains macros that may harm your computer. Are you sure you want to enable content? |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded"> |
|
|
Enable Content |
|
|
</button> |
|
|
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded"> |
|
|
Keep Disabled |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center text-sm text-gray-500"> |
|
|
<i class="fas fa-arrow-down mr-1"></i> After enabling content... |
|
|
</div> |
|
|
<div class="bg-red-50 p-4 rounded-lg shadow mt-2 border-l-4 border-red-500"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-bug text-red-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="text-sm font-medium text-red-800">Malicious Payload Executed</h3> |
|
|
<div class="mt-2 text-sm text-red-700"> |
|
|
<p>• PowerShell script downloaded from malicious server</p> |
|
|
<p>• Reverse shell connection established</p> |
|
|
<p>• Attacker now has command line access</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
case 3: |
|
|
content = ` |
|
|
<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow"> |
|
|
<h3 class="font-bold text-gray-800 mb-4">Command & Control Infrastructure</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-100 text-red-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-download"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Backdoor Installation</h4> |
|
|
<p class="text-sm text-gray-600">Persistent malware dropped in %AppData%</p> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1 font-mono text-xs"> |
|
|
C:\Users\[User]\AppData\Roaming\svchost.exe |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 text-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-user-shield"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Persistence Mechanism</h4> |
|
|
<p class="text-sm text-gray-600">Registry key created for auto-start</p> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1 font-mono text-xs"> |
|
|
HKCU\Software\Microsoft\Windows\CurrentVersion\Run |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-exchange-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">C2 Communication</h4> |
|
|
<p class="text-sm text-gray-600">Beaconing to attacker server every 5 minutes</p> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1 font-mono text-xs"> |
|
|
HTTPS traffic to: api.cloudservice[.]support:443 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 p-3 bg-red-50 rounded-lg border border-red-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-shield-alt text-xs"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold text-red-800">Security Alert</h4> |
|
|
</div> |
|
|
<p class="text-sm text-red-700 mt-2"> |
|
|
The malware is using TLS encryption and domain fronting to evade detection by network security tools. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
case 4: |
|
|
content = ` |
|
|
<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow"> |
|
|
<h3 class="font-bold text-gray-800 mb-4">Credential Harvesting Process</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-cookie-bite"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Browser Cookies</h4> |
|
|
<p class="text-sm text-gray-600">Session cookies stolen from:</p> |
|
|
<div class="flex flex-wrap gap-1 mt-1"> |
|
|
<span class="bg-gray-100 px-2 py-1 rounded text-xs">mail.company.com</span> |
|
|
<span class="bg-gray-100 px-2 py-1 rounded text-xs">vpn.corp.net</span> |
|
|
<span class="bg-gray-100 px-2 py-1 rounded text-xs">admin.portal</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 text-green-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-key"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">SSH Keys</h4> |
|
|
<p class="text-sm text-gray-600">Private keys discovered in:</p> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1 font-mono text-xs"> |
|
|
~/.ssh/id_rsa<br> |
|
|
~/.ssh/config |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 text-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-save"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Saved Passwords</h4> |
|
|
<p class="text-sm text-gray-600">Decrypted from browser storage</p> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1 text-xs"> |
|
|
<div class="flex justify-between"> |
|
|
<span>admin@corp.com</span> |
|
|
<span>••••••••</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>db_admin</span> |
|
|
<span>••••••••</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 p-3 bg-yellow-50 rounded-lg border border-yellow-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-yellow-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-exclamation text-xs"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold text-yellow-800">Critical Finding</h4> |
|
|
</div> |
|
|
<p class="text-sm text-yellow-700 mt-2"> |
|
|
The SSH private key has access to multiple production servers and was not protected with a passphrase. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
case 5: |
|
|
content = ` |
|
|
<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow"> |
|
|
<h3 class="font-bold text-gray-800 mb-4">Browser Proxy Pivoting</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-100 text-red-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-random"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Traffic Redirection</h4> |
|
|
<p class="text-sm text-gray-600">Browser proxy settings modified to:</p> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1 font-mono text-xs"> |
|
|
Proxy Server: proxy.malicious-server.com:8080 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-lock"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Internal Applications Accessed</h4> |
|
|
<div class="mt-1 space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs"> |
|
|
<i class="fas fa-terminal"></i> |
|
|
</div> |
|
|
<span class="text-sm">SSH Management Portal</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
</div> |
|
|
<span class="text-sm">Internal Document System</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs"> |
|
|
<i class="fas fa-database"></i> |
|
|
</div> |
|
|
<span class="text-sm">Database Admin Console</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 text-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Session Hijacking</h4> |
|
|
<p class="text-sm text-gray-600">Using stolen cookies to bypass authentication</p> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1 text-xs"> |
|
|
<div class="flex justify-between"> |
|
|
<span>Session Cookie:</span> |
|
|
<span>Stolen from browser</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>User Agent:</span> |
|
|
<span>Spoofed to match victim</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 p-3 bg-indigo-50 rounded-lg border border-indigo-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-indigo-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-info-circle text-xs"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold text-indigo-800">Detection Challenge</h4> |
|
|
</div> |
|
|
<p class="text-sm text-indigo-700 mt-2"> |
|
|
The attacker appears as a legitimate user because they're using the victim's actual credentials and session tokens. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
case 6: |
|
|
content = ` |
|
|
<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow"> |
|
|
<h3 class="font-bold text-gray-800 mb-4">Lateral Movement & Data Exfiltration</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-100 text-red-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-server"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Server Access</h4> |
|
|
<p class="text-sm text-gray-600">Using stolen SSH credentials to access:</p> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1 font-mono text-xs"> |
|
|
ssh -i id_rsa admin@db-prod-01.internal |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-search"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Network Discovery</h4> |
|
|
<p class="text-sm text-gray-600">Scanning internal network for:</p> |
|
|
<div class="flex flex-wrap gap-1 mt-1"> |
|
|
<span class="bg-gray-100 px-2 py-1 rounded text-xs">Other servers</span> |
|
|
<span class="bg-gray-100 px-2 py-1 rounded text-xs">Database instances</span> |
|
|
<span class="bg-gray-100 px-2 py-1 rounded text-xs">File shares</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 text-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Data Exfiltration</h4> |
|
|
<p class="text-sm text-gray-600">Sensitive data being transferred to:</p> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1 font-mono text-xs"> |
|
|
sftp://exfil.malicious-server.com/uploads/ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 p-3 bg-red-50 rounded-lg border border-red-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-exclamation-triangle text-xs"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold text-red-800">Breach Impact</h4> |
|
|
</div> |
|
|
<div class="text-sm text-red-700 mt-2 space-y-1"> |
|
|
<p>• Customer database copied (2.4GB)</p> |
|
|
<p>• Financial records accessed</p> |
|
|
<p>• Source code repositories downloaded</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 p-3 bg-gray-100 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-clock text-xs"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold text-gray-800">Attack Timeline</h4> |
|
|
</div> |
|
|
<div class="text-sm text-gray-700 mt-2 space-y-1"> |
|
|
<p>• Initial compromise: 14 days ago</p> |
|
|
<p>• Lateral movement began: 5 days ago</p> |
|
|
<p>• Data exfiltration ongoing</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
} |
|
|
|
|
|
simulationArea.innerHTML = content; |
|
|
|
|
|
// Add animation to new content |
|
|
simulationArea.classList.remove('animate-pulse'); |
|
|
void simulationArea.offsetWidth; // Trigger reflow |
|
|
simulationArea.classList.add('animate-pulse'); |
|
|
} |
|
|
</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> |
