File size: 22,646 Bytes
a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 a32c7f7 a8dc307 |
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 |
<!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;
}
.attack-flow-container {
width: 100%;
overflow-x: auto;
padding-bottom: 1.5rem;
}
.attack-flow-container .flex {
min-width: max-content;
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8 max-w-full">
<div class="text-center mb-10">
<h1 class="text-3xl font-bold text-gray-800 mb-2">高级持续性威胁攻击链</h1>
<p class="text-gray-600 max-w-3xl mx-auto">完整的攻击流程可视化，包含交互式防御检测点</p>
</div>
<!-- Defense Detection Summary moved to top -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
<div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
<h3 class="font-semibold text-gray-800">防御检测概览</h3>
</div>
<div id="defense-summary" class="p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
<i class="fas fa-shield-alt text-blue-500"></i>
</div>
<div>
<h4 class="text-sm font-medium text-gray-800">拦截率</h4>
<p class="text-2xl font-bold text-blue-600">90%</p>
</div>
</div>
</div>
<div class="bg-yellow-50 p-4 rounded-lg">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mr-4">
<i class="fas fa-bell text-yellow-500"></i>
</div>
<div>
<h4 class="text-sm font-medium text-gray-800">告警率</h4>
<p class="text-2xl font-bold text-yellow-600">80%</p>
</div>
</div>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
<i class="fas fa-search text-green-500"></i>
</div>
<div>
<h4 class="text-sm font-medium text-gray-800">溯源率</h4>
<p class="text-2xl font-bold text-green-600">70%</p>
</div>
</div>
</div>
</div>
</div>
</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">攻击流程时间线</h2>
<p class="text-gray-500 text-sm">点击任意攻击阶段查看详细取证证据</p>
</div>
</div>
<div class="relative">
<div class="attack-flow-container">
<div class="flex space-x-4 items-center">
<!-- Attacker Node -->
<div class="attack-card w-48 flex-shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer transition-all duration-300 attacker-node">
<div class="p-4">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-2">
<i class="fas fa-user-secret"></i>
</div>
<span class="text-xs font-semibold text-gray-500">攻击源</span>
</div>
</div>
<h3 class="font-semibold text-gray-800 text-sm">BAS AI Hacker</h3>
</div>
</div>
<div class="arrow">
<i class="fas fa-arrow-right"></i>
</div>
<!-- Attack cards will be inserted here by JavaScript -->
</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">攻击阶段取证详情</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">选择攻击阶段</h4>
<p class="text-gray-500 max-w-md 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: "伪造的'拥抱AI变革'通知邮件，包含伪装为files.zip的恶意文件",
defenses: "邮件安全网关",
alerts: [
{
severity: "critical",
message: "检测到伪造发件人 | 发件人: itsupport@fakecompany[.]com → 收件人: victim@corp.com | 包含恶意附件 (SHA256: a1b2c3...) | 识别为Emotet钓鱼模板"
}
],
forensic: [
"发件人IP: 192.168.1.45 (保加利亚)",
"附件SHA256: a1b2c3d4e5f6...",
"邮件头显示DKIM验证失败",
"匹配已知Emotet模板(相似度90%)"
]
},
{
id: 2,
title: "木马执行",
icon: "bug",
color: "bg-yellow-100 text-yellow-600",
behavior: "受害者下载恶意文件触发PowerShell脚本，下载Cobalt Strike DLL并注入到合法进程中",
defenses: "终端检测与响应(EDR)",
alerts: [
{
severity: "high",
message: "可疑进程注入 | 进程: C:\\Windows\\System32\\explorer.exe → 加载模块: a09xdf.dll | DLL签名无效且匹配已知Cobalt Strike签名"
}
],
forensic: [
"进程树: files.zip → powershell.exe → explorer.exe",
"DLL内存分配模式匹配Cobalt Strike",
"网络连接尝试到185.123.32.1",
"注册表键修改: HKLM\\Software\\Microsoft\\Windows"
]
},
{
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证书签发)"
}
],
forensic: [
"C2域名: api.cloudfront[.]com (解析到54.231.1.1)",
"HTTPS流量模式: 每17秒5KB",
"证书签发者: Let's Encrypt(对CDN不常见)",
"SSH隧道建立到10.8.8.12(内部跳板服务器)"
]
},
{
id: 4,
title: "凭证窃取",
icon: "user-secret",
color: "bg-blue-100 text-blue-600",
behavior: "使用Mimikatz提取Chrome浏览器cookie并伪造User-Agent(同步受害者浏览器指纹)",
defenses: "用户行为分析(UEBA)",
alerts: [
{
severity: "high",
message: "异常浏览器会话 | 用户: Victim_Account | 源IP: 172.16.1.23 → 设备指纹改变(新的VM特征/QEMU虚拟GPU)"
}
],
forensic: [
"内存中检测到Mimikatz进程(伪装为svchost.exe)",
"访问了Chrome cookie数据库",
"User-Agent更改为匹配受害者原始浏览器",
"来自172.16.1.23的新登录会话带有VM指纹"
]
},
{
id: 5,
title: "云文档渗透",
icon: "cloud",
color: "bg-purple-100 text-purple-600",
behavior: "劫持的Yuque API Token用于访问'生产环境操作手册'，提取嵌入的SSH私钥(Base64编码)",
defenses: "数据防泄漏(DLP)",
alerts: [
{
severity: "critical",
message: "敏感数据访问 | 用户: Victim_Account | 操作: 下载文档ID: YUQUE-1234 | 内容匹配关键词: 'prod_ssh_private_key'"
}
],
forensic: [
"API调用到yuque.com/v2/api/documents/YUQUE-1234",
"文档包含Base64编码的SSH密钥",
"密钥属于dba_admin@10.8.8.88",
"异常访问时间: 当地时间02:37 AM"
]
},
{
id: 6,
title: "生产环境入侵",
icon: "server",
color: "bg-pink-100 text-pink-600",
behavior: "使用来自跳板服务器的SSH证书登录MySQL数据库服务器(IP: 10.8.8.88, 账号: dba_admin)",
defenses: "主机入侵检测(HIDS)",
alerts: [
{
severity: "emergency",
message: "异常时间SSH登录 | 账号: dba_admin | 源IP: 10.8.8.12 (测试环境跳板服务器) | 操作: 执行SHOW DATABASES"
}
],
forensic: [
"SSH登录时间: 03:12 AM 来自10.8.8.12",
"执行命令: SHOW DATABASES, SELECT * FROM users",
"会话时长: 8分钟23秒",
"异常查询模式(扫描所有表)"
]
},
{
id: 7,
title: "数据外泄",
icon: "file-export",
color: "bg-indigo-100 text-indigo-600",
behavior: "压缩并加密客户数据(文件名: taobaodata.tar.gz.enc)通过DNS隧道传输到alibaba-bas.com",
defenses: "全流量威胁分析",
alerts: [
{
severity: "critical",
message: "异常数据传输 | 协议: DNS TXT记录 | 目标域名: xyz.attacker[.]com | 数据量: 142MB (超过阈值500%)"
}
],
forensic: [
"创建数据文件: /tmp/taobaodata.tar.gz.enc",
"DNS查询到xyz.attacker[.]com (TXT记录)",
"数据传输速率: 每次查询18.5KB",
"总外泄数据: 142MB 通过8,234次DNS请求"
]
}
];
// 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-48 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-4">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full ${step.color} flex items-center justify-center mr-2">
<i class="fas fa-${step.icon}"></i>
</div>
<span class="text-xs font-semibold text-gray-500">阶段 ${step.id}</span>
</div>
</div>
<h3 class="font-semibold text-gray-800 text-sm">${step.title}</h3>
</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">攻击阶段 ${step.id}</p>
</div>
</div>
<div class="mb-6">
<h4 class="font-medium text-gray-700 mb-3">攻击行为</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">触发防御</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">检测时间 ${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">安全告警</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">取证证据</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>
`;
});
// 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"></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/bas4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |