Download index.html from capta1n/bas2: direct link, hf CLI and curl.
- Browser
- Download file 35.1 kB
-
https://huggingface.co/spaces/capta1n/bas2/resolve/main/index.html
- Command line
-
hf download hf://spaces/capta1n/bas2/index.html
-
curl -L -o index.html https://huggingface.co/spaces/capta1n/bas2/resolve/main/index.html
35.1 kB
| <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 --> | |
| <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> | |
| <!-- 步骤1: 钓鱼邮件 --> | |
| <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> | |
| <!-- 步骤2: 恶意软件执行 --> | |
| <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> | |
| <!-- 步骤3: C2通信 --> | |
| <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> | |
| <!-- 步骤4: 凭据窃取 --> | |
| <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> | |
| <!-- 步骤5: 云文档渗透 --> | |
| <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> | |
| <!-- 步骤6: 生产环境入侵 --> | |
| <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> | |
| <!-- 步骤7: 数据外泄 --> | |
| <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> | |
| <!-- 最终C2连接 --> | |
| <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"> | |
| <!-- 步骤1告警 --> | |
| <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> | |
| <!-- 步骤2告警 --> | |
| <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> | |
| <!-- 步骤3告警 --> | |
| <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> | |
| <!-- 步骤4告警 --> | |
| <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> | |
| <!-- 步骤5告警 --> | |
| <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> | |
| <!-- 步骤6告警 --> | |
| <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> | |
| <!-- 步骤7告警 --> | |
| <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; | |
| // 提升选中节点的z-index | |
| 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> |