FratresMedAI/BreachMark

## 概览 | | | |---|---| | **问题** | 安全培训通常是静态的——清单和幻灯片无法展示 *压力下的权衡*。 | | **解决方案** | 一个高端的网络安全运营中心教学模拟器，其中每个控制措施都包含 MITRE/NIST 学习背景。 | | **受众** | 招聘人员、招聘经理以及希望获得 **两分钟** 交互式技能证明的蓝队学习者。 | | **状态** | v1.3 — A轮融资视觉重置，新拟态玻璃态UI，一个精炼的场景（*周一晨间钓鱼*），完整的游戏循环，可分享的成绩卡。 | ## 为何存在此项目（作品集叙述） 我构建 **BreachMark** 是为了展示那些无法在简历列表项中体现的技能： - **防御思维** — 当无法实施所有控制措施时进行优先级排序 - **系统设计** — 模拟引擎与UI解耦，支持可测试、确定性重放 - **产品意识** — 招聘人员可在两分钟内从README -> 在线演示 -> 成绩卡 此仓库旨在**置顶在GitHub**，并作为"不言而喻"的项目链接到简历或LinkedIn。 ## 功能特点 | 功能 | 招聘人员信号 | 实现细节 | |---------|------------------|----------------| | **信用预算** | 压力下的优先级排序 | 重置凭据(4cr)、阻止IOC(4cr)、日志记录(3cr)、撤销会话(5cr) | | **爆炸半径图** | 系统思维 | React Flow拓扑展示入侵级别、双网关入口、主动入侵高亮、点击目标控制 | | **攻击时间线** | 事件排序 | 分段时间轨道、键盘快捷键（`空格` / `→` / `F`）、从T+0开始的确定性重放 | | **成绩卡** | 可分享的结果 | 动画字母等级、**A**级时的彩纸效果、LinkedIn准备的摘要文案 | | **安全演示数据** | 负责任的安全工具 | 仅使用虚构场景数据；无扫描，无真实遥测数据 | ## 你将学到 - 钓鱼攻击、令牌重放、横向移动、数据收集和数据外泄如何对应到MITRE ATT&CK。 - NIST检测和响应功能如何在实用的SOC决策中体现。 - 为什么爆炸半径比简单计数被入侵主机更重要。 - 遏制措施如何权衡速度、中断和数据保护。 - 事后复盘如何将一次模拟运行转化为可重复的安全课程。 ## 快速入门（招聘人员路径） 1. 打开 **[在线演示](https://breachmark.vercel.app)** （无需安装）。 2. 在网络SOC指挥中心内，点击 **启动模拟器** -> **开始事件响应**。 3. 在 **T+30** 之前尝试 **阻止IOC**，如果VPN路径仍在活动，则在 **T+45** 之前 **撤销会话**。 4. 擦除发光的时间线 -> **完成** -> **复制LinkedIn摘要**。 **探索目标：** 当你覆盖两个入侵路径时，DC保持清洁且数据外泄量为 **0** —— 擦除时间线查看原因。 ## 截图

_{README截图捕获自运行的BreachMark UI，并保存在 public/screenshots/ 目录中。要了解真实的交互模型，请使用 在线演示。}

## 技术栈 | 层 | 技术 | 角色 | |-------|------------|------| | 框架 | Next.js 16 (App Router) | 支持SSR的壳层，Vercel部署 | | 语言 | TypeScript (严格模式) | 端到端类型安全 | | UI | shadcn/ui + Tailwind CSS v4 | 无障碍组件，深色"SOC雷达"主题 | | 图表 | `@xyflow/react` | 交互式入侵拓扑 | | 动效 | Framer Motion | 落地页和成绩卡过渡动画 | | 状态管理 | Zustand | 游戏阶段、控制措施、重放同步 | | 测试 | Vitest | 模拟引擎单元测试 | | CI | GitHub Actions | 每次推送时执行 `test` · `lint` · `build` | ## 架构 ``` flowchart LR subgraph ui [React_UI] Graph[NetworkGraph] Timeline[AttackTimeline] Shop[ControlShop] end subgraph core [Simulation_Core] JSON[Scenario_JSON] Engine[replayToTime] end JSON --> Engine Engine --> Graph Engine --> Timeline Shop --> Engine ``` ``` src/ ├── lib/simulation/ # Pure TS engine (no React) — Vitest covered ├── data/scenarios/ # Attack timelines + MITRE-style events ├── components/game/ # Graph, timeline, controls, scorecard └── store/ # Zustand game state ``` 设计细节：[SCENARIO_DESIGN.md](SCENARIO_DESIGN.md) ## 本地开发 ``` git clone https://github.com/FratresMedAI/BreachMark.git cd BreachMark npm install npm run dev ``` | 命令 | 描述 | |---------|-------------| | `npm run dev` | 在 http://localhost:3000 启动开发服务器 | | `npm test` | 运行模拟引擎测试 | | `npm run lint` | ESLint检查 | | `npm run build` | 生产环境构建 | ## 我的心得 - **可达性很重要** — 事件不能从未被入侵的主机上触发；没有这条规则，防御措施会显得毫无意义。 - **确定性重放** — 擦除时间线只有在状态从T+0开始使用相同输入重新计算时才有效。 - **招聘人员需要速度** — 当目标是建立第一印象时，交互性胜过文档说明。 ## 部署你自己的实例 [](https://vercel.com/new/clone?repository-url=https://github.com/FratresMedAI/BreachMark&project-name=breach-mark&repository-name=BreachMark) 将 `NEXT_PUBLIC_SITE_URL` 设置为你的部署URL，以确保Open Graph链接正确。 ## 作者 **[Kyle Bean](https://www.linkedin.com/in/kyle-bean-fratresxai/)** — 交互式安全工具和全栈作品集项目。 | | | |---|---| | LinkedIn | [linkedin.com/in/kyle-bean-fratresxai](https://www.linkedin.com/in/kyle-bean-fratresxai/) | | GitHub | [@FratresMedAI](https://github.com/FratresMedAI) | | 仓库 | [FratresMedAI/BreachMark](https://github.com/FratresMedAI/BreachMark) | 如果此项目对你的简历或面试循环有帮助，请考虑 **为该仓库点星** — 这有助于提高在GitHub上的可见性。 ## 许可证 [MIT](LICENSE) — 仅使用虚构场景数据；不扫描任何真实系统。

标签：Cloudflare, Framer Motion, MITRE ATT&CK, NIST, OSV, React Flow, SOC培训, Tailwind CSS, TypeScript, Vercel, Vitest, 事件模拟, 作品集, 信用预算控制, 安全插件, 实时网络图, 招聘展示, 教学, 确定性重播, 网络安全, 自动化攻击, 隐私保护