|
|
<!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-node { |
|
|
transition: all 0.3s ease; |
|
|
cursor: move; |
|
|
z-index: 2; |
|
|
position: absolute; |
|
|
user-select: none; |
|
|
} |
|
|
.attack-node:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.critical { |
|
|
border: 2px solid #ef4444; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } |
|
|
} |
|
|
.data-flow { |
|
|
stroke-dasharray: 5; |
|
|
animation: dash 30s linear infinite; |
|
|
} |
|
|
@keyframes dash { |
|
|
to { |
|
|
stroke-dashoffset: -1000; |
|
|
} |
|
|
} |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
transform: translateX(100%); |
|
|
} |
|
|
.sidebar.open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
.zoom-container { |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
.attack-flow { |
|
|
position: relative; |
|
|
height: 600px; |
|
|
width: 100%; |
|
|
overflow: hidden; |
|
|
} |
|
|
.alert-item { |
|
|
border-left: 3px solid; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
.alert-item:hover { |
|
|
transform: translateX(3px); |
|
|
} |
|
|
.node-icon { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 50%; |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
.sequence-number { |
|
|
position: absolute; |
|
|
top: -12px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
background-color: #3b82f6; |
|
|
color: white; |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
} |
|
|
.flow-arrow { |
|
|
position: absolute; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
transform: rotate(45deg); |
|
|
z-index: 1; |
|
|
} |
|
|
.behavior-bg { |
|
|
background-color: #f0f9ff; |
|
|
border-left: 3px solid #3b82f6; |
|
|
} |
|
|
.products-bg { |
|
|
background-color: #f0fdf4; |
|
|
border-left: 3px solid #10b981; |
|
|
} |
|
|
.alerts-bg { |
|
|
background-color: #fef2f2; |
|
|
border-left: 3px solid #ef4444; |
|
|
} |
|
|
.attacker-highlight { |
|
|
background-color: #fee2e2; |
|
|
border: 2px solid #ef4444; |
|
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<h1 class="text-3xl font-bold text-center text-gray-800 mb-2">钓鱼攻击杀伤链可视化</h1> |
|
|
<p class="text-center text-gray-600 mb-8">从初始入侵到数据外泄的完整攻击流程</p> |
|
|
|
|
|
|
|
|
<div class="flex justify-center mb-4 space-x-2"> |
|
|
<button id="zoom-in" class="px-3 py-1 bg-white rounded-md shadow hover:bg-gray-100"> |
|
|
<i class="fas fa-search-plus"></i> 放大 |
|
|
</button> |
|
|
<button id="zoom-out" class="px-3 py-1 bg-white rounded-md shadow hover:bg-gray-100"> |
|
|
<i class="fas fa-search-minus"></i> 缩小 |
|
|
</button> |
|
|
<button id="zoom-reset" class="px-3 py-1 bg-white rounded-md shadow hover:bg-gray-100"> |
|
|
<i class="fas fa-expand"></i> 重置 |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative bg-white rounded-xl shadow-lg p-6 overflow-hidden border border-gray-200"> |
|
|
|
|
|
<div id="zoom-container" class="zoom-container origin-center"> |
|
|
|
|
|
<div class="absolute inset-0 opacity-20"> |
|
|
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> |
|
|
<defs> |
|
|
<pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse"> |
|
|
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="0.5"/> |
|
|
</pattern> |
|
|
</defs> |
|
|
<rect width="100%" height="100%" fill="url(#grid)" /> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="attack-flow" id="flow-container"> |
|
|
|
|
|
<svg class="absolute inset-0 w-full h-full" id="attack-flow"></svg> |
|
|
|
|
|
|
|
|
<div id="attacker" class="attack-node attacker-highlight p-3 rounded-lg shadow-sm w-[160px] text-center" style="left: 5%; top: 50%;"> |
|
|
<div class="node-icon bg-red-100"> |
|
|
<i class="fas fa-user-secret text-red-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-red-800 text-sm">BAS AI 黑客</h3> |
|
|
<p class="text-xs text-red-600 mt-1">C2: 185.143.223.47</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step1" class="attack-node bg-blue-50 p-3 rounded-lg shadow-sm border-2 border-blue-300 w-[160px] text-center" style="left: 25%; top: 15%;"> |
|
|
<div class="sequence-number">1</div> |
|
|
<div class="node-icon bg-blue-100"> |
|
|
<i class="fas fa-envelope text-blue-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-blue-800 text-sm">钓鱼邮件</h3> |
|
|
<p class="text-xs text-blue-600 mt-1">"拥抱AI变革"通知</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step2" class="attack-node bg-red-50 p-3 rounded-lg shadow-sm border-2 border-red-300 w-[160px] text-center" style="left: 45%; top: 30%;"> |
|
|
<div class="sequence-number">2</div> |
|
|
<div class="node-icon bg-red-100"> |
|
|
<i class="fas fa-bug text-red-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-red-800 text-sm">恶意软件执行</h3> |
|
|
<p class="text-xs text-red-600 mt-1">Cobalt Strike DLL</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step3" class="attack-node bg-purple-50 p-3 rounded-lg shadow-sm border-2 border-purple-300 w-[160px] text-center" style="left: 25%; top: 45%;"> |
|
|
<div class="sequence-number">3</div> |
|
|
<div class="node-icon bg-purple-100"> |
|
|
<i class="fas fa-network-wired text-purple-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-purple-800 text-sm">C2通道</h3> |
|
|
<p class="text-xs text-purple-600 mt-1">api.cloudfront[.]com</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step4" class="attack-node bg-yellow-50 p-3 rounded-lg shadow-sm border-2 border-yellow-300 w-[160px] text-center" style="left: 45%; top: 60%;"> |
|
|
<div class="sequence-number">4</div> |
|
|
<div class="node-icon bg-yellow-100"> |
|
|
<i class="fas fa-key text-yellow-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-yellow-800 text-sm">凭据窃取</h3> |
|
|
<p class="text-xs text-yellow-600 mt-1">Mimikatz + Chrome</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step5" class="attack-node bg-green-50 p-3 rounded-lg shadow-sm border-2 border-green-300 w-[160px] text-center" style="left: 65%; top: 30%;"> |
|
|
<div class="sequence-number">5</div> |
|
|
<div class="node-icon bg-green-100"> |
|
|
<i class="fas fa-cloud text-green-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-green-800 text-sm">云文档访问</h3> |
|
|
<p class="text-xs text-green-600 mt-1">语雀API Token</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step6" class="attack-node bg-indigo-50 p-3 rounded-lg shadow-sm border-2 border-indigo-300 w-[160px] text-center" style="left: 65%; top: 60%;"> |
|
|
<div class="sequence-number">6</div> |
|
|
<div class="node-icon bg-indigo-100"> |
|
|
<i class="fas fa-server text-indigo-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-indigo-800 text-sm">数据库服务器访问</h3> |
|
|
<p class="text-xs text-indigo-600 mt-1">10.8.8.88</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step7" class="attack-node bg-pink-50 p-3 rounded-lg shadow-sm border-2 border-pink-300 w-[160px] text-center" style="left: 85%; top: 45%;"> |
|
|
<div class="sequence-number">7</div> |
|
|
<div class="node-icon bg-pink-100"> |
|
|
<i class="fas fa-file-export text-pink-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-pink-800 text-sm">数据外泄</h3> |
|
|
<p class="text-xs text-pink-600 mt-1">DNS隧道传输</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="final-c2" class="attack-node bg-red-50 p-3 rounded-lg shadow-sm border-2 border-red-300 w-[160px] text-center" style="left: 85%; top: 15%;"> |
|
|
<div class="node-icon bg-red-100"> |
|
|
<i class="fas fa-exchange-alt text-red-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-red-800 text-sm">C2连接</h3> |
|
|
<p class="text-xs text-red-600 mt-1">数据外泄完成</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="attack-sidebar" class="sidebar absolute top-0 right-0 w-96 h-full bg-white shadow-lg p-6 overflow-y-auto"> |
|
|
<button id="close-sidebar" class="absolute top-4 left-4 text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<div id="attack-details"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4" id="step-title">攻击步骤详情</h2> |
|
|
<div class="mb-6"> |
|
|
<h3 class="font-medium text-gray-700 mb-2">攻击行为</h3> |
|
|
<div class="p-4 rounded-md behavior-bg" id="step-behavior"> |
|
|
<p class="text-sm text-gray-600">点击攻击节点查看详情</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<h3 class="font-medium text-gray-700 mb-2">防护产品</h3> |
|
|
<div class="p-4 rounded-md products-bg" id="step-products"> |
|
|
<p class="text-sm text-gray-600">暂无产品信息</p> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-700 mb-2">告警信息</h3> |
|
|
<div class="p-4 rounded-md alerts-bg" id="step-alerts"> |
|
|
<p class="text-sm text-gray-600">暂无告警信息</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-white rounded-lg shadow-md p-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">攻击时间线与安全告警</h2> |
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="alert-item bg-blue-50 border-blue-500 p-4 rounded cursor-pointer" data-step="1"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-500 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-envelope text-sm"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-blue-800">检测到钓鱼邮件</h3> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">邮件安全网关</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">[严重] 检测到仿冒发件人邮件 | 发件人: itsupport@fakecompany[.]com → 目标: victim@corp.com</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="alert-item bg-red-50 border-red-500 p-4 rounded cursor-pointer" data-step="2"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-500 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-bug text-sm"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-red-800">恶意进程注入</h3> |
|
|
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">终端检测与响应 (EDR)</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">[高危] 可疑进程注入行为 | 进程: C:\Windows\System32\explorer.exe → 加载内存模块: a09xdf.dll</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="alert-item bg-purple-50 border-purple-500 p-4 rounded cursor-pointer" data-step="3"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-500 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-network-wired text-sm"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-purple-800">可疑C2通信</h3> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">网络流量分析 (NTA)</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">[紧急] 异常外联行为 | 目标IP: 54.231.1.1（归属AWS新加坡） | 协议: HTTPS</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="alert-item bg-yellow-50 border-yellow-500 p-4 rounded cursor-pointer" data-step="4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-yellow-500 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-key text-sm"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-yellow-800">检测到凭据窃取</h3> |
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">身份认证异常检测 (UEBA)</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">[高危] 异常浏览器会话 | 用户: Victim_Account | IP来源: 172.16.1.23 → 登录设备指纹突变</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="alert-item bg-green-50 border-green-500 p-4 rounded cursor-pointer" data-step="5"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-500 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-cloud text-sm"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-green-800">敏感数据访问</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">DLP (数据防泄漏)</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">[严重] 敏感数据访问行为 | 用户: Victim_Account | 操作: 下载文档ID: YUQUE-1234</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="alert-item bg-indigo-50 border-indigo-500 p-4 rounded cursor-pointer" data-step="6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-500 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-server text-sm"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-indigo-800">数据库服务器入侵</h3> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">HIDS (主机入侵检测)</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">[紧急] 非常规时间SSH登录 | 账号: dba_admin | 来源IP: 10.8.8.12 | 操作: 执行SHOW DATABASES</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="alert-item bg-pink-50 border-pink-500 p-4 rounded cursor-pointer" data-step="7"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-pink-500 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-file-export text-sm"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-pink-800">检测到数据外泄</h3> |
|
|
<span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">全流量威胁回溯</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1">[严重] 异常数据传输 | 协议: DNS TXT记录 | 目标域: xyz.attacker[.]com | 数据量: 142MB</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const attackSteps = { |
|
|
1: { |
|
|
title: "钓鱼邮件投递", |
|
|
behavior: "伪造'拥抱AI变革'通知邮件，内含带恶意木马的文件（伪造成files.zip文件）", |
|
|
products: "邮件安全网关", |
|
|
alerts: "[严重] 检测到仿冒发件人邮件 | 发件人: itsupport@fakecompany[.]com → 目标: victim@corp.com | 包含恶意附件哈希(SHA256: a1b2c3...) | 判定为Emotet钓鱼模板" |
|
|
}, |
|
|
2: { |
|
|
title: "木马执行", |
|
|
behavior: "受害者下载木马文件后触发PowerShell脚本，下载Cobalt Strike DLL并注入到合法进程", |
|
|
products: "终端检测与响应（EDR）", |
|
|
alerts: "[高危] 可疑进程注入行为 | 进程: C:\\Windows\\System32\\explorer.exe → 加载内存模块: a09xdf.dll | DLL签名无效且匹配已知Cobalt Strike特征码" |
|
|
}, |
|
|
3: { |
|
|
title: "C2通道建立与横向移动", |
|
|
behavior: "通过CDN域名的HTTPS心跳通信（如api.cloudfront[.]com），部署反向SSH隧道至内网跳板机", |
|
|
products: "网络流量分析（NTA）", |
|
|
alerts: "[紧急] 异常外联行为 | 目标IP: 54.231.1.1（归属AWS新加坡） | 协议: HTTPS | 证书指纹异常（CN=*.cloudfront[.]com但签发者匹配Let's Encrypt野生证书）" |
|
|
}, |
|
|
4: { |
|
|
title: "凭据窃取与浏览器模拟", |
|
|
behavior: "利用Mimikatz提取Chrome浏览器Cookie并伪造User-Agent（同步受害者浏览器指纹）", |
|
|
products: "身份认证异常检测（UEBA）", |
|
|
alerts: "[高危] 异常浏览器会话 | 用户: Victim_Account | IP来源: 172.16.1.23 → 登录设备指纹突变（新增虚拟机特征/QEMU虚拟显卡）" |
|
|
}, |
|
|
5: { |
|
|
title: "云文档渗透", |
|
|
behavior: "通过劫持的语雀API Token访问《生产环境运维手册》，提取内嵌的SSH私钥（Base64编码）", |
|
|
products: "DLP（数据防泄漏）", |
|
|
alerts: "[严重] 敏感数据访问行为 | 用户: Victim_Account | 操作: 下载文档ID: YUQUE-1234 | 内容匹配关键字: 'prod_ssh_private_key'" |
|
|
}, |
|
|
6: { |
|
|
title: "生产网络入侵", |
|
|
behavior: "通过跳板机使用SSH证书登陆MySQL数据库服务器（IP: 10.8.8.88，账号: dba_admin）", |
|
|
products: "HIDS（主机入侵检测）", |
|
|
alerts: "[紧急] 非常规时间SSH登录 | 账号: dba_admin | 来源IP: 10.8.8.12（测试环境跳板机） | 操作: 执行SHOW DATABASES" |
|
|
}, |
|
|
7: { |
|
|
title: "数据外泄", |
|
|
behavior: "将压缩加密后的客户数据（文件名: taobaodata.tar.gz.enc）通过DNS隧道传输到alibaba-bas.com", |
|
|
products: "全流量威胁回溯", |
|
|
alerts: "[严重] 异常数据传输 | 协议: DNS TXT记录 | 目标域: xyz.attacker[.]com | 数据量: 142MB（超阈值500%）" |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
function drawCurvedLine(svg, fromSelector, toSelector, color = "red", width = 2, animate = false) { |
|
|
const fromEl = document.querySelector(fromSelector); |
|
|
const toEl = document.querySelector(toSelector); |
|
|
|
|
|
if (!fromEl || !toEl) return; |
|
|
|
|
|
const fromRect = fromEl.getBoundingClientRect(); |
|
|
const toRect = toEl.getBoundingClientRect(); |
|
|
const svgRect = svg.getBoundingClientRect(); |
|
|
|
|
|
const x1 = fromRect.left + fromRect.width/2 - svgRect.left; |
|
|
const y1 = fromRect.top + fromRect.height/2 - svgRect.top; |
|
|
const x2 = toRect.left + toRect.width/2 - svgRect.left; |
|
|
const y2 = toRect.top + toRect.height/2 - svgRect.top; |
|
|
|
|
|
|
|
|
const dx = x2 - x1; |
|
|
const dy = y2 - y1; |
|
|
const controlX1 = x1 + dx * 0.5; |
|
|
const controlY1 = y1; |
|
|
const controlX2 = x1 + dx * 0.5; |
|
|
const controlY2 = y2; |
|
|
|
|
|
|
|
|
const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); |
|
|
path.setAttribute("d", `M${x1},${y1} C${controlX1},${controlY1} ${controlX2},${controlY2} ${x2},${y2}`); |
|
|
path.setAttribute("stroke", color); |
|
|
path.setAttribute("stroke-width", width); |
|
|
path.setAttribute("fill", "none"); |
|
|
path.setAttribute("stroke-linecap", "round"); |
|
|
|
|
|
if (animate) { |
|
|
path.classList.add("data-flow"); |
|
|
} |
|
|
|
|
|
svg.appendChild(path); |
|
|
|
|
|
|
|
|
const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker"); |
|
|
marker.setAttribute("id", `arrow-${color.replace('#', '')}`); |
|
|
marker.setAttribute("viewBox", "0 0 10 10"); |
|
|
marker.setAttribute("refX", "5"); |
|
|
marker.setAttribute("refY", "5"); |
|
|
marker.setAttribute("markerWidth", "6"); |
|
|
marker.setAttribute("markerHeight", "6"); |
|
|
marker.setAttribute("orient", "auto-start-reverse"); |
|
|
|
|
|
const arrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); |
|
|
arrowPath.setAttribute("d", "M 0 0 L 10 5 L 0 10 z"); |
|
|
arrowPath.setAttribute("fill", color); |
|
|
|
|
|
marker.appendChild(arrowPath); |
|
|
svg.appendChild(marker); |
|
|
|
|
|
path.setAttribute("marker-end", `url(#arrow-${color.replace('#', '')})`); |
|
|
|
|
|
|
|
|
const pathLength = path.getTotalLength(); |
|
|
const midPoint = path.getPointAtLength(pathLength * 0.5); |
|
|
|
|
|
const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); |
|
|
text.setAttribute("x", midPoint.x); |
|
|
text.setAttribute("y", midPoint.y); |
|
|
text.setAttribute("text-anchor", "middle"); |
|
|
text.setAttribute("dominant-baseline", "middle"); |
|
|
text.setAttribute("font-size", "10"); |
|
|
text.setAttribute("fill", color); |
|
|
text.setAttribute("font-weight", "bold"); |
|
|
|
|
|
|
|
|
const toNode = document.querySelector(toSelector); |
|
|
if (toNode) { |
|
|
const seqNumElement = toNode.querySelector('.sequence-number'); |
|
|
if (seqNumElement) { |
|
|
text.textContent = seqNumElement.textContent; |
|
|
} |
|
|
} |
|
|
|
|
|
svg.appendChild(text); |
|
|
|
|
|
return path; |
|
|
} |
|
|
|
|
|
|
|
|
function showAttackDetails(stepId) { |
|
|
const step = attackSteps[stepId]; |
|
|
if (!step) return; |
|
|
|
|
|
document.getElementById("step-title").textContent = step.title; |
|
|
document.getElementById("step-behavior").innerHTML = `<p class="text-sm text-gray-600">${step.behavior}</p>`; |
|
|
document.getElementById("step-products").innerHTML = `<p class="text-sm text-gray-600">${step.products}</p>`; |
|
|
document.getElementById("step-alerts").innerHTML = `<p class="text-sm text-gray-600">${step.alerts}</p>`; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.attack-node').forEach(node => { |
|
|
node.classList.remove('critical'); |
|
|
}); |
|
|
document.getElementById(`step${stepId}`).classList.add('critical'); |
|
|
|
|
|
|
|
|
document.getElementById("attack-sidebar").classList.add("open"); |
|
|
} |
|
|
|
|
|
|
|
|
function initVisualization() { |
|
|
const svg = document.getElementById("attack-flow"); |
|
|
svg.innerHTML = ""; |
|
|
|
|
|
|
|
|
drawCurvedLine(svg, "#attacker", "#step1", "#3b82f6", 2); |
|
|
drawCurvedLine(svg, "#step1", "#step2", "#ef4444", 2); |
|
|
drawCurvedLine(svg, "#step2", "#step3", "#8b5cf6", 2); |
|
|
drawCurvedLine(svg, "#step3", "#step4", "#f59e0b", 2); |
|
|
drawCurvedLine(svg, "#step4", "#step5", "#10b981", 2); |
|
|
drawCurvedLine(svg, "#step5", "#step6", "#6366f1", 2); |
|
|
drawCurvedLine(svg, "#step6", "#step7", "#ec4899", 2); |
|
|
drawCurvedLine(svg, "#step7", "#final-c2", "#ef4444", 2); |
|
|
drawCurvedLine(svg, "#final-c2", "#attacker", "#ef4444", 2, true); |
|
|
} |
|
|
|
|
|
|
|
|
let scale = 1; |
|
|
const zoomContainer = document.getElementById("zoom-container"); |
|
|
|
|
|
document.getElementById("zoom-in").addEventListener("click", () => { |
|
|
scale += 0.1; |
|
|
zoomContainer.style.transform = `scale(${scale})`; |
|
|
}); |
|
|
|
|
|
document.getElementById("zoom-out").addEventListener("click", () => { |
|
|
if (scale > 0.5) { |
|
|
scale -= 0.1; |
|
|
zoomContainer.style.transform = `scale(${scale})`; |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById("zoom-reset").addEventListener("click", () => { |
|
|
scale = 1; |
|
|
zoomContainer.style.transform = `scale(${scale})`; |
|
|
}); |
|
|
|
|
|
|
|
|
function setupDraggableNodes() { |
|
|
const nodes = document.querySelectorAll('.attack-node'); |
|
|
let selectedNode = null; |
|
|
let offsetX, offsetY; |
|
|
|
|
|
nodes.forEach(node => { |
|
|
node.addEventListener('mousedown', (e) => { |
|
|
if (e.button !== 0) return; |
|
|
|
|
|
selectedNode = node; |
|
|
const rect = node.getBoundingClientRect(); |
|
|
offsetX = e.clientX - rect.left; |
|
|
offsetY = e.clientY - rect.top; |
|
|
|
|
|
|
|
|
nodes.forEach(n => n.style.zIndex = 2); |
|
|
selectedNode.style.zIndex = 10; |
|
|
|
|
|
e.preventDefault(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
if (selectedNode) { |
|
|
const container = document.getElementById('flow-container'); |
|
|
const containerRect = container.getBoundingClientRect(); |
|
|
|
|
|
|
|
|
let left = e.clientX - containerRect.left - offsetX; |
|
|
let top = e.clientY - containerRect.top - offsetY; |
|
|
|
|
|
|
|
|
left = Math.max(0, Math.min(left, containerRect.width - selectedNode.offsetWidth)); |
|
|
top = Math.max(0, Math.min(top, containerRect.height - selectedNode.offsetHeight)); |
|
|
|
|
|
selectedNode.style.left = `${left}px`; |
|
|
selectedNode.style.top = `${top}px`; |
|
|
|
|
|
|
|
|
initVisualization(); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener('mouseup', () => { |
|
|
selectedNode = null; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", () => { |
|
|
initVisualization(); |
|
|
setupDraggableNodes(); |
|
|
|
|
|
|
|
|
for (let i = 1; i <= 7; i++) { |
|
|
document.getElementById(`step${i}`).addEventListener("click", () => { |
|
|
showAttackDetails(i); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.alert-item').forEach(alert => { |
|
|
alert.addEventListener('click', () => { |
|
|
const stepId = alert.getAttribute('data-step'); |
|
|
showAttackDetails(stepId); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById("close-sidebar").addEventListener("click", () => { |
|
|
document.getElementById("attack-sidebar").classList.remove("open"); |
|
|
document.querySelectorAll('.attack-node').forEach(node => { |
|
|
node.classList.remove('critical'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('flow-container').addEventListener('click', (e) => { |
|
|
if (e.target === document.getElementById('flow-container')) { |
|
|
document.getElementById("attack-sidebar").classList.remove("open"); |
|
|
document.querySelectorAll('.attack-node').forEach(node => { |
|
|
node.classList.remove('critical'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.attack-node').forEach(node => { |
|
|
node.addEventListener('mouseenter', () => { |
|
|
node.classList.add('shadow-md'); |
|
|
}); |
|
|
node.addEventListener('mouseleave', () => { |
|
|
node.classList.remove('shadow-md'); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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/bas2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
