isaac0621/SecuScan
GitHub: isaac0621/SecuScan
一个全栈安全仪表板，整合日志解析、入侵检测与 JWT 认证，模拟真实 SOC 场景。
Stars: 0 | Forks: 0
# 🔒 SecuScan 仪表板 - 安全日志可视化与分析
一个全栈安全仪表板，通过日志分析、入侵检测和安全 API 设计展示网络安全专业知识。使用 React、Vite、Python Flask 和 JWT 认证构建。
## 📋 项目概述
SecuScan 通过以下方式模拟真实的安全运营中心 (SOC) 仪表板：
- **解析服务器安全日志**并检测入侵模式
- **使用交互式图表可视化威胁**（失败登录尝试、按国家/地区划分的流量、告警严重性）
- **实现 JWT 认证**以保护敏感端点
- **检测攻击模式**：SQL 注入、暴力破解、路径遍历、DDoS 指标
- **提供实时分析**，支持自动数据刷新
## 🚀 快速开始
### 安装
```
# 导航到项目根目录
cd SecuScan
# 安装所有依赖
npm run install-all
```
### 使用一条命令运行所有服务
```
npm start
```
此命令使用 **concurrently** 同时运行：
- **后端**：Flask 服务器，地址 `http://localhost:5000`
- **前端**：Vite 开发服务器，地址 `http://localhost:5173`
### 演示凭据
```
Username: admin
Password: admin123
```
## 📁 项目结构
```
SecuScan/
├── client/ # React + Vite Frontend
│ ├── src/
│ │ ├── components/
│ │ │ ├── Dashboard.jsx # Main dashboard with charts
│ │ │ └── Dashboard.css
│ │ ├── App.jsx # Login & theme management
│ │ ├── App.css
│ │ ├── main.jsx
│ │ └── index.css
│ ├── vite.config.js # Vite configuration with proxy
│ ├── index.html
│ └── package.json
│
├── server/ # Python Flask Backend
│ ├── main.py # Flask API with JWT auth
│ ├── security.log # Sample security logs
│ └── requirements.txt
│
├── package.json # Root monorepo config with concurrently
└── README.md
```
## 🔐 安全特性
### 认证与授权
#### JWT 令牌实现
```
# 令牌生成（安全）
token = jwt.encode(
{
'user': username,
'exp': datetime.utcnow() + timedelta(hours=24)
},
SECRET_KEY,
algorithm='HS256'
)
# 受保护端点上的令牌验证
@token_required
def get_logs(current_user):
# Only authenticated users can access
return jsonify({'logs': SECURITY_LOGS})
```
**安全优势：**
- ✅ 无状态认证（无需会话存储）
- ✅ 令牌过期（24 小时有效期）
- ✅ HS256 签名算法保证完整性
- ✅ 授权头验证
### 输入验证与清理
```
# 凭据验证
if not data or not data.get('username') or not data.get('password'):
return jsonify({'error': 'Missing credentials'}), 400
username = data['username'].strip() # Remove whitespace
```
**防护范围：**
- ✅ 缺失/空字段
- ✅ 空白符注入
### 请求大小限制
```
@app.before_request
def limit_request_size():
"""Prevent DoS attacks via large payloads"""
if request.content_length and request.content_length > 1024 * 1024:
return jsonify({'error': 'Request payload too large'}), 413
```
**防护范围：**
- ✅ 拒绝服务 (DoS) 攻击
- ✅ 缓冲区溢出尝试
- ✅ 内存耗尽
### CORS 安全
```
CORS(app) # Configured with Flask-CORS
```
**实现：**
- ✅ 允许前端与后端通信
- ✅ 防止未授权的跨域请求
- ✅ 生产环境中可限制为特定来源
### 基于模式的攻击检测
后端检测多种攻击向量：
#### SQL 注入检测
```
sql_injection_pattern = r'(union|select|drop|insert|update|delete|--|;|OR|AND).*=.*'
```
检测：UNION 注入、DROP TABLE、基于注释的注入
#### 路径遍历检测
```
path_traversal_pattern = r'(\.\./|\.\.\\|%2e%2e)'
```
检测：`../../etc/passwd`、`..\...\windows\system32`
#### 暴力破解检测
```
# 按 IP 统计登录失败次数
if count >= 10: # 10+ failures = suspicious
analysis['suspicious_ips'].append({'ip': ip, 'failed_attempts': count})
```
#### 漏洞扫描器检测
```
suspicious_agents = ['sqlmap', 'nikto', 'nmap', 'masscan']
```
## 🎨 前端特性
### 暗色模式（黑客美学）
- 在深色与浅色主题间切换
- 跨会话持久化
- 渐变背景与霓虹色彩
- 优化长时间观看体验
### 交互式仪表板
#### 1. 实时统计
- 已处理的总请求数
- 关键告警（带脉冲动画）
- 失败登录尝试
- 检测到的唯一 IP 数
#### 2. 安全图表
- **失败登录时间线**：折线图，显示随时间变化的暴力破解攻击
- **按国家/地区划分的流量**：条形图，用于地理威胁分析
- **告警严重性分布**：饼图（严重、高、中、低）
#### 3. 安全事件日志
- 包含 50+ 条示例日志的实时事件表格
- 颜色编码的严重性级别
- IP、时间戳、事件类型和状态列
- 每 10 秒自动刷新
### 响应式设计
- 移动优先方法
- 适用于桌面、平板和手机
- 从 320px 到 4K 显示器均能完美缩放
## 🔧 后端 API 端点
### 认证
#### `POST /api/auth/login`
验证用户并接收 JWT 令牌。
**请求：**
```
{
"username": "admin",
"password": "admin123"
}
```
**响应：**
```
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}
```
### 需要 JWT 令牌的受保护端点
#### `GET /api/logs`
检索所有解析的安全日志。
**请求头：**
```
Authorization: Bearer {token}
```
**响应：**
```
{
"logs": [
{
"timestamp": "2024-01-19 08:15:23",
"ip": "192.168.1.105",
"event_type": "Failed Login",
"status": "failed",
"details": "Invalid password attempt",
"severity": "high"
}
]
}
```
#### `GET /api/analysis`
获取入侵检测分析和威胁情报。
**请求头：**
```
Authorization: Bearer {token}
```
**响应：**
```
{
"total_requests": 50,
"critical_alerts": 2,
"high_alerts": 8,
"medium_alerts": 5,
"low_alerts": 10,
"failed_logins_count": 12,
"unique_ips": 15,
"failed_logins": [
{"time": "2024-01-19 08", "count": 12}
],
"traffic_by_country": [
{"country": "USA", "requests": 25},
{"country": "China", "requests": 12}
],
"suspicious_ips": [
{"ip": "192.168.1.105", "failed_attempts": 12}
]
}
```
#### `GET /api/user`
获取当前认证用户的信息。
### 公共端点
#### `GET /api/health`
健康检查端点（无需认证）。
**响应：**
```
{
"status": "OK",
"service": "SecuScan Backend"
}
```
## 📊 示例日志格式
安全日志从 `server/security.log` 解析：
```
timestamp|ip_address|event_type|status|details
2024-01-19 08:15:23|192.168.1.105|Failed Login|failed|Invalid password attempt
2024-01-19 09:10:15|203.45.123.89|SQL Injection Attempt|blocked|union select from users...
```
## 🛠️ 开发
### 技术栈
**前端：**
- React 18.2 - UI 库
- Vite 5.0 - 构建工具（即时 HMR）
- Recharts 2.10 - 数据可视化
- Axios 1.6 - HTTP 客户端
- CSS3 - 使用渐变和动画的样式
**后端：**
- Flask 3.0 - Web 框架
- PyJWT 2.8 - JWT 认证
- Flask-CORS 4.0 - CORS 处理
- Python 3.8+ - 运行时
### 环境变量
在 `server/` 中创建 `.env` 文件（可选）：
```
SECRET_KEY=your-super-secret-key-change-this
FLASK_ENV=production
FLASK_DEBUG=False
```
### 添加新功能
1. **新 API 端点：**
@app.route('/api/new-endpoint', methods=['GET'])
@token_required
def new_endpoint(current_user):
return jsonify({'data': 'value'}), 200
2. **新检测模式：**
new_pattern = r'your-regex-pattern'
# 添加到 _calculate_severity() 方法
3. **新图表：**
// 在 Dashboard.jsx 中
{/* 添加 Recharts 组件 */}
## 🔒 实施的安全最佳实践
| 实践 | 实现方式 | 优势 |
|----------|-----------------|---------|
| **认证** | 带过期时间的 JWT 令牌 | 防止未授权访问 |
| **密码哈希** | 服务器端验证凭据 | 防止凭据盗窃 |
| **HTTPS 就绪** | 生产环境中可添加 SSL/TLS | 加密传输中的数据 |
| **CORS** | 配置 Flask-CORS | 防止跨域攻击 |
| **输入验证** | 清理所有用户输入 | 防止注入攻击 |
| **请求限制** | 最大 1MB 有效载荷 | 防止 DoS 攻击 |
| **错误处理** | 通用错误消息 | 防止信息泄露 |
| **速率限制** | 准备集成 | 防止暴力破解攻击 |
| **模式检测** | 基于正则表达式的威胁分析 | 检测已知攻击模式 |
## 📈 为什么这个项目在简历中脱颖而出
### 展示网络安全知识
✅ 实现了 JWT 认证（不仅仅是基础认证）
✅ 检测真实攻击模式（SQL 注入、路径遍历）
✅ 理解入侵检测方法学
✅ 熟悉安全日志记录最佳实践
### 展示全栈开发能力
✅ 前端：React 与现代工具链（Vite）
✅ 后端：Python（网络安全领域的王者）
✅ DevOps：单 npm start 启动的单体仓库
✅ 数据库：日志解析与分析
### 证明代码质量
✅ 完善的安全功能文档
✅ 清晰、模块化的代码结构
✅ 完善的错误处理和验证
✅ RESTful API 设计
### 面试谈资
- “我带有 24 小时过期时间的 JWT 认证”
- “分析器检测多种攻击模式，包括 SQL 注入和路径遍历”
- “设置了一个单体仓库架构，使用 concurrent 运行多个进程”
- “构建了一个使用 Recharts 的安全指标数据可视化仪表板”
- “实现了请求大小限制以防止 DoS 攻击”
## 🚢 部署
### 生产环境检查清单
```
# 1. 更新密钥
export SECRET_KEY=generate-strong-random-key
# 2. 禁用调试模式（已设为 False）
# 3. 使用生产环境 CORS 设置
CORS(app, origins=['https://yourdomain.com'])
# 4. 添加 SSL/TLS 证书
# 在 Web 服务器（Nginx、Apache）中配置
# 5. 设置环境变量
export FLASK_ENV=production
export DEBUG=False
# 6. 使用生产环境服务器（Gunicorn）
pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:5000 main:app
# 7. 使用 npm 生产构建
npm run build
# 8. 通过 Web 服务器提供服务
# 配置 Nginx 以提供静态文件并代理 API
```
### Docker 部署（可选）
```
# 后端 Dockerfile
FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:5000", "main:app"]
# 前端构建为静态文件并通过 Nginx 提供服务
```
## 📝 许可证
本项目作为个人作品集和简历的教育资源提供。
## 🤝 贡献
这是一个个人作品集项目。欢迎扩展：
- 真实的 GeoIP 数据库集成
- 数据库存储（PostgreSQL、MongoDB）
- 实时 WebSocket 更新
- 机器学习威胁检测
- 用户角色与 RBAC
- 双因素认证 (2FA)
- 审计日志
## 📧 问题？
关于安全功能的实现细节，请参考以下文件中的注释：
- `server/main.py` - 安全中间件和端点保护
- `server/main.py` - 威胁模式检测逻辑
- `client/src/App.jsx` - JWT 令牌处理
**用心构建，展示网络安全专业知识**
新图表标题
标签：DDoS检测, Flask后端, JWT认证, Python安全开发, React前端, SOC安全运营中心, SQL注入检测, Vite构建, 主题切换, 交互式图表, 免杀技术, 全栈安全仪表盘, 前端登录管理, 告警严重级别, 威胁可视化, 安全日志分析, 安全日志解析, 实时数据分析, 并发开发工具, 敏感接口保护, 暴力破解检测, 流量地理分析, 登录安全, 路径遍历检测, 逆向工具