km23092612-jpg/CyberShield-Cyber-Security-News-Dashboard

# 🛡️ CyberShield — 网络安全新闻仪表盘    ## 🎯 项目概述 CyberShield 是一个**专业级的单页网络安全情报仪表盘**，可聚合实时威胁新闻、可视化攻击分析、流式传输实时安全事件、执行 IP 情报查询，并提供一个交互式的安全知识中心。 它是一个完全自包含的 HTML/CSS/JavaScript 应用程序——无需构建工具，也无需后端。 ## ✨ 功能 ### 1. 📰 新闻聚合器 - 模拟实时网络安全新闻源，带有严重性标签（Critical / High / Medium / Low） - 跨标题、描述和 CVE ID 的全文搜索 - 筛选按钮：All · Critical · High · Medium · Malware · CVE - 带有 CVSS 分数显示的实时 CVE 列表 - 动画威胁类别条形图 - 每 3 秒自动刷新指示器 ### 2. 📊 威胁分析 - **CVSS 严重性分布** — 跨 Critical / High / Medium / Low 的条形图（Chart.js） - **攻击向量** — 显示 Network、Social Engineering、Supply Chain、Physical 的环形图 - **30天威胁时间轴** — 包含威胁与补丁趋势的多系列折线图 - **主要受攻击行业** — 动画条形图（Healthcare、Finance、Government 等） - **活跃 CVE 追踪器** — 包含 CVSS 分数、受影响软件和状态徽章的完整可排序表格 ### 3. ⚡ 实时监控 - **实时事件日志**，每 1.2 秒自动注入模拟安全事件 - 暂停/恢复和清除控制 - 颜色编码的日志类型：`[CRIT]` `[WARN]` `[INFO]` `[OK]` - **实时网络流量图表** — Inbound 与 Blocked 对比，每 3 秒自动更新 - **系统健康面板** — 包含 6 个具有实时状态指示器的安全服务 - **地理位置攻击地图** — 带有每个攻击源动画波纹点的 SVG 世界地图 - 按比例显示攻击量的主要攻击源国家/地区 ### 4. 🔍 IP 与来源情报 - IP/域名查询，带有模拟威胁评分（0-100 风险评分） - 返回：Country、ISP、Organization、IP Type、Open Ports、Last Seen、ASN、Blacklist 状态 - 带有颜色编码风险（LOW → CRITICAL）的威胁等级胶囊 - 近期查询历史面板，支持一键重新扫描 - 黑名单数据库状态（Spamhaus、AbuseIPDB、EmergingThreats、Feodo Tracker 等） - IP 信誉趋势折线图（30天风险演变） ### 5. 📚 知识中心 - **安全词汇表** — 包含 12 个以上关键术语的定义、类别和严重性标签 - 全文词汇表搜索 - **安全框架网格** — MITRE ATT&CK、NIST CSF 2.0、OWASP Top 10、ISO 27001、CIS Controls v8、Zero Trust - **学习资源** — CISA 培训、OWASP 文档、TryHackMe、MITRE ATT&CK 链接 ## 🚀 快速开始 ### 选项 A — 直接打开（无需设置） ``` # Clone the repo git clone https://github.com/YOUR_USERNAME/Cybrexa_04_CyberShield.git cd Cybrexa_04_CyberShield # 在浏览器中打开 open index.html # macOS start index.html # Windows xdg-open index.html # Linux ``` ### 选项 B — 本地运行（推荐用于完整功能测试） ``` # 使用 Python（内置） python3 -m http.server 8080 # 访问 http://localhost:8080 # 使用 Node.js npx serve . # 访问 http://localhost:3000 # 使用 VS Code # 安装 "Live Server" 扩展 → 右键点击 index.html → "Open with Live Server" ``` ## 📁 项目结构 ``` Cybrexa_04_CyberShield/ │ ├── index.html # Complete single-file application ├── README.md # This file └── assets/ # (optional) screenshots for documentation └── preview.png ``` ## 🌐 部署 ### GitHub Pages（免费托管） ``` # 1. Push to GitHub git init git add . git commit -m "feat: initial CyberShield dashboard" git branch -M main git remote add origin https://github.com/YOUR_USERNAME/Cybrexa_04_CyberShield.git git push -u origin main # 2. 进入 repo Settings → Pages # 3. 设置 Source: Deploy from branch → main → / (root) # 4. 你的 live URL: https://YOUR_USERNAME.github.io/Cybrexa_04_CyberShield/ ``` ### Netlify（拖拽上传） 1. 访问 [netlify.com](https://netlify.com) → “Add new site” → “Deploy manually” 2. 将你的项目文件夹拖到上传区域 3. ✅ 30 秒内上线 ### Vercel ``` npx vercel --prod ``` ## 🛠️ 技术栈 | 技术 | 用途 | |---|---| | HTML5 | 语义化结构，单页布局 | | CSS3 | 自定义属性，网格，动画，暗色主题 | | Vanilla JavaScript | DOM 操作，状态管理，数据渲染 | | Chart.js 4.4.1 | 条形图、折线图、环形图和面积图 | | Google Fonts（Inter + JetBrains Mono） | 字体排版系统 | | SVG | 世界地图可视化，盾牌 logo | 除 Chart.js 和 Google Fonts（均通过 CDN 加载）外**零依赖**。 ## 🎨 设计系统 | 标记 | 值 | |---|---| | 主要背景 | `#0a0e1a` | | 卡片表面 | `#111827` | | 强调色（终端绿） | `#00ffb4` | | 强调色（赛博蓝） | `#00c8ff` | | 危急红 | `#ff4d4d` | | 警告橙 | `#ff8c42` | | 标题字体 | JetBrains Mono | | 正文字体 | Inter | ## 📋 交付物清单 - [x] `index.html` — 完整、自包含的仪表盘 - [x] 通过 GitHub Pages / Netlify 实时部署 - [x] 包含设置、架构和部署步骤的 README.md - [x] 实现了所有 5 个必需模块 - [x] 实时监控面板每 3 秒间隔自动刷新 - [x] 响应式布局（适配移动端的网格） - [x] Chart.js 可视化分析 - [x] IP 情报查询模块 - [x] 包含词汇表的网络安全知识中心 ## 📸 截图 | 面板 | 预览 | |---|---| | 新闻源 | `assets/news.png` | | 威胁分析 | `assets/analytics.png` | | 实时监控 | `assets/monitor.png` | | IP 情报 | `assets/ip.png` | | 知识中心 | `assets/knowledge.png` | ## 🔧 自定义 ### 添加真实新闻数据 将 `