Ayibongwe02/Sentinel-Vanguard-Cybersecurity-Incident-Threat-Intelligence-Dashboard
GitHub: Ayibongwe02/Sentinel-Vanguard-Cybersecurity-Incident-Threat-Intelligence-Dashboard
一个结合机器学习后端 pipeline 与实时原生 JS 前端的网络安全事件与威胁情报仪表板平台。
Stars: 1 | Forks: 0
# Sentinel Vanguard — 网络安全事件与威胁情报仪表板
一个生产级、全栈的网络安全情报平台，结合了实时分析的前端和机器学习后端数据 pipeline。基于模块化的原生 JS 架构和斯堪的纳维亚极简设计系统构建。
## 目录
- [概述](#overview)
- [架构](#architecture)
- [项目结构](#project-structure)
- [后端 Pipeline](#backend-pipeline)
- [前端模块](#frontend-modules)
- [设计系统](#design-system)
- [数据 Schema](#data-schema)
- [快速开始](#getting-started)
- [部署](#deployment)
- [配置](#configuration)
- [技术栈](#tech-stack)
## 概述
Sentinel Vanguard 摄取原始网络安全日志，运行两个独立的机器学习 pipeline —— 一个**基于流量的时间序列预测**和一个**无监督异常检测器** —— 然后通过一个具有四个专门分析视图且实时自动刷新的仪表板展示结果。
### 核心能力
- **安全态势指数 (SPI)** — 一个综合了异常率、严重事件密度和缓解负载得出的 0-100 分数
- **流量预测引擎** — 使用 Meta Prophet（或线性回退）预测网络数据包量，提供未来 21 天的 90% 置信区间
- **AI 行为威胁狩猎** — 基于多变量服务器遥测数据（payload 大小、响应延迟、认证失败频率）的 Isolation Forest 无监督异常检测
- **自动威胁分类** — 基于规则的分类法，将 Isolation Forest 检测出的异常点映射到具名攻击模式（如数据泄露、撞库等）
- **60 秒静默轮询** — 前端每 60 秒获取一次新数据，无需重新加载页面或丢失用户状态
## 架构
```
┌──────────────────────────────────────────────────────────┐
│ RAW DATA LAYER │
│ data/raw/threat_forecast.csv (volumetric history) │
│ data/raw/live_incidents.csv (network event log) │
└───────────────────────┬──────────────────────────────────┘
│ scripts/process_cyber_data.py
▼
┌──────────────────────────────────────────────────────────┐
│ ML PIPELINE (Python) │
│ A. Prophet → volumetric forecast + RMSE/MAPE metrics │
│ B. IsoForest → anomaly flags + threat classification │
│ C. Serializer → nested JSON aggregation │
└───────────────────────┬──────────────────────────────────┘
│ writes
▼
data/cyber_dashboard.json
│ fetch() every 60s
▼
┌──────────────────────────────────────────────────────────┐
│ FRONTEND (Vanilla JS ES Modules) │
│ app.js → router + boot + poll loop │
│ data.js → DataStore singleton + filtering hooks │
│ charts.js → Chart.js 4.4 theme factory │
│ overview.js endpoints.js predictive.js hunting.js │
└──────────────────────────────────────────────────────────┘
```
## 项目结构
```
sentinel-vanguard/
├── index.html # Semantic shell, sidebar layout, loading overlay
│
├── data/
│ ├── raw/
│ │ ├── threat_forecast.csv # Historic network volume (ds, y columns for Prophet)
│ │ └── live_incidents.csv # Live 2026 security event log
│ └── cyber_dashboard.json # Pipeline output — consumed by frontend
│
├── src/
│ ├── css/
│ │ └── main.css # Full design system, tokens, typography, utilities
│ └── js/
│ ├── app.js # Router, bootloader, 60s silent polling loop
│ ├── data.js # Global DataStore + computed filtering matrix
│ ├── charts.js # Chart.js global theme overrides + factory helpers
│ ├── overview.js # Security posture overview view
│ ├── endpoints.js # Host / asset node deep-dive view
│ ├── predictive.js # Volumetric prediction engine view
│ └── hunting.js # AI behavioral threat hunting view
│
└── scripts/
└── process_cyber_data.py # Python ML pipeline — CSV → cyber_dashboard.json
```
## 后端 Pipeline
该 pipeline 完全位于 `scripts/process_cyber_data.py` 中。只要更新了源 CSV 文件，就可以随时运行它。前端会在下一次 60 秒轮询时自动获取新的 JSON 数据。
```
python scripts/process_cyber_data.py
# 可选 flags：
python scripts/process_cyber_data.py --contamination 0.05 --horizon 30
```
### A. 流量预测引擎 (Meta Prophet)
**输入：** `data/raw/threat_forecast.csv`
必需列：`ds`（日期字符串）、`y`（数值型目标量）。附加列（`source`、`protocol`）会被保留但不会被模型使用。
**流程：**
1. 拆分数据 —— 最后 14 条记录留作评估；其余部分构成训练集。
2. 使用 `multiplicative` 季节性、周季节性、美国公共假期和 0.3 的 `changepoint_prior_scale` 来拟合 `Prophet` 模型。
3. 根据留出的评估块计算 RMSE 和 MAPE。
4. 在完整数据集上重新拟合模型，并生成 `--horizon` 天（默认为 21）的前向时间窗，包含 90% 置信度下的 `yhat`、`yhat_upper` 和 `yhat_lower`。
**回退机制：** 如果未安装 `prophet`，将自动使用 NumPy 线性趋势外推，并在输出指标中标记为 `model: "linear_fallback"`。
**输出字段（位于 `forecast` 键中）：**
```
{
"historical": [{ "ds": "2026-01-01", "y": 12400.0 }, ...],
"forecast": [{ "ds": "2026-03-11", "yhat": 31200, "yhat_upper": 36800, "yhat_lower": 25600 }, ...],
"metrics": {
"rmse": 6418.9,
"mape": 25.53,
"train_records": 55,
"eval_window": 14,
"horizon_days": 21
}
}
```
### B. 无监督行为威胁狩猎 (Isolation Forest)
**输入：** `data/raw/live_incidents.csv`
必需列：`timestamp`、`host`、`payload_size`、`response_latency`、`failed_auths`。
**流程：**
1. 提取三个连续特征列，并使用 `StandardScaler` 进行归一化。
2. 使用 `n_estimators=200`、`contamination`（默认 0.03）和 `random_state=42` 拟合 `IsolationForest`。
3. 预测结果 `-1`（异常）被映射为异常标志 `1`；`1`（正常）映射为 `0`。
4. 每个被标记的行都会通过一个**分类法规则链**（按优先级顺序评估）：
| 规则 | 分类 | 严重程度 |
|---|---|---|
| `payload_size > 500 KB` 且 `latency > 3 000 ms` | 潜在数据外泄丢失 (Data Exfiltration Drop) | CRITICAL |
| `failed_auths > 100` | 撞库高峰 (Credential Spraying Spike) | HIGH |
| `20 < failed_auths ≤ 100` | 暴力破解尝试 (Brute-Force Attempt) | HIGH |
| `payload_size > 200 KB` 且 `latency > 1 000 ms` | 异常批量数据传输 | MEDIUM |
| `latency > 5 000 ms` | 严重延迟高峰 / DoS 指标 | HIGH |
| `payload_size > 50 KB` 且 `failed_auths == 0` | payload 量升高 | LOW |
| _(兜底规则)_ | 多元统计异常值 | MEDIUM |
5. 计算每台主机的摘要：总事件数、异常计数、风险评分、平均延迟、平均 payload、总失败认证次数、每小时时间序列数据，以及最近 10 条原始日志行。
**风险评分公式：**
```
risk_score = min(100, (anomaly_count / total_events × 100) + (avg_failed_auths × 0.4) + min(avg_latency_ms / 100, 20))
```
### C. JSON 序列化
所有处理后的数据帧都会被合并到单个压缩后的 `data/cyber_dashboard.json` 中，其顶级结构如下：
```
{
"_meta": { "generated_at", "pipeline_version", "schema" },
"posture": { "spi", "total_blocked_payloads", "active_mitigations", "anomaly_rate_pct", ... },
"forecast": { "historical", "forecast", "metrics" },
"threat_hunting":{ "events": [...], "summary": {...} },
"endpoints": { "Host-Name": { "risk_score", "time_series", "raw_logs", ... }, ... }
}
```
## 前端模块
### `src/js/data.js` — DataStore 单例
一个在所有视图模块之间共享的内存存储。永远不要在视图代码中独立获取数据 —— 始终从 `data.js` 导入。
```
import { DataStore, fetchDashboard } from './data.js';
// Register a re-render callback
DataStore.onChange(store => { /* re-render */ });
// Filtered threat events respecting current UI state
const events = DataStore.filteredEvents();
// Endpoint list sorted by risk score descending
const hosts = DataStore.endpointList();
```
`state` 对象会跟踪当前视图、活动的 endpoint、狩猎分类过滤器以及狩猎严重程度过滤器。所有这些状态在静默轮询和重新渲染期间都会保留。
### `src/js/app.js` — 路由与轮询
启动流程：
1. 获取 `data/cyber_dashboard.json`（失败时重试一次）
2. 隐藏加载遮罩
3. 绑定导航点击事件
4. 启动 60 秒倒计时
5. 在每次触发时，静默调用 `fetchDashboard()`；成功后，重新渲染活动视图
导航状态会被保留 —— 切换到不同的 endpoint 标签并等待轮询不会重置标签页。
### `src/js/charts.js` — 图表工厂
在导入时将 Cream 色调默认值全局应用于 Chart.js，然后导出命名的工厂函数。务必从这里导入；切勿在视图模块中直接构造 `new Chart()`。
| 工厂 | 图表类型 | 用于 |
|---|---|---|
| `makeTrafficChart` | 多数据集折线图 | 概述 |
| `makeEndpointChart` | 面积折线图 | Endpoints |
| `makeEndpointStatusChart` | 水平条形图 | 概述 |
| `makeForecastChart` | Prophet 区带面积图 | 预测 |
| `makeSPIDonut` | 圆环图 | 概述 |
| `makeAnomalyDonut` | 严重程度圆环图 | 狩猎 |
所有工厂在创建新实例之前都会调用 `destroyChart(canvas)`，从而防止在重新渲染时出现 Chart.js 画布复用错误。
### `src/js/overview.js` — 安全态势概述
- 四个 KPI 卡片：SPI、拦截的 payload 总量、活动的缓解措施、AI 异常率
- 带有颜色编码阈值（鼠尾草绿 → 琥珀色 → 绯红色）的动态强调条
- SPI 圆环图（280° 弧），带有 NOMINAL / DEGRADED / AT RISK 标签
- 基于历史预测数据的 30 天网络流量折线图
- 跨所有 endpoint 的水平风险评分条形图
- 最近的 8 起威胁事件源表
### `src/js/endpoints.js` — 主机 / 资产深度剖析
- 根据 endpoint 键自动生成的标签栏，按风险评分排序
- 带有颜色阈值类的每台主机风险评分条
- 统计网格：总事件数、异常计数、平均延迟、总失败认证次数、平均 payload
- 每小时的 payload 时间序列图表
- 过滤为当前活动主机的异常事件子表
- 带有语法高亮时间戳和异常字段着色的原始日志控制台
### `src/js/predictive.js` — 流量预测引擎
- 完整的 Prophet 预测图表：实线历史折线 + 虚线预测折线 + 阴影 90% 置信区间
- 模型精度指标网格：RMSE、MAPE、训练记录数、评估窗口、预测范围、模型类型
- 21 行前向预测表，包含 yhat、上区间、下区间和区间宽度列
### `src/js/hunting.js` — AI 威胁狩猎套件
- 来自 Isolation Forest 输出的实时摘要统计数据
- 用于分类标签和严重等级的动态过滤器组件栏 —— 两个过滤器可组合使用
- 异常严重程度圆环图（CRITICAL / HIGH / MEDIUM / LOW 分布）
- 包含所有字段的完整异常事件表：ID、时间戳、主机、源 IP、payload、延迟、认证失败次数、分类、严重程度徽章
## 设计系统
在 `src/css/main.css` 中定义为 CSS Custom Properties。
### 色彩调色板
| Token | 值 | 作用 |
|---|---|---|
| `--bg-primary` | `#F9F6F0` | 温暖的奶油色页面背景 |
| `--bg-card` | `#FFFFFF` | 卡片表面 |
| `--bg-sidebar` | `#1A1D20` | 深炭色侧边栏 |
| `--border` | `#EAE5D9` | 柔和的暖灰色边框 |
| `--accent-charcoal` | `#1A1D20` | 主要强调色 |
| `--accent-crimson` | `#D9534F` | 警报，严重级别 |
| `--accent-sage` | `#6E8E75` | 安全/正常状态 |
| `--accent-amber` | `#E29578` | 警告，降级状态 |
### 字体排印
| 字体 | 用途 |
|---|---|
| [Fraunces](https://fonts.google.com/specimen/Fraunces) | KPI 数值、卡片标题、SPI 数字 |
| [DM Mono](https://fonts.google.com/specimen/DM+Mono) | 日志行、时间戳、表格数据、指标值 |
| [Inter](https://fonts.google.com/specimen/Inter) | 导航、正文 UI、标签 |
### 过渡效果
所有交互元素在 `background`、`box-shadow`、`transform` 和 `color` 上使用 `250ms ease-in-out` 过渡效果。卡片在悬停时通过 `--shadow-hover` 浮起。视图切换使用 `fadeIn` 关键帧（透明度 0→1，translateY 6px→0）。
## 数据 Schema
### `data/raw/threat_forecast.csv`
```
ds,y,source,protocol
2026-01-01,12400,external,HTTPS
...
```
`ds` 和 `y` 是必填项（Prophet 格式）。附加列会被模型忽略。
### `data/raw/live_incidents.csv`
```
timestamp,host,ip_src,ip_dst,payload_size,response_latency,failed_auths,protocol,status_code,country,event_type
2026-03-10 00:08:33,DMZ-Gateway,185.234.219.10,10.0.0.1,89200,2100,47,HTTPS,403,RU,BruteForce
...
```
对于 Isolation Forest 特征，`timestamp`、`host`、`payload_size`、`response_latency` 和 `failed_auths` 是必填项。
## 快速开始
### 前置条件
```
# Python backend
pip install pandas scikit-learn numpy
pip install prophet # optional — linear fallback used if absent
# 托管 frontend（任何 static server 均可）
npm install -g serve # or python3 -m http.server
```
### 1. 生成仪表板数据
```
python scripts/process_cyber_data.py
```
参数选项：
| 标志 | 默认值 | 描述 |
|---|---|---|
| `--contamination` | `0.03` | Isolation Forest 的预期异常比例 |
| `--horizon` | `21` | 向前预测的天数 |
### 2. 启动前端服务
```
# 从 project root：
serve . # npx serve
# 或
python3 -m http.server 8080
```
打开 `http://localhost:8080`（如果使用 `serve`，则为 `http://localhost:3000`）。
### 3. 刷新数据
随时重新运行 pipeline 脚本以重新生成 `cyber_dashboard.json`。前端会在 60 秒内自动获取更改。如需立即刷新，请重新加载页面。
## 部署
实时版本部署在 **Base44** 上：[sentinel-vanguard-core.base44.app](https://sentinel-vanguard-core.base44.app/)。
对于任何静态托管提供商（Vercel、Netlify、GitHub Pages、Cloudflare Pages）：
1. 运行 `python scripts/process_cyber_data.py` 生成 `data/cyber_dashboard.json`。
2. 将整个项目根目录部署为静态站点。无需构建步骤。
3. 如果希望 pipeline 自动运行，请将其添加为 CI/CD 配置中的 pre-deploy 钩子：
```
# 示例：GitHub Actions pre-deploy step
- name: Generate dashboard data
run: |
pip install pandas scikit-learn numpy prophet
python scripts/process_cyber_data.py
```
为了持续的实时数据，可以在 cron 定时任务上运行 pipeline 并提交更新的 JSON，或者用从实时数据库读取数据的 API endpoint 替换静态 JSON 文件。
## 配置
所有可调参数都位于各自文件的顶部。
### Pipeline（`scripts/process_cyber_data.py`）
| 参数 | 位置 | 默认值 | 效果 |
|---|---|---|---|
| `contamination` | CLI 标志 | `0.03` | IsoForest 异常比例（调高可标记更多事件） |
| `horizon` | CLI 标志 | `21` | 预测未来天数 |
| `changepoint_prior_scale` | `run_prophet_forecast()` | `0.3` | Prophet 趋势灵活性 |
| `n_estimators` | `run_isolation_forest()` | `200` | IsoForest 树数量（越高 = 越稳定） |
| `interval_width` | `run_prophet_forecast()` | `0.90` | 置信带宽度 (0–1) |
### 前端 (`src/js/app.js`)
| 常量 | 默认值 | 效果 |
|---|---|---|
| 轮询间隔 | `60` 秒 | 修改 `pollCountdown = 60` |
| 数据路径 | `data/cyber_dashboard.json` | 将备用路径传递给 `fetchDashboard()` |
### 分类规则 (`scripts/process_cyber_data.py` → `TAXONOMY_RULES`)
编辑 `TAXONOMY_RULES` 列表以添加、删除或重新排序分类规则。规则按顺序评估；匹配到的第一个规则生效。
## 技术栈
| 层级 | 技术 |
|---|---|
| 前端语言 | 原生 JavaScript (ES Modules，无框架) |
| 图表绘制 | 通过 CDN UMD 引入的 [Chart.js 4.4](https://www.chartjs.org/) |
| 样式 | 纯 CSS Custom Properties |
| 字体 | Google Fonts (Fraunces, DM Mono, Inter) |
| 数据预测 | [Meta Prophet](https://facebook.github.io/prophet/) / NumPy 线性回退 |
| 异常检测 | [scikit-learn IsolationForest](https://scikit-learn.org/stable/modules/generated/sklearn.ensemble.IsolationForest.html) |
| 数据处理 | [pandas](https://pandas.pydata.org/), [NumPy](https://numpy.org/) |
| 部署 | [Base44](https://base44.com/) 静态托管 |
## 许可证
MIT — 详情请参阅 `LICENSE`。
标签：Apex, Vanilla JS, 互联网扫描, 可视化仪表盘, 威胁情报, 安全态势感知, 开发者工具, 机器学习, 网络安全, 逆向工具, 隐私保护