guuly05/cyber-attack-monitoring-dashboard
GitHub: guuly05/cyber-attack-monitoring-dashboard
一个基于Next.js的网络威胁情报仪表盘，用于监控和可视化模拟及实时安全指标，帮助用户进行威胁分析教育。
Stars: 0 | Forks: 0
# 网络攻击监控仪表盘
一个使用 Next.js 构建的、可用于作品集的网络威胁情报仪表盘。它可视化实时风格的安全指标，允许分析师搜索 IP、域名和 CVE，并在一个清晰的操作界面中提供缓解指导。
## 预览
## 技术栈
- **框架：** Next.js App Router
- **UI：** React, TypeScript, Tailwind CSS, Radix UI 原语, lucide-react
- **数据获取：** TanStack Query
- **图表：** Recharts
- **验证与工具：** TypeScript, zod, clsx, tailwind-merge
- **部署：** Vercel
- **包管理器：** pnpm
## 数据源
| 来源 | 当前行为 | 备注 |
| --- | --- | --- |
| URLHaus | 模拟路由数据 | 仪表盘目前生成逼真的模拟指标，用于作品集/演示。 |
| ThreatFox | 模拟路由数据 | 仪表盘目前生成逼真的模拟 IOC，用于作品集/演示。 |
| AbuseIPDB | 配置后可实时调用 API | 需要 `ABUSEIPDB_API_KEY`；缺失时回退到模拟数据。 |
| CIRCL CVE | 实时公共 API | 用于 CVE 详情查询。 |
本项目是一个监控和教育仪表盘。请将模拟指标视为演示数据，而非操作情报。
## 开始使用
### 前置条件
- 推荐使用 Node.js 22 LTS 或更新版本。
- pnpm 10。
如果 pnpm 未全局安装，可使用 npm 调用固定版本：
```
npm exec pnpm@10.0.0 -- install
```
### 安装说明
```
pnpm install
```
创建本地环境文件：
```
cp .env.example .env.local
```
可选添加你的 AbuseIPDB 密钥：
```
ABUSEIPDB_API_KEY=your_abuseipdb_key_here
```
启动开发服务器：
```
pnpm dev
```
打开 [http://localhost:3000](http://localhost:3000)。
## 安全
本仓库包含安全方面的启动工作：
- `next.config.mjs` 中不再忽略 TypeScript 构建错误。
- 配置了全局安全头：
- `Content-Security-Policy`
- `X-Content-Type-Options`
- `X-Frame-Options`
- `Referrer-Policy`
- `Permissions-Policy`
- 外部调查链接使用 `target="_blank"` 并带有 `rel="noopener noreferrer"`。
- 通过 `.gitignore` 排除密钥；真实的 `.env*.local` 文件不应被提交。
- `ABUSEIPDB_API_KEY` 仅保留在服务器端。
- pnpm overrides 固定了 `lodash` 和 `postcss` 的补丁传递版本。
发布更改前运行以下检查：
```
pnpm audit --audit-level moderate
pnpm lint
pnpm exec tsc --noEmit
pnpm build
```
## Vercel 部署
1. 将仓库推送到 GitHub。
2. 在 Vercel 中导入该仓库。
3. 使用默认的 Next.js 框架设置：
- 安装命令：`pnpm install`
- 构建命令：`pnpm build`
- 输出目录：Next.js 默认值
4. 在 Vercel 项目设置中添加此环境变量：
```
ABUSEIPDB_API_KEY=your_abuseipdb_key_here
```
5. 部署并验证：
- 仪表盘加载成功。
- 威胁源卡片正常渲染。
- 无效搜索被拒绝。
- IP 查询在有无 `ABUSEIPDB_API_KEY` 的情况下均可工作。
- 响应头包含配置的安全头。
## GitHub 发布
如果此文件夹尚未成为 Git 仓库：
```
git init
git add .
git commit -m "Prepare secure public launch"
```
创建一个名为 `cyber-attack-monitoring-dashboard` 的公共 GitHub 仓库，然后连接并推送：
```
git remote add origin https://github.com//cyber-attack-monitoring-dashboard.git
git branch -M main
git push -u origin main
```
## 脚本
| 命令 | 描述 |
| --- | --- |
| `pnpm dev` | 运行本地开发服务器。 |
| `pnpm build` | 构建生产应用。 |
| `pnpm start` | 构建后启动生产服务器。 |
| `pnpm lint` | 运行 ESLint。 |
| `pnpm audit --audit-level moderate` | 检查依赖项安全建议。 |
## 环境变量
| 变量 | 必需 | 描述 |
| --- | --- | --- |
| `ABUSEIPDB_API_KEY` | 否 | 启用实时 AbuseIPDB IP 信誉查询。缺失时，该路由返回模拟数据。 |
## 许可证
本项目根据 MIT 许可证授权。参见 [LICENSE](./LICENSE)。
## 技术栈
- **框架：** Next.js App Router
- **UI：** React, TypeScript, Tailwind CSS, Radix UI 原语, lucide-react
- **数据获取：** TanStack Query
- **图表：** Recharts
- **验证与工具：** TypeScript, zod, clsx, tailwind-merge
- **部署：** Vercel
- **包管理器：** pnpm
## 数据源
| 来源 | 当前行为 | 备注 |
| --- | --- | --- |
| URLHaus | 模拟路由数据 | 仪表盘目前生成逼真的模拟指标，用于作品集/演示。 |
| ThreatFox | 模拟路由数据 | 仪表盘目前生成逼真的模拟 IOC，用于作品集/演示。 |
| AbuseIPDB | 配置后可实时调用 API | 需要 `ABUSEIPDB_API_KEY`；缺失时回退到模拟数据。 |
| CIRCL CVE | 实时公共 API | 用于 CVE 详情查询。 |
本项目是一个监控和教育仪表盘。请将模拟指标视为演示数据，而非操作情报。
## 开始使用
### 前置条件
- 推荐使用 Node.js 22 LTS 或更新版本。
- pnpm 10。
如果 pnpm 未全局安装，可使用 npm 调用固定版本：
```
npm exec pnpm@10.0.0 -- install
```
### 安装说明
```
pnpm install
```
创建本地环境文件：
```
cp .env.example .env.local
```
可选添加你的 AbuseIPDB 密钥：
```
ABUSEIPDB_API_KEY=your_abuseipdb_key_here
```
启动开发服务器：
```
pnpm dev
```
打开 [http://localhost:3000](http://localhost:3000)。
## 安全
本仓库包含安全方面的启动工作：
- `next.config.mjs` 中不再忽略 TypeScript 构建错误。
- 配置了全局安全头：
- `Content-Security-Policy`
- `X-Content-Type-Options`
- `X-Frame-Options`
- `Referrer-Policy`
- `Permissions-Policy`
- 外部调查链接使用 `target="_blank"` 并带有 `rel="noopener noreferrer"`。
- 通过 `.gitignore` 排除密钥；真实的 `.env*.local` 文件不应被提交。
- `ABUSEIPDB_API_KEY` 仅保留在服务器端。
- pnpm overrides 固定了 `lodash` 和 `postcss` 的补丁传递版本。
发布更改前运行以下检查：
```
pnpm audit --audit-level moderate
pnpm lint
pnpm exec tsc --noEmit
pnpm build
```
## Vercel 部署
1. 将仓库推送到 GitHub。
2. 在 Vercel 中导入该仓库。
3. 使用默认的 Next.js 框架设置：
- 安装命令：`pnpm install`
- 构建命令：`pnpm build`
- 输出目录：Next.js 默认值
4. 在 Vercel 项目设置中添加此环境变量：
```
ABUSEIPDB_API_KEY=your_abuseipdb_key_here
```
5. 部署并验证：
- 仪表盘加载成功。
- 威胁源卡片正常渲染。
- 无效搜索被拒绝。
- IP 查询在有无 `ABUSEIPDB_API_KEY` 的情况下均可工作。
- 响应头包含配置的安全头。
## GitHub 发布
如果此文件夹尚未成为 Git 仓库：
```
git init
git add .
git commit -m "Prepare secure public launch"
```
创建一个名为 `cyber-attack-monitoring-dashboard` 的公共 GitHub 仓库，然后连接并推送：
```
git remote add origin https://github.com/标签：IP监控, Next.js框架, pnpm包管理, Radix UI组件, React前端, Recharts图表, Tailwind CSS, TanStack Query, TypeScript, UI组件库, Vercel部署, 代码示例, 仪表板开发, 图表展示, 域名监控, 威胁情报, 威胁指标, 安全插件, 开发者工具, 情报工具, 数据分析, 数据获取, 模拟数据, 缓解指导, 网络安全, 自动化攻击, 隐私保护