CypherAi-hub/soc-monitor

# SOC Monitor — 网络威胁控制台  [](#verification) [](#) [](#) [](docs/SAFETY_MODEL.md) [](docs/DEMO_60S.md) **快速链接:** [60秒演示](docs/DEMO_60S.md) · [案例研究](docs/CASE_STUDY.md) · [部署](docs/DEPLOYMENT.md) · [安全模型](docs/SAFETY_MODEL.md) ## 截图  *事件 / 告警 / 数据包 / 流的十二个指标卡片，以及实时的“Top 可疑流”钻取面板。*  *带有净化载荷预览的聊天式流重建，以及当会话内检测阈值被触发时生成的合成系统消息。*  *每条检测规则映射到一个或多个 ATT&CK 技术 (T1046, T1110, T1071.004, T1568.002, T1041, T1071, T1573, T1571, T1595)，并提供指向 attack.mitre.org 的点击链接。*  *告警证据链、MITRE 技术、数据包证据深度链接，以及持久保存在 `localStorage` 中的单告警分析师备注。*  *离线导入 — 粘贴、拖放或上传 JSON、Zeek `conn.log` 或 Suricata EVE JSON。故意不支持 PCAP。*  *可拖动的时间线重播 — 每个表面（仪表盘、告警、数据包、流）都会重新过滤为“此时可见的内容”。* ## 为什么做这个项目 大多数“网络安全的健身追踪器”级别的项目仅仅停留在静态仪表盘层面。本项目深入了两层： - **真实的检测 pipeline。** 基于种子事件流的七条确定性规则，具有在重新评估后依然保留的稳定告警 ID，以及可让分析师分类决策得以持久化的状态覆盖模式。 - **真实的调查界面。** Wireshark 风格的三窗格浏览器，配备手写的显示过滤语言（无 `eval`）、流聚合、Follow-Stream 交互记录、离线 Zeek / Suricata 导入、MITRE ATT&CK 映射，以及单告警 / 单流案例备注。 - **生产级的工程实践。** TypeScript strict 模式，126个单元和组件测试，ESLint 零警告，代码分割路由（初始 bundle 20 KB gzip），响应式布局，无障碍标记，确定性的 mock 数据，以确保演示不会出现偏差。 本项目故意设计为**仅限防御** —— 没有实时抓包，没有扫描，没有 `libpcap`，也没有任何攻击性代码。一切都是模拟的、从离线样本导入的，或呈现为净化的元数据。参见 [`docs/SAFETY_MODEL.md`](docs/SAFETY_MODEL.md)。 ## 包含什么 ### SOC 仪表盘 - 跨越事件、告警、数据包、流和主机的十二个指标卡片。 - 事件随时间变化面积图、按严重程度划分的告警条形图、协议分布饼图、Top 来源 IP / 目标端口。 - 自动生成的分析师摘要（基于种子生成，具有确定性）。 - Top 可疑流面板 —— 深入钻取到流详情页。 ### 告警、事件、主机、检测规则 - 对所有内容进行过滤 / 搜索 / 排序。点击任意告警可查看完整证据、建议操作、MITRE 技术映射、数据包证据深度链接以及分析师备注字段。 - 确认 / 解决 / 标记为误报 / 重新打开 —— 状态保存在 `localStorage` 中。 - 主机页面将每一行链接到该主机 IP 上的数据包浏览器过滤器。 - 检测规则页面显示阈值、MITRE 覆盖策略，以及每个规则的 ATT&CK 技术，并提供指向公共 attack.mitre.org 页面的点击链接。 ### 数据包浏览器 (Wireshark 启发, `/packets`) - 三窗格分析师控制台：数据包列表 ↦ 协议树 ↦ 十六进制/ASCII 查看器 + 关联面板。 - **显示过滤语言**：`protocol == DNS and risk >= 70`, `ip.addr == 10.0.0.20`, `tcp.flags.syn == true`, `payload contains login`, `dns.qry.name contains suspicious`, `direction == external_to_internal`，支持 `and` / `or` 和自由文本回退。 - 内置 + 用户保存的过滤器（仅可疑、关联告警、DNS 查询、SYN 扫描候选、可能的数据外泄 等）。 - 点击 `Follow Stream →` 可跳转到流详情页面。 - 将过滤后的数据包导出为 JSON 或 CSV。 ### 流和 Follow Stream (`/flows`, `/flows/:id`) - 确定性的会话聚合：TCP 会话的双向共享同一个流 ID。 - 聊天式 **Follow Stream** 交互记录，显示客户端/服务器方向、净化的 120 字符载荷预览、可疑消息高亮、复制到剪贴板、下载为文本。当会话内触发检测阈值时，末尾会出现系统消息。 - 每 10 秒一个存储桶的数据包时间线。 - 每个流的分析师备注。 ### 时间线重播模式 - 点击顶部栏中的“⏵ 进入重播模式”。滑块会在模拟的 30 分钟窗口中擦播放头。每个下游表面（仪表盘卡片、告警、数据包、流）都会重新过滤为“此时可见的内容”。播放按钮以 20 倍速推进。 ### 离线导入 (`/ingest`) - 粘贴 / 拖放 / 上传 **JSON 数据包**、**Zeek conn.log**（制表符分隔）或 **Suricata EVE JSON**。文件大小上限 5 MB，批量记录上限 500 条，逐条验证（错误的 IP / 端口将被警告并丢弃，批量处理仍会成功）。 - 一键加载演示场景。 - 导入的数据包保存在 `localStorage` 中，并合并到常规调查界面中。 - **故意不支持 PCAP** —— 参见安全模型。 ## 技术栈 | 层级 | 选择 | | ---------------- | --------------------------------------------- | | UI | React 18 + TypeScript (strict) | | 样式 | Tailwind CSS v4 (CSS-first config) | | 路由 | React Router v6, route-level `React.lazy` | | 图表 | Recharts (vendor-chunked, lazy) | | 测试 | Vitest + @testing-library/react (126 tests) | | 代码检查 | ESLint v9 flat config | | 构建 | Vite | ## 快速开始 ``` cd ~/soc-monitor npm install npm run dev # http://localhost:5173 ``` ### 所有检查 ``` npm run typecheck # tsc --noEmit npm test # 126 tests npm run lint # 0 errors, 0 warnings npm run build # dist/ — initial bundle 20 KB gzip ``` ### 部署 推送到 GitHub，然后在 Vercel 或 Netlify 上一键部署 —— SPA 回退配置已提交在 `vercel.json` 和 `netlify.toml` 中。完整说明参见 [`docs/DEPLOYMENT.md`](docs/DEPLOYMENT.md)。 ### 捕获作品集截图 ``` npm run dev # in one terminal npm run screenshots # in another — writes docs/img/*.png at 1440×900 @2x ``` ## 架构概览 ``` useSocState → events → detection rules → alerts ↓ ↓ packets (deterministic mock) status overlay (localStorage) ↓ ↓ flows → follow-stream transcript ↓ dashboard / explorer / alert drawer / flow page ``` - **纯逻辑** (`src/lib/`) 进行了单元测试且与 React 无关。检测规则、数据包生成、过滤解析器、流聚合、导入解析器、指标、MITRE 映射、备注、保存的过滤器和重播窗口都位于此处。 - **UI** 消费 `useSocState` —— 唯一的真相来源。 - **状态覆盖**：告警状态、导入的数据包和分析师的备注保存在 `localStorage` 中，以便分类决策在重新加载后仍然保留。 数据流图参见 [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md)。 ## 深入文档 | 文档 | 包含内容 | | --------------------------------------------------------- | ----------------------------------------------------------------------------------- | | [`ARCHITECTURE.md`](docs/ARCHITECTURE.md) | 数据流图、文件夹映射、确定性设计原理 | | [`DETECTION_RULES.md`](docs/DETECTION_RULES.md) | 每条规则的触发器、阈值、严重性、建议操作 | | [`PACKET_EXPLORER.md`](docs/PACKET_EXPLORER.md) | 3窗格布局、过滤语法、十六进制查看器安全性 | | [`FLOW_INVESTIGATION.md`](docs/FLOW_INVESTIGATION.md) | 流聚合、交互记录规则、系统终止符 | | [`IMPORT_FORMATS.md`](docs/IMPORT_FORMATS.md) | JSON / Zeek / Suricata 模式、验证规则 | | [`SAFETY_MODEL.md`](docs/SAFETY_MODEL.md) | 本应用是什么，故意不支持什么，审查者清单 | | [`CASE_STUDY.md`](docs/CASE_STUDY.md) | “我为什么构建这个”的作品集叙事 | | [`DEMO_60S.md`](docs/DEMO_60S.md) | 面向招聘人员屏幕共享的一分钟演示 | | [`DEMO_SCRIPT.md`](docs/DEMO_SCRIPT.md) | 3–5 分钟的技术演示 | | [`DEPLOYMENT.md`](docs/DEPLOYMENT.md) | Vercel / Netlify / Cloudflare / 通用主机说明 | | [`SCREENSHOTS.md`](docs/SCREENSHOTS.md) | 为作品集页面捕获什么内容 | ## 未来工作 - **可选的 Express 后端** 镜像相同的解析器（前端已经为这种替换进行了结构设计）。 - **MITRE ATT&CK Navigator JSON 导出** 规则集的覆盖矩阵。 - **保存的调查** —— 将过滤器 + 备注 + 选定的数据包捆绑到一个命名的案例文件中。 - **可选的安全 WebAssembly PCAP 解析器** 受控于特性标志和安全模型清单。 ## 伦理声明 这是一个作品集 + 教学制品。威胁情报匹配使用了保留的文档 IP 范围和 `.example` TLD，因此这里的内容永远不会被解析或攻击任何东西。任何使用此代码作为真实监控工具基础的人，都必须自己添加实时抓包层 —— 并且在操作前请先阅读 [`docs/SAFETY_MODEL.md`](docs/SAFETY_MODEL.md)。

标签：ATT&CK映射, Cloudflare, EVE JSON, Follow Stream, IP 地址批量处理, MITRE ATT&CK, Rootkit, SOC控制台, Suricata, TypeScript, Wireshark风格, Zeek, 严格模式, 会话重构, 前端项目, 告警管理, 威胁监控, 安全事件分析, 安全仪表盘, 安全可视化, 安全插件, 安全案例研究, 安全运营中心, 密码管理, 插件系统, 无侵入式, 时间线回放, 流量回溯, 浏览器端, 现代安全运营, 离线分析, 网络安全, 网络安全实训, 网络映射, 自动化攻击, 规则检测引擎, 轻量级应用, 速率限制处理, 防御模拟, 隐私保护