osnolanarf/attackflow

[🇪🇸 西班牙语版本](README.es.md) # AttackFlow **[→ 在线站点](https://osnolanarf.github.io/attackflow/)** 用于可视化 DFIR 事件时间线的独立 Web 工具。无需安装、无后端、无构建步骤——可直接在浏览器或 GitHub Pages 中运行。 ## 功能简介 AttackFlow 专为需要重建和传达安全事件发生顺序的安全分析师设计。它能生成清晰、可导出的时间线可视化图表，适用于技术报告、高管汇报和事后文档记录。 ## 截图   ## 特性 - **两种可视化模式** — 垂直（自上而下）和水平（从左到右） - **时间或线性间距** — 事件间距可按实际经过的时间成比例分布，或等距排列 - **水平模式下的交替布局** — 标签在轴线上下交替显示以防止重叠 - **类别支持** — 事件可标记类别（例如 MITRE ATT&CK 战术），并以不同颜色渲染 - **手动分隔符** — 使用 `---` 语法定义自定义阶段标签；若未使用，则自动检测日期边界 - **可调整面板大小** — 拖动中央分隔条以调整工作区比例 - **实时渲染** — 时间线随输入实时更新，内置 300ms 防抖 - **无效事件处理** — 无法识别日期格式的行将标记 ⚠ 并以柔和颜色渲染 - **双主题** — 暗色（Hinterlands）和亮色（Bliss），设置保存在 `localStorage` 中 - **上下文帮助** — `?` 按钮可在模态框中查看格式参考 ## 输入格式 ``` DD-MM-YYYY HH:MM | category | description DD-MM-YYYY HH:MM | description | category | description (no date) Free text without pipes --- Section label # Comment (ignored) ``` - **日期格式：** `DD-MM-YYYY HH:MM` 或 `YYYY-MM-DD HH:MM`。秒数为可选：`HH:MM[:SS]` - **类别为可选项。** 若省略，第二个字段将被视为描述。 - **`---` 分隔符** 会激活手动模式——分组取决于您的标签，而非自动日期检测。 - **无日期事件** — 可以不带竖线书写（纯文本），或带竖线但无日期（`| 类别 | 描述`）。 ### 示例 ``` 15-01-2024 09:23 | Initial Access | CVE-2023-46604 exploited on ActiveMQ 15-01-2024 09:31 | Execution | Encoded PowerShell command via mshta.exe 15-01-2024 10:45 | Lateral Movement | WMI to secondary DC 15-01-2024 11:02 | Credential Access | LSASS dump via ProcDump 15-01-2024 11:18 | Persistence | Scheduled task created 15-01-2024 13:30 | C2 | Cobalt Strike beacon established 16-01-2024 05:44 | Exfiltration | Data uploaded to MEGA.nz ``` ## 控制说明 | 控件 | 功能 | |---|---| | 拖动中央分隔条 | 调整面板大小 | | `⇄` / `⇅` | 切换时间线方向 | | `≡` / `~` | 切换等距 / 时间比例间距 | | `☀` / `☾` | 切换暗色 / 亮色主题 | | `?` | 显示格式参考 | ## 主题 ### Dark — Hinterlands 基于 [omarchy-hinterlands-theme](https://github.com/OldJobobo/omarchy-hinterlands-theme)。单色灰度调色板，无强调色。 ### Light — Bliss 基于 [omarchy-bliss-theme](https://github.com/fikertag/omarchy-bliss-theme)。暖灰色搭配青色强调色（`#218080`）。 ## 技术栈 | 组件 | 技术 | |---|---| | 渲染 | 原生 JavaScript 生成的 SVG | | 图标 | Lucide（内联 SVG，MIT 协议）| | 布局 | CSS Flexbox | | 字体 | 通过 Google Fonts 加载的 [Hack](https://sourcefoundry.org/hack/) | | 持久化 | `localStorage` | | 依赖 | 无——无框架、无打包器、无后端 | 整个应用程序仅为一个 `index.html` 文件。 ## 项目结构 ``` index.html # Full application preview.html # Theme/palette sandbox data/ sample.json # Reference incident data (SolarWinds SUNBURST) ``` ## 部署 直接在浏览器中打开 `index.html`，或通过 GitHub Pages 发布。无需构建步骤或服务器配置。

标签：Cloudflare, HTML/JS, Incident Timeline, MITRE ATT&CK, 二进制发布, 后端开发, 多模态安全, 安全运营, 开源工具, 扫描框架, 数字取证, 数据可视化, 时间线可视化, 纯前端, 自动化脚本