gjoncay/cyber-planning-web-app

# CyberSandBox — OAKOC 网络规划工具 一个基于 OAKOC 的网络威胁情报**规划与建模**平台。它将 美国陆军的战场情报准备概念（**OAKOC** / **IPOE**）应用于 网络防御：分析师将自己的网络映射为防御地形，通过实时的 漏洞数据对其进行充实，并以双视角威胁简报的形式展示结果。 它是 **MITRE Diamond Dashboard**（威胁行为者*情报浏览器*）的 作战规划伴侣。两者共享 **Chinook Cyber** 设计系统， 因此它们被视为同一个产品系列——请参阅[设计](#design--family-resemblance)。 ## 功能特性 - **纵深防御地形。** 画布是您网络的横截面，被渲染为 五个堆叠的 OAKOC 层——对手从外围 (*Avenues of Approach*) 向 *Key Terrain*（核心资产）下探，途中会穿过您的 *Observation*（遥测）、*Obstacles*（防御）以及任何 *Cover & Concealment* （规避）通道。层级顺序代表了防御深度。 - **双视角简报。** 单个切换开关即可在整个视图之间切换： - **战术视角** — 技术指标：CVE、IP、KEV 利用状态。 - **战略视角** — 决策者视图：FAIR-lite 财务风险敞口和 EPSS 可能性。 - **实时充实。** 将 CVE 分配给某个地形元素，它将通过服务端代理路由 与 CISA KEV 目录和 FIRST EPSS 评分进行核对。 - **滚动叙事。** 简报叙述是根据模型自动生成的；点击 正文中的某个地形元素，画布视角会平滑过渡至该节点。 ## 技术栈 Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS · Zustand (持久化) · React Flow · React Markdown · lucide-react。 ## 开发 ``` npm install npm run dev # http://localhost:8096 npm run build # production build ``` ## 设计与家族相似性 样式采用可移植的 **Chinook Cyber** 系统（`DESIGN_SYSTEM.md`）：暖沙色/悬浮石板灰 表面，松绿 + 棕褐色点缀，正文使用 Inter 字体，机器标识符使用 JetBrains Mono 字体， 细线条优于厚重的边框，通过单个 `data-theme` 属性实现亮色/暗色模式。所有颜色均为 CSS 变量——绝不硬编码十六进制值。 OAKOC 层级调色板特意复用了仪表板 ATT&CK / D3FEND 调色板中的色调，使得两个应用程序共享一套颜色*词汇表*： | 层级 | 含义 | 颜色 | |------|---------|-------| | Observation | 我们的传感器 / 遥测 | detect-blue | | Avenues of Approach | 对手的入侵路径 | brand tan | | Obstacles | 我们的防御屏障 | harden-teal | | Key Terrain | 核心资产 | brand pine | | Cover & Concealment | 对手的规避手段 | stealth-purple | ## ATT&CK 数据与 MITRE Diamond Dashboard 这两个应用程序共享相同的 ATT&CK 源数据。本应用程序从仪表板处理过的 STIX bundle 中 派生出小型的、可查询的 JSON （组织、技术、组织→技术映射）： ``` npm run sync:attack # reads ../mitre-diamond-dashboard/public/data/attack.json # writes src/data/attack/*.json (committed, so the app is standalone) ``` 这为两个功能提供了支持： - 元素表单中的**技术自动补全**。 - **从 ATT&CK 导入** — 选择一个真实的威胁组织，提取其 TTP，并自动将它们映射到 OAKOC 层级中（按 ATT&CK 战术分类）。每个战术对应一个元素；防御层级仍由您掌控。 这两个应用程序之间更深度的链接已在 `FUTURE_REQUIREMENTS.md` 中进行了规划。

标签：React Flow, 可视化建模, 安全态势感知, 网络威胁情报, 网络安全, 自动化攻击, 隐私保护