Hugging Face's logo

Spaces:
capta1n
/
bas3
Running

App Files Community
bas3 / index.html
capta1n's picture
capta1n
Add 2 files
798592a verified
raw
history blame contribute delete
28.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Attack Flow Timeline 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>
 .attack-card {
 transition: all 0.3s ease;
 transform-origin: center;
 }
 .attack-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .attack-card.active {
 border-left-width: 4px;
 transform: translateY(-5px);
 }
 .timeline-connector {
 position: relative;
 height: 4px;
 background: linear-gradient(90deg, #e5e7eb, #9ca3af);
 }
 .timeline-connector::after {
 content: '';
 position: absolute;
 top: -4px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: #3b82f6;
 transform: translateX(-50%);
 }
 .severity-badge {
 font-size: 0.65rem;
 padding: 0.15rem 0.4rem;
 }
 .severity-critical {
 background-color: #fee2e2;
 color: #dc2626;
 }
 .severity-high {
 background-color: #fef3c7;
 color: #d97706;
 }
 .severity-emergency {
 background-color: #ffedd5;
 color: #ea580c;
 }
 .defense-badge {
 font-size: 0.7rem;
 padding: 0.2rem 0.5rem;
 }
 .animate-pulse-slow {
 animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 @keyframes pulse {
 0%, 100% {
 opacity: 1;
 }
 50% {
 opacity: 0.5;
 }
 }
 .attack-flow-container {
 scroll-behavior: smooth;
 }
 </style>
</head>
<body class="bg-gray-50">
 <div class="container mx-auto px-4 py-8">
 <div class="text-center mb-10">
 <h1 class="text-3xl font-bold text-gray-800 mb-2">Advanced Persistent Threat Kill Chain</h1>
 <p class="text-gray-600 max-w-3xl mx-auto">Visualization of the complete attack flow with interactive defense detection points</p>
 </div>
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
 <div class="flex justify-between items-center mb-6">
 <div>
 <h2 class="text-xl font-semibold text-gray-800">Attack Flow Timeline</h2>
 <p class="text-gray-500 text-sm">Click on any attack phase to view detailed forensic evidence</p>
 </div>
 <div class="flex space-x-2">
 <button id="scroll-left" class="p-2 bg-white rounded-md border border-gray-200 hover:bg-gray-50">
 <i class="fas fa-chevron-left"></i>
 </button>
 <button id="scroll-right" class="p-2 bg-white rounded-md border border-gray-200 hover:bg-gray-50">
 <i class="fas fa-chevron-right"></i>
 </button>
 </div>
 </div>
<div class="relative">
 <div class="attack-flow-container overflow-x-auto pb-6 -mx-4 px-4" style="scrollbar-width: none;">
 <div class="flex space-x-6 min-w-max">
 <!-- Timeline connectors -->
 <div class="flex items-center">
 <div class="timeline-connector w-24" style="background: linear-gradient(90deg, #3b82f6, #9ca3af);"></div>
 </div>
<!-- Attack cards will be inserted here by JavaScript -->
 </div>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
 <div class="lg:col-span-2">
 <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
 <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
 <h3 class="font-semibold text-gray-800">Attack Phase Forensic Details</h3>
 </div>
 <div id="attack-details" class="p-6">
 <div class="text-center py-12">
 <div class="mx-auto w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mb-4">
 <i class="fas fa-mouse-pointer text-blue-500 text-2xl"></i>
 </div>
 <h4 class="text-lg font-medium text-gray-700 mb-2">Select an attack phase</h4>
 <p class="text-gray-500 max-w-md mx-auto">Click on any attack card in the timeline to view detailed forensic information about the attack behavior and triggered defenses</p>
 </div>
 </div>
 </div>
 </div>
<div>
 <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
 <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
 <h3 class="font-semibold text-gray-800">Defense Detection Summary</h3>
 </div>
 <div id="defense-summary" class="p-6">
 <div class="space-y-4">
 <div class="flex items-start">
 <div class="flex-shrink-0 mt-1">
 <div class="w-3 h-3 rounded-full bg-red-500 animate-pulse-slow"></div>
 </div>
 <div class="ml-3">
 <h4 class="text-sm font-medium text-gray-800">7 Attack Phases Detected</h4>
 <p class="text-xs text-gray-500 mt-1">Complete kill chain visibility</p>
 </div>
 </div>
 <div class="flex items-start">
 <div class="flex-shrink-0 mt-1">
 <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
 </div>
 <div class="ml-3">
 <h4 class="text-sm font-medium text-gray-800">6 Security Products Triggered</h4>
 <p class="text-xs text-gray-500 mt-1">Multi-layer defense detection</p>
 </div>
 </div>
 <div class="flex items-start">
 <div class="flex-shrink-0 mt-1">
 <div class="w-3 h-3 rounded-full bg-green-500"></div>
 </div>
 <div class="ml-3">
 <h4 class="text-sm font-medium text-gray-800">100% Phases Logged</h4>
 <p class="text-xs text-gray-500 mt-1">Comprehensive forensic evidence</p>
 </div>
 </div>
 </div>
<div class="mt-8">
 <h4 class="text-sm font-semibold text-gray-700 mb-3">Defense Coverage</h4>
 <div class="space-y-3">
 <div>
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Email Security</span>
 <span>Phase 1</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-red-500 h-2 rounded-full" style="width: 14%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Endpoint Protection</span>
 <span>Phase 2</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-yellow-500 h-2 rounded-full" style="width: 28%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Network Analysis</span>
 <span>Phase 3</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-green-500 h-2 rounded-full" style="width: 42%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>User Behavior</span>
 <span>Phase 4</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-blue-500 h-2 rounded-full" style="width: 56%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Data Protection</span>
 <span>Phase 5</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-purple-500 h-2 rounded-full" style="width: 70%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Host Detection</span>
 <span>Phase 6</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-pink-500 h-2 rounded-full" style="width: 84%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Full Traffic Analysis</span>
 <span>Phase 7</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-indigo-500 h-2 rounded-full" style="width: 100%"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Attack steps data
 const attackSteps = [
 {
 id: 1,
 title: "Phishing Email Delivery",
 icon: "envelope",
 color: "bg-red-100 text-red-600",
 behavior: "Forged 'Embrace AI Change' notification email containing malicious file disguised as files.zip",
 defenses: "Email Security Gateway",
 alerts: [
 {
 severity: "critical",
 message: "Detected spoofed sender email | From: itsupport@fakecompany[.]com → To: victim@corp.com | Contains malicious attachment (SHA256: a1b2c3...) | Identified as Emotet phishing template"
 }
 ],
 forensic: [
 "Sender IP: 192.168.1.45 (Bulgaria)",
 "Attachment SHA256: a1b2c3d4e5f6...",
 "Email headers show DKIM failure",
 "Matched known Emotet template (90% similarity)"
 ]
 },
 {
 id: 2,
 title: "Trojan Execution",
 icon: "bug",
 color: "bg-yellow-100 text-yellow-600",
 behavior: "Victim downloads malicious file triggering PowerShell script that downloads Cobalt Strike DLL and injects into legitimate process",
 defenses: "Endpoint Detection & Response (EDR)",
 alerts: [
 {
 severity: "high",
 message: "Suspicious process injection | Process: C:\\Windows\\System32\\explorer.exe → Loaded module: a09xdf.dll | DLL signature invalid and matches known Cobalt Strike signature"
 }
 ],
 forensic: [
 "Process tree: files.zip → powershell.exe → explorer.exe",
 "DLL memory allocation pattern matches Cobalt Strike",
 "Network connection attempt to 185.123.32.1",
 "Registry key modification: HKLM\\Software\\Microsoft\\Windows"
 ]
 },
 {
 id: 3,
 title: "C2 Establishment",
 icon: "satellite-dish",
 color: "bg-green-100 text-green-600",
 behavior: "HTTPS heartbeat communication via CDN domain (api.cloudfront[.]com), deploying reverse SSH tunnel to internal jump server",
 defenses: "Network Traffic Analysis (NTA)",
 alerts: [
 {
 severity: "emergency",
 message: "Anomalous outbound connection | Target IP: 54.231.1.1 (AWS Singapore) | Protocol: HTTPS | Abnormal certificate (CN=*.cloudfront[.]com but issued by wildcard Let's Encrypt cert)"
 }
 ],
 forensic: [
 "C2 Domain: api.cloudfront[.]com (resolved to 54.231.1.1)",
 "HTTPS traffic pattern: 5KB every 17 seconds",
 "Certificate issuer: Let's Encrypt (unusual for CDN)",
 "SSH tunnel established to 10.8.8.12 (internal jump server)"
 ]
 },
 {
 id: 4,
 title: "Credential Theft",
 icon: "user-secret",
 color: "bg-blue-100 text-blue-600",
 behavior: "Using Mimikatz to extract Chrome browser cookies and forging User-Agent (synchronizing victim's browser fingerprint)",
 defenses: "User Behavior Analytics (UEBA)",
 alerts: [
 {
 severity: "high",
 message: "Abnormal browser session | User: Victim_Account | Source IP: 172.16.1.23 → Device fingerprint changed (new VM characteristics/QEMU virtual GPU)"
 }
 ],
 forensic: [
 "Mimikatz process detected in memory (obfuscated as svchost.exe)",
 "Chrome cookie database accessed",
 "User-Agent changed to match victim's original browser",
 "New login session from 172.16.1.23 with VM fingerprint"
 ]
 },
 {
 id: 5,
 title: "Cloud Docs Penetration",
 icon: "cloud",
 color: "bg-purple-100 text-purple-600",
 behavior: "Hijacked Yuque API Token used to access 'Production Environment Operations Manual', extracting embedded SSH private key (Base64 encoded)",
 defenses: "Data Loss Prevention (DLP)",
 alerts: [
 {
 severity: "critical",
 message: "Sensitive data access | User: Victim_Account | Action: Downloaded document ID: YUQUE-1234 | Content matched keyword: 'prod_ssh_private_key'"
 }
 ],
 forensic: [
 "API call to yuque.com/v2/api/documents/YUQUE-1234",
 "Document contains Base64 encoded SSH key",
 "Key belongs to dba_admin@10.8.8.88",
 "Unusual access time: 02:37 AM local time"
 ]
 },
 {
 id: 6,
 title: "Production Intrusion",
 icon: "server",
 color: "bg-pink-100 text-pink-600",
 behavior: "Using SSH certificate from jump server to log into MySQL database server (IP: 10.8.8.88, account: dba_admin)",
 defenses: "Host Intrusion Detection (HIDS)",
 alerts: [
 {
 severity: "emergency",
 message: "Unusual time SSH login | Account: dba_admin | Source IP: 10.8.8.12 (test env jump server) | Action: Executed SHOW DATABASES"
 }
 ],
 forensic: [
 "SSH login at 03:12 AM from 10.8.8.12",
 "Executed commands: SHOW DATABASES, SELECT * FROM users",
 "Session duration: 8 minutes 23 seconds",
 "Unusual query pattern (scanning all tables)"
 ]
 },
 {
 id: 7,
 title: "Data Exfiltration",
 icon: "file-export",
 color: "bg-indigo-100 text-indigo-600",
 behavior: "Compressed and encrypted customer data (filename: taobaodata.tar.gz.enc) transmitted via DNS tunnel to alibaba-bas.com",
 defenses: "Full Traffic Threat Analysis",
 alerts: [
 {
 severity: "critical",
 message: "Abnormal data transfer | Protocol: DNS TXT records | Target domain: xyz.attacker[.]com | Data volume: 142MB (500% above threshold)"
 }
 ],
 forensic: [
 "Data file created: /tmp/taobaodata.tar.gz.enc",
 "DNS queries to xyz.attacker[.]com (TXT records)",
 "Data transfer rate: 18.5KB per query",
 "Total exfiltrated: 142MB in 8,234 DNS requests"
 ]
 }
 ];
 // Render attack cards
 const timelineContainer = document.querySelector('.attack-flow-container .flex');
attackSteps.forEach((step, index) => {
 const card = document.createElement('div');
 card.className = `attack-card w-64 flex-shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer transition-all duration-300 ${index === 0 ? 'active border-l-4 border-red-500' : ''}`;
 card.innerHTML = `
 <div class="p-5">
 <div class="flex items-center justify-between mb-3">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full ${step.color} flex items-center justify-center mr-3">
 <i class="fas fa-${step.icon}"></i>
 </div>
 <span class="text-xs font-semibold text-gray-500">PHASE ${step.id}</span>
 </div>
 <span class="severity-badge ${step.alerts[0].severity === 'critical' ? 'severity-critical' : step.alerts[0].severity === 'high' ? 'severity-high' : 'severity-emergency'} rounded-full">${step.alerts[0].severity.toUpperCase()}</span>
 </div>
 <h3 class="font-semibold text-gray-800 mb-2">${step.title}</h3>
 <p class="text-sm text-gray-600 line-clamp-2 mb-3">${step.behavior}</p>
 <div class="flex justify-between items-center">
 <span class="defense-badge bg-gray-100 text-gray-800 rounded-full">${step.defenses}</span>
 <span class="text-xs text-gray-400">${step.id < 10 ? '0' + step.id : step.id}:00</span>
 </div>
 </div>
 `;
card.addEventListener('click', () => {
 // Update active card
 document.querySelectorAll('.attack-card').forEach(c => c.classList.remove('active', 'border-l-4', 'border-red-500', 'border-yellow-500', 'border-green-500', 'border-blue-500', 'border-purple-500', 'border-pink-500', 'border-indigo-500'));
 card.classList.add('active', 'border-l-4');
// Add specific border color
 if (step.color.includes('red')) card.classList.add('border-red-500');
 else if (step.color.includes('yellow')) card.classList.add('border-yellow-500');
 else if (step.color.includes('green')) card.classList.add('border-green-500');
 else if (step.color.includes('blue')) card.classList.add('border-blue-500');
 else if (step.color.includes('purple')) card.classList.add('border-purple-500');
 else if (step.color.includes('pink')) card.classList.add('border-pink-500');
 else if (step.color.includes('indigo')) card.classList.add('border-indigo-500');
// Update attack details
 const detailsContainer = document.getElementById('attack-details');
 detailsContainer.innerHTML = `
 <div>
 <div class="flex items-center mb-6">
 <div class="w-12 h-12 rounded-full ${step.color} flex items-center justify-center mr-4">
 <i class="fas fa-${step.icon} text-xl"></i>
 </div>
 <div>
 <h3 class="text-xl font-semibold text-gray-800">${step.title}</h3>
 <p class="text-sm text-gray-500">Attack Phase ${step.id}</p>
 </div>
 </div>
<div class="mb-6">
 <h4 class="font-medium text-gray-700 mb-3">Attack Behavior</h4>
 <div class="bg-gray-50 p-4 rounded-lg text-sm text-gray-700">${step.behavior}</div>
 </div>
<div class="mb-6">
 <h4 class="font-medium text-gray-700 mb-3">Triggered Defenses</h4>
 <div class="flex items-center">
 <span class="defense-badge bg-gray-100 text-gray-800 rounded-full mr-2">${step.defenses}</span>
 <span class="text-xs text-gray-500">Detected at ${step.id < 10 ? '0' + step.id : step.id}:00</span>
 </div>
 </div>
<div class="mb-6">
 <h4 class="font-medium text-gray-700 mb-3">Security Alerts</h4>
 <div class="space-y-3">
 ${step.alerts.map(alert => `
 <div class="p-3 rounded-lg ${alert.severity === 'critical' ? 'bg-red-50 border border-red-100' : alert.severity === 'high' ? 'bg-yellow-50 border border-yellow-100' : 'bg-orange-50 border border-orange-100'}">
 <div class="flex items-start">
 <div class="flex-shrink-0 mt-0.5">
 <i class="fas fa-${alert.severity === 'critical' ? 'exclamation-triangle text-red-500' : alert.severity === 'high' ? 'exclamation-circle text-yellow-500' : 'exclamation text-orange-500'}"></i>
 </div>
 <div class="ml-3">
 <div class="text-sm font-medium text-gray-800">${alert.message}</div>
 </div>
 </div>
 </div>
 `).join('')}
 </div>
 </div>
<div>
 <h4 class="font-medium text-gray-700 mb-3">Forensic Evidence</h4>
 <div class="space-y-2">
 ${step.forensic.map(item => `
 <div class="flex items-start text-sm">
 <div class="flex-shrink-0 mt-1.5 mr-2">
 <div class="w-1.5 h-1.5 rounded-full bg-gray-400"></div>
 </div>
 <div class="text-gray-700">${item}</div>
 </div>
 `).join('')}
 </div>
 </div>
 </div>
 `;
// Scroll to center the selected card
 const container = document.querySelector('.attack-flow-container');
 const cardLeft = card.offsetLeft;
 const cardWidth = card.offsetWidth;
 const containerWidth = container.offsetWidth;
 container.scrollTo({
 left: cardLeft - (containerWidth / 2) + (cardWidth / 2),
 behavior: 'smooth'
 });
 });
// Add connector after each card except the last one
 timelineContainer.appendChild(card);
 if (index < attackSteps.length - 1) {
 const connector = document.createElement('div');
 connector.className = 'flex items-center';
 connector.innerHTML = '<div class="timeline-connector w-24"></div>';
 timelineContainer.appendChild(connector);
 }
 });
 // Navigation buttons
 document.getElementById('scroll-left').addEventListener('click', () => {
 document.querySelector('.attack-flow-container').scrollBy({
 left: -200,
 behavior: 'smooth'
 });
 });
 document.getElementById('scroll-right').addEventListener('click', () => {
 document.querySelector('.attack-flow-container').scrollBy({
 left: 200,
 behavior: 'smooth'
 });
 });
 // Auto-select first card on load
 document.querySelector('.attack-card').click();
 </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/bas3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>