wangzifan396-wzf/security-viz-lab

# 网络安全可视化实验室 · security-viz-lab 单文件 HTML/CSS/JS + SVG 实现，**零外部依赖**，开箱即用——直接用浏览器打开 `index.html` 即可运行。 ## 项目特性 - **单文件交付**：所有 HTML、CSS、JavaScript 与 SVG 内联于 `index.html`，无需构建、无需联网。 - **零外部依赖**：不引入任何 CDN、字体库或第三方框架，全部图形由原生 SVG + JavaScript 实时绘制。 - **纯客户端动画**：使用 `requestAnimationFrame` 驱动循环，`transform` 属性驱动位移，无 `backdrop-filter`、无 `mousemove` 聚光特效。 - **交互式可视化**：每个模块均包含按钮、滑块与实时统计，可动态切换攻击类型、调节参数、启停动画。 ## 8 大模块 | 编号 | 模块 | 主题 | 核心交互 | |------|------|------|----------| | 01 | DDoS 攻击与防御 | UDP Flood / SYN Flood / HTTP Flood | 僵尸网络规模、攻击类型、防御开关、启停攻击 | | 02 | SQL 注入 | UNION / 报错 / 布尔盲注 / 时间盲注 / 带外 | 注入类型、WAF、预编译语句、执行注入 | | 03 | XSS 与 CSRF | 存储型 / 反射型 / DOM 型 XSS、CSRF | XSS/CSRF 切换、CSP、HttpOnly、执行攻击 | | 04 | 渗透测试流程 | 侦察 → 扫描 → 利用 → 后渗透 → 报告 | 阶段切换、扫描、漏洞利用、目标复杂度 | | 05 | Web 应用防火墙 WAF | 特征匹配 / 行为分析 / 机器学习 | 规则类型、灵敏度、发送恶意请求 | | 06 | 入侵检测 IDS/IPS | NIDS / HIDS、签名 / 异常检测 | 模式切换、检测方式、注入流量、触发告警 | | 07 | 蜜罐 Honeypot | SSH / Web / DB 伪装服务 | 蜜罐类型、蜜罐数量、模拟攻击者 | | 08 | 零信任架构 | 身份验证 / 设备健康 / 微分段 / 持续监控 | 零信任开关、策略严格度、请求访问 | ## 技术栈 - **HTML5** + 内联 **CSS3**（CSS 变量主题化，主色 `--accent-2: #7c5cff`） - **原生 JavaScript**（ES5 兼容写法，IIFE 模块隔离） - **SVG**（通过 `el()` / `svgEl()` 辅助函数程序化生成） ## 快速开始 # 克隆仓库 git clone https://github.com/wangzifan396-wzf/security-viz-lab.git # 进入目录 cd security-viz-lab # 直接用浏览器打开（任选其一） open index.html # macOS xdg-open index.html # Linux start index.html # Windows 无需安装任何依赖，无需启动服务器。 ## 文件结构 security-viz-lab/ ├── index.html # 主可视化文件（单文件，包含全部 8 个模块） ├── README.md # 项目说明 ├── LICENSE # MIT 许可证 └── .gitignore # Git 忽略规则 ## 设计规范 - **主色**：`--accent-2: #7c5cff`（紫罗兰），CSS 中所有 `--ACCENT` 已统一替换为 `--accent-2`。 - **配色**：深色背景 `#08090a`，搭配青、翠绿、琥珀、玫红、紫罗兰等语义化强调色。 - **动画**：全部基于 `transform` 与 `requestAnimationFrame`，遵循 `prefers-reduced-motion`。 - **响应式**：≤900px 自动收起侧边栏，提供汉堡菜单切换。 ## 许可证 [MIT License](./LICENSE) · Copyright 2026 wangzifan396-wzf

标签：CISA项目, Mutation, SVG, 单文件应用, 原生JavaScript, 可视化, 后端开发, 安全教育, 网络安全, 隐私保护