59pixels/ThreatSphere-Live

# 🛡️ Cyber Overwatch — 实时 DDoS 攻击可视化 ## 目录 - [概述](#overview) - [核心功能](#key-features) - [架构](#architecture) - [技术栈](#tech-stack) - [项目结构](#project-structure) - [前置条件](#prerequisites) - [安装与设置](#installation--setup) - [使用说明](#usage) - [工作原理](#how-it-works) - [未来规划](#future-scope) - [许可证](#license) ## 概述 **Cyber Overwatch** 是一个全栈网络安全仪表盘，能够以 3D 地球仪的形式实时可视化全球的 DDoS 攻击流量。系统从 [AlienVault OTX](https://otx.alienvault.com/) 平台获取实时威胁情报源，并将攻击向量——包括来源、目标、类型和强度——映射到交互式的 WebGL 地球仪上。 本项目是作为**毕业设计项目**开发的，旨在展示对以下方面的实际理解： - 实时数据流架构 - 威胁情报源集成与处理 - 浏览器中的 3D 数据可视化 - 客户端与服务端解耦的全栈应用设计 ## 核心功能 | 功能 | 描述 | |---|---| | **3D 地球仪可视化** | 使用 `react-globe.gl` 和 Three.js 渲染的交互式、自动旋转的地球，带有城市夜景纹理、地形起伏和大气辉光效果。 | | **实时威胁情报** | 每 60 秒轮询一次 AlienVault OTX Search API，获取最新的 DDoS 相关 pulse 特征码，并将其映射到地理坐标。 | | **实时流传输** | Socket.IO 将攻击事件从后端实时推送到所有已连接的客户端——前端无需轮询。 | | **双数据模式** | 通过一个 UI 开关，在**真实数据**（OTX 实时数据流）和**模拟数据**（程序生成的攻击模式）之间切换。 | | **攻击弧线动画** | 带有虚线效果的动画弧线会描绘出从攻击者源点到目标终点的路径，并根据攻击特征码进行颜色编码。 | | **冲击波环与信标** | 目标位置的脉冲同心圆和点状信标表示活跃的攻击区域及其强度。 | | **实时威胁日志** | 一个滚动的实时信息面板，显示最近的攻击记录，包含时间戳、类型和地理路由。 | | **故障转移与弹性** | 当 OTX API 无法访问或返回错误时，具备自动重连逻辑及可见的倒计时器。 | | **仪表盘统计** | 实时计数器，显示检测到的总威胁数和峰值攻击强度。 | ## 架构 ``` ┌─────────────────────────────────────────────────────────┐ │ CLIENT (Browser) │ │ │ │ Next.js 16 App ──► React 19 ──► react-globe.gl │ │ │ (Three.js) │ │ │ Socket.IO Client │ │ └──────────── ▲ ──────────────────────────────────┤ │ │ WebSocket (port 3001) │ ├─────────────────────┼───────────────────────────────────┤ │ │ │ │ SERVER (Node.js) │ │ │ │ Socket.IO Server ◄─── Attack Emitter Loop │ │ │ ▲ │ │ │ │ │ │ │ Attack Buffer │ │ │ ▲ │ │ │ │ │ │ │ ┌──────────┴──────────┐ │ │ │ │ OTX API Poller │ │ │ │ │ (60s interval) │ │ │ │ └──────────┬──────────┘ │ │ │ │ HTTPS │ │ │ ▼ │ │ │ AlienVault OTX API │ │ │ (otx.alienvault.com) │ │ │ │ │ └─── Simulation Engine (fallback) │ └─────────────────────────────────────────────────────────┘ ``` ## 技术栈 ### 前端 | 技术 | 用途 | |---|---| | [Next.js 16](https://nextjs.org/) | React 框架，支持 App Router、SSR 和优化的构建 | | [React 19](https://react.dev/) | 基于 component 的 UI，支持 hooks 和客户端状态管理 | | [react-globe.gl](https://github.com/vasturiano/react-globe.gl) | 基于 Three.js 构建的声明式 3D 地球仪 component | | [Three.js](https://threejs.org/) | 驱动地球仪的底层 WebGL 渲染引擎 | | [Socket.IO Client](https://socket.io/) | 基于事件的实时双向通信 | | [Lucide React](https://lucide.dev/) | UI 元素的图标库 | | [Tailwind CSS 4](https://tailwindcss.com/) | 实用优先的 CSS 框架，用于快速排版 | | [TypeScript 5](https://www.typescriptlang.org/) | 为整个前端提供静态类型检查 | ### 后端 | 技术 | 用途 | |---|---| | [Node.js](https://nodejs.org/) | 用于服务器进程的 JavaScript runtime | | [Socket.IO](https://socket.io/) | 用于实时事件广播的 WebSocket 服务器 | | [Axios](https://axios-http.com/) | 用于 AlienVault OTX API 请求的 HTTP 客户端 | | [geoip-lite](https://github.com/bluesmoon/node-geoip) | 轻量级的 IP 到地理位置查询 | ### 外部 API | 服务 | 用途 | |---|---| | [AlienVault OTX](https://otx.alienvault.com/) | 开放威胁交换平台——提供实时 DDoS pulse 特征码和威胁情报 | ## 项目结构 ``` ddosAttackMap/ ├── public/ # Static assets (SVGs, favicons) ├── server/ │ └── index.js # Backend — Socket.IO server, OTX poller, simulation engine ├── src/ │ ├── app/ │ │ ├── layout.tsx # Root layout with metadata and font configuration │ │ ├── page.tsx # Main dashboard page — stats, feed, controls, globe │ │ ├── globals.css # Global stylesheet │ │ └── favicon.ico │ └── components/ │ └── GlobeViz.tsx # 3D globe visualisation component (arcs, rings, points) ├── next.config.ts # Next.js configuration ├── tsconfig.json # TypeScript compiler options ├── tailwind.config.* # Tailwind CSS configuration ├── package.json # Dependencies and scripts └── README.md ``` ## 前置条件 请确保您的系统已安装以下软件： - **Node.js** ≥ 18.x — [下载](https://nodejs.org/) - **npm** ≥ 9.x（随 Node.js 一起提供） - 支持 WebGL 的现代网络浏览器（Chrome、Firefox、Edge） ## 安装与设置 ### 1. 克隆仓库 ``` git clone https://github.com//ddosAttackMap.git cd ddosAttackMap ``` ### 2. 安装依赖 ``` npm install ``` ### 3. 配置 OTX API Key *（可选）* 应用程序需要 AlienVault OTX API Key 才能获取实时威胁数据。如果没有，模拟模式仍然可用。 1. 在 [AlienVault OTX](https://otx.alienvault.com/) 创建一个免费账号 2. 导航至 **Settings → API Keys** 并复制您的 Key 3. 在项目根目录创建一个 `.env` 文件： ``` cp .env.example .env ``` 4. 将您的 Key 粘贴到 `.env` 中： ``` OTX_API_KEY=your_api_key_here ``` ### 4. 启动后端服务器 ``` node server/index.js ``` Socket.IO 服务器将在 **端口 3001** 启动。您应该会看到： ``` Command Center Hub (Server) running on port 3001 📡 Polling AlienVault OTX for DDoS signals... ``` ### 5. 启动前端开发服务器 在**另一个单独的终端**中： ``` npm run dev ``` Next.js 开发服务器将在 **端口 3000** 启动。 ### 6. 打开仪表盘 在浏览器中导航至 **[http://localhost:3000](http://localhost:3000)**。 ## 使用说明 ### 切换数据模式 使用仪表盘**右上角**的切换开关： | 模式 | 行为 | |---|---| | **模拟模式** *（默认）* | 以高频率生成全球主要科技中心之间的随机攻击事件。适合演示和测试。 | | **真实数据模式** | 播放源自 AlienVault OTX 实时 DDoS pulse 特征码的攻击事件。事件以可控的速率播放，以保持可读性。 | ### 读取仪表盘 - **左侧面板** — 汇总统计数据：检测到的总威胁数和峰值强度 - **右下角日志** — 最近攻击事件的滚动日志，包含时间戳、类型、来源和目标 - **右下角图例** — 颜色编码的攻击特征码说明 - **右上角状态** — 连接状态指示器及当前时间戳 - **地球仪** — 动态弧线（攻击路径）、脉冲圆环（冲击区域）和六边形密度热力图（源点集中度） ### 跟踪的攻击类型 | 特征码 | 颜色 | |---|---| | UDP Flood | 🔴 红色 | | SYN Flood | 🔵 青色 | | SQL Injection | 🟡 黄色 | | Malware Beacon | 🟣 紫红色 | | Brute Force | 🟢 绿色 | ## 工作原理 ### 数据流水线 1. **获取** — 后端每 60 秒轮询一次 AlienVault OTX Search API，查询最新带有 DDoS 标签的威胁 pulse。 2. **充实** — 解析每个 pulse 的攻击类型指标，并使用一组已知的全球科技中心位置，将其映射到地理来源/目标坐标。 3. **缓冲** — 充实后的攻击事件会在内存缓冲区中排队，以控制发送速率并防止 UI 过载。 4. **流传输** — Socket.IO 发射循环将事件出队并广播给所有已连接的客户端。真实事件以 1.5 秒的间隔发送；模拟事件以 300 毫秒的间隔发送。 5. **渲染** — React 客户端通过 Socket.IO 接收事件，每 500 毫秒进行一次批处理，并用新的弧线、圆环和点状标记更新地球仪可视化。 ### 故障转移策略 - 如果 OTX API 返回错误（例如：无效的 Key、速率限制、网络故障），服务器将发送 `status: "error"` 的 `api_status` 事件。 - 前端会显示一个**倒计时器**，指示下一次自动重连尝试的时间。 - 在模拟模式下，系统将继续不间断地生成合成流量。 ## 未来规划 - [ ] **IP 地理定位** — 使用 `geoip-lite` 模块从 OTX 指标中解析真实 IP 地址，以实现精确的来源映射 - [ ] **历史回放** — 将攻击事件存储在数据库中，并启用基于时间轴的回放功能 - [ ] **攻击分析** — 添加图表和图形，展示随时间变化的攻击频率、类型分布和地理热力图 - [ ] **用户身份验证** — 通过登录和基于角色的访问控制保护仪表盘安全 - [ ] **警报系统** — 当攻击强度超过可配置的阈值时，发送电子邮件/Slack 通知 - [ ] **多源情报** — 集成额外的威胁情报提供商（AbuseIPDB、Shodan、GreyNoise） - [ ] **Docker 部署** — 将全栈容器化，实现一键部署

_{用 ☕ 和对网络安全的极度敏感构建而成。}

标签：DDoS监控, MITM代理, ThreeJS, WebSockets, 威胁情报, 开发者工具, 自动化攻击, 配置错误