Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>风险项目详情 - AI SDL数字分身</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css"> | |
| <style> | |
| .content-container { | |
| height: calc(100vh - 180px); | |
| overflow-y: auto; | |
| } | |
| .risk-highlight { | |
| background-color: #fee2e2; | |
| padding: 2px 0; | |
| border-radius: 2px; | |
| color: #b91c1c; | |
| } | |
| .vulnerable-line { | |
| background-color: #fee2e2; | |
| display: block; | |
| margin: 0 -1rem; | |
| padding: 0 1rem; | |
| border-left: 3px solid #dc2626; | |
| } | |
| .code-file-tab.active { | |
| border-bottom: 2px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: 500; | |
| } | |
| .mermaid { | |
| background-color: white; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| margin: 1rem 0; | |
| } | |
| .attack-flow { | |
| counter-reset: step; | |
| } | |
| .attack-step { | |
| position: relative; | |
| padding-left: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .attack-step:before { | |
| counter-increment: step; | |
| content: counter(step); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| background-color: #3b82f6; | |
| color: white; | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.875rem; | |
| } | |
| .fixed-payload { | |
| background-color: #dcfce7; | |
| text-decoration: line-through; | |
| } | |
| .risk-critical { | |
| border-left: 4px solid #dc2626; | |
| } | |
| .risk-high { | |
| border-left: 4px solid #ea580c; | |
| } | |
| .risk-medium { | |
| border-left: 4px solid #d97706; | |
| } | |
| .risk-low { | |
| border-left: 4px solid #65a30d; | |
| } | |
| .content-tab.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Header --> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">风险项目详情</h1> | |
| <p class="text-gray-600">AI SDL数字分身 - 安全风险分析</p> | |
| </div> | |
| <div class="bg-red-100 text-red-800 px-4 py-2 rounded-lg"> | |
| <span class="font-semibold">高风险项目</span> | |
| </div> | |
| </div> | |
| <!-- Project Info --> | |
| <div class="bg-white rounded-lg shadow p-6 mb-4"> | |
| <h2 class="text-xl font-semibold mb-4">支付宝国补项目</h2> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">项目负责人</p> | |
| <p class="font-medium">张三</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">安全责任人</p> | |
| <p class="font-medium">李四</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">风险发现时间</p> | |
| <p class="font-medium">2023-06-15</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Risk Summary - Compact Version --> | |
| <div class="bg-white rounded-lg shadow p-4 mb-6"> | |
| <h3 class="text-lg font-semibold mb-2">风险汇总</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">需求: 越权访问</span> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">代码: SQL注入</span> | |
| <span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm">测试: ID枚举</span> | |
| <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">发布: 1未修复</span> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="flex border-b mb-6"> | |
| <button class="tab-btn px-4 py-2 font-medium text-blue-600 border-b-2 border-blue-600" data-tab="requirements">需求分析</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-blue-600" data-tab="code">代码分析</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-blue-600" data-tab="testing">安全测试</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-blue-600" data-tab="release">发布检查</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-blue-600" data-tab="production">线上监控</button> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <!-- Requirements Tab --> | |
| <div id="requirements" class="tab-content"> | |
| <div class="grid grid-cols-2 divide-x"> | |
| <!-- Left: Content --> | |
| <div class="p-6"> | |
| <div class="flex mb-4"> | |
| <button class="content-tab active px-4 py-2 rounded-l" data-content="doc">需求文档</button> | |
| <button class="content-tab px-4 py-2 rounded-r" data-content="diagram">技术架构图</button> | |
| </div> | |
| <div id="doc-content" class="content-container"> | |
| <p>支付宝国补项目需求文档 v1.2</p> | |
| <p class="mt-4">1. 项目背景：为响应国家补贴政策，支付宝平台新增国补专区，为用户提供补贴申请、查询等服务。</p> | |
| <p class="mt-2">2. 功能需求：</p> | |
| <p class="mt-2 ml-4">2.1 用户认证：用户需完成实名认证方可申请补贴</p> | |
| <p class="mt-2 ml-4">2.2 补贴申请：用户填写申请表，提交后进入审核流程</p> | |
| <p class="mt-2 ml-4">2.3 补贴查询：用户可查询历史补贴记录及当前申请状态</p> | |
| <p class="mt-2 ml-4 risk-highlight" id="req-1">2.4 管理员功能：管理员可查看所有用户补贴申请，并有权修改申请状态</p> | |
| <p class="mt-2 risk-highlight" id="req-2">3. 技术实现：采用微服务架构，补贴服务独立部署，通过API网关暴露接口</p> | |
| <p class="mt-2">4. 数据存储：用户补贴数据存储在MySQL数据库，补贴申请表单独存储</p> | |
| <p class="mt-2 risk-highlight" id="req-3">5. 权限控制：前端根据用户角色显示不同功能，后端接口需验证用户权限</p> | |
| </div> | |
| <div id="diagram-content" class="content-container hidden"> | |
| <div class="mermaid"> | |
| graph TD | |
| A[用户端] --> B[API网关] | |
| B --> C[认证服务] | |
| B --> D[补贴服务] | |
| D --> E[(MySQL)] | |
| D --> F[(Redis)] | |
| C --> E | |
| G[管理后台] --> B | |
| H[风控系统] --> D | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right: Analysis --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold mb-4">安全分析结果</h3> | |
| <div class="content-container"> | |
| <h4 class="font-medium text-red-600 mb-2">STRIDE威胁建模</h4> | |
| <div class="mermaid"> | |
| graph LR | |
| A[管理员功能] -->|Spoofing| B[未强制二次认证] | |
| A -->|Tampering| C[状态修改无审批流] | |
| A -->|Repudiation| D[操作日志不完整] | |
| E[补贴查询] -->|Information Disclosure| F[返回过多用户信息] | |
| G[API网关] -->|Denial of Service| H[无速率限制] | |
| </div> | |
| <h4 class="font-medium mt-6 mb-2">安全风险分析</h4> | |
| <div class="space-y-4"> | |
| <div class="border rounded-lg p-4 risk-critical" onclick="scrollToRequirement('req-1')" style="cursor: pointer;"> | |
| <p class="font-medium">业务场景: 管理员修改补贴申请状态</p> | |
| <p class="text-sm text-gray-600 mt-1">风险点: 后端接口未验证管理员权限</p> | |
| <p class="text-sm text-gray-600 mt-1">风险类型: 越权访问</p> | |
| <p class="text-sm text-blue-600 mt-1">整改建议: 1. 接口添加权限校验 2. 记录操作日志 3. 添加二次确认</p> | |
| </div> | |
| <div class="border rounded-lg p-4 risk-high" onclick="scrollToRequirement('req-2')" style="cursor: pointer;"> | |
| <p class="font-medium">业务场景: 补贴查询接口</p> | |
| <p class="text-sm text-gray-600 mt-1">风险点: 返回所有用户字段</p> | |
| <p class="text-sm text-gray-600 mt-1">风险类型: 信息泄露</p> | |
| <p class="text-sm text-blue-600 mt-1">整改建议: 1. 只返回必要字段 2. 添加数据脱敏</p> | |
| </div> | |
| <div class="border rounded-lg p-4 risk-medium" onclick="scrollToRequirement('req-3')" style="cursor: pointer;"> | |
| <p class="font-medium">业务场景: 权限控制设计</p> | |
| <p class="text-sm text-gray-600 mt-1">风险点: 仅前端控制权限</p> | |
| <p class="text-sm text-gray-600 mt-1">风险类型: 权限绕过</p> | |
| <p class="text-sm text-blue-600 mt-1">整改建议: 1. 后端添加权限校验 2. 实现RBAC模型</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Code Tab --> | |
| <div id="code" class="tab-content hidden"> | |
| <div class="grid grid-cols-2 divide-x"> | |
| <!-- Left: Content --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold mb-4">代码内容</h3> | |
| <div class="flex border-b mb-4"> | |
| <button class="code-file-tab px-4 py-2 active" data-file="subsidyService.js">subsidyService.js</button> | |
| <button class="code-file-tab px-4 py-2" data-file="authMiddleware.js">authMiddleware.js</button> | |
| <button class="code-file-tab px-4 py-2" data-file="subsidyController.js">subsidyController.js</button> | |
| </div> | |
| <div class="content-container"> | |
| <div id="subsidyService.js" class="code-content"> | |
| <pre><code class="language-javascript">const db = require('./db'); | |
| // 获取用户补贴信息 | |
| async function getUserSubsidy(userId) { | |
| const query = `SELECT * FROM subsidies WHERE user_id = '${userId}'`; | |
| return await db.query(query); | |
| } | |
| // 更新补贴状态 | |
| async function updateSubsidyStatus(subsidyId, status) { | |
| // 漏洞: 未验证管理员权限 | |
| const query = `UPDATE subsidies SET status = '${status}' WHERE id = ${subsidyId}`; | |
| return await db.query(query); | |
| } | |
| // 获取所有补贴申请 (管理员) | |
| async function getAllSubsidies() { | |
| const query = `SELECT * FROM subsidies`; | |
| return await db.query(query); | |
| } | |
| module.exports = { | |
| getUserSubsidy, | |
| updateSubsidyStatus, | |
| getAllSubsidies | |
| };</code></pre> | |
| </div> | |
| <div id="authMiddleware.js" class="code-content hidden"> | |
| <pre><code class="language-javascript">// 认证中间件 | |
| function authenticate(req, res, next) { | |
| const token = req.headers['authorization']; | |
| if (!token) { | |
| return res.status(401).json({ error: '未授权' }); | |
| } | |
| // 验证token逻辑... | |
| next(); | |
| } | |
| module.exports = { | |
| authenticate | |
| };</code></pre> | |
| </div> | |
| <div id="subsidyController.js" class="code-content hidden"> | |
| <pre><code class="language-javascript">const express = require('express'); | |
| const router = express.Router(); | |
| const subsidyService = require('./subsidyService'); | |
| // 获取用户补贴信息 | |
| router.get('/:userId', async (req, res) => { | |
| try { | |
| const subsidies = await subsidyService.getUserSubsidy(req.params.userId); | |
| res.json(subsidies); | |
| } catch (error) { | |
| res.status(500).json({ error: error.message }); | |
| } | |
| }); | |
| // 更新补贴状态 | |
| router.put('/status/:subsidyId', async (req, res) => { | |
| try { | |
| const result = await subsidyService.updateSubsidyStatus( | |
| req.params.subsidyId, | |
| req.body.status | |
| ); | |
| res.json(result); | |
| } catch (error) { | |
| res.status(500).json({ error: error.message }); | |
| } | |
| }); | |
| module.exports = router;</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right: Analysis --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold mb-4">安全分析结果</h3> | |
| <div class="content-container"> | |
| <div class="space-y-4"> | |
| <div class="border rounded-lg p-4 risk-critical"> | |
| <p class="font-medium">漏洞名称: SQL注入</p> | |
| <p class="text-sm text-gray-600 mt-1">风险接口: GET /subsidies/:userId</p> | |
| <p class="text-sm text-gray-600 mt-1">漏洞类型: 注入漏洞</p> | |
| <p class="text-sm text-gray-600 mt-1">漏洞级别: 高危</p> | |
| <p class="text-sm text-gray-600 mt-1">漏洞描述: 用户ID直接拼接到SQL查询中，可能导致SQL注入攻击</p> | |
| <div class="mt-2"> | |
| <p class="text-sm font-medium">修复代码:</p> | |
| <pre><code class="language-javascript text-sm">// 修复后代码 | |
| async function getUserSubsidy(userId) { | |
| const query = 'SELECT * FROM subsidies WHERE user_id = ?'; | |
| return await db.query(query, [userId]); | |
| }</code></pre> | |
| </div> | |
| <button class="mt-2 text-sm text-blue-600 hover:underline" onclick="highlightCodeLine('subsidyService.js', 4)">定位漏洞代码</button> | |
| </div> | |
| <div class="border rounded-lg p-4 risk-critical"> | |
| <p class="font-medium">漏洞名称: 越权访问</p> | |
| <p class="text-sm text-gray-600 mt-1">风险接口: PUT /status/:subsidyId</p> | |
| <p class="text-sm text-gray-600 mt-1">漏洞类型: 权限漏洞</p> | |
| <p class="text-sm text-gray-600 mt-1">漏洞级别: 高危</p> | |
| <p class="text-sm text-gray-600 mt-1">漏洞描述: 接口未验证调用者是否有权限修改补贴状态</p> | |
| <div class="mt-2"> | |
| <p class="text-sm font-medium">修复代码:</p> | |
| <pre><code class="language-javascript text-sm">// 修复后代码 | |
| async function updateSubsidyStatus(userId, subsidyId, status) { | |
| // 首先验证用户是否有权限修改这个补贴 | |
| const canUpdate = await checkPermission(userId, subsidyId); | |
| if (!canUpdate) { | |
| throw new Error('无权修改此补贴状态'); | |
| } | |
| const query = 'UPDATE subsidies SET status = ? WHERE id = ?'; | |
| return await db.query(query, [status, subsidyId]); | |
| }</code></pre> | |
| </div> | |
| <button class="mt-2 text-sm text-blue-600 hover:underline" onclick="highlightCodeLine('subsidyService.js', 9)">定位漏洞代码</button> | |
| </div> | |
| <div class="border rounded-lg p-4 risk-high"> | |
| <p class="font-medium">漏洞名称: 信息泄露</p> | |
| <p class="text-sm text-gray-600 mt-1">风险接口: GET /subsidies/:userId</p> | |
| <p class="text-sm text-gray-600 mt-1">漏洞类型: 数据泄露</p> | |
| <p class="text-sm text-gray-600 mt-1">漏洞级别: 高危</p> | |
| <p class="text-sm text-gray-600 mt-1">漏洞描述: 返回所有用户补贴信息字段，包含敏感数据</p> | |
| <div class="mt-2"> | |
| <p class="text-sm font-medium">修复代码:</p> | |
| <pre><code class="language-javascript text-sm">// 修复后代码 | |
| async function getUserSubsidy(userId) { | |
| const query = 'SELECT id, amount, status FROM subsidies WHERE user_id = ?'; | |
| return await db.query(query, [userId]); | |
| }</code></pre> | |
| </div> | |
| <button class="mt-2 text-sm text-blue-600 hover:underline" onclick="highlightCodeLine('subsidyService.js', 4)">定位漏洞代码</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testing Tab --> | |
| <div id="testing" class="tab-content hidden"> | |
| <div class="grid grid-cols-2 divide-x"> | |
| <!-- Left: Content --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold mb-4">测试内容</h3> | |
| <div class="content-container"> | |
| <h4 class="font-medium mb-2">风险接口: /api/subsidies/1001</h4> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <p class="font-medium">攻击Payload:</p> | |
| <pre><code class="language-http">GET /api/subsidies/1001%27%20OR%201%3D1-- HTTP/1.1 | |
| Host: example.com | |
| Authorization: Bearer user_token</code></pre> | |
| </div> | |
| <h4 class="font-medium mb-2 mt-6">风险接口: /api/subsidies/status/1001</h4> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="font-medium">攻击Payload:</p> | |
| <pre><code class="language-http">PUT /api/subsidies/status/1002 HTTP/1.1 | |
| Host: example.com | |
| Authorization: Bearer user_token | |
| Content-Type: application/json | |
| { | |
| "status": "approved" | |
| }</code></pre> | |
| </div> | |
| <div class="mt-6 p-4 bg-green-50 rounded-lg"> | |
| <p class="font-medium">攻击结果:</p> | |
| <pre><code class="language-json">{ | |
| "id": 1002, | |
| "user_id": "other_user", | |
| "amount": 5000, | |
| "status": "approved", | |
| "created_at": "2023-06-01T10:00:00Z" | |
| }</code></pre> | |
| <p class="text-red-600 mt-2">攻击成功: 普通用户成功修改了其他用户的补贴状态</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right: Analysis --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold mb-4">安全分析结果</h3> | |
| <div class="content-container"> | |
| <div class="space-y-4"> | |
| <div class="border rounded-lg p-4"> | |
| <p class="font-medium">风险接口地址: /api/subsidies/{userId}</p> | |
| <p class="text-sm text-gray-600 mt-1">风险描述: SQL注入漏洞导致可以获取所有用户补贴信息</p> | |
| <h4 class="font-medium mt-4 mb-2">攻击手法:</h4> | |
| <div class="attack-flow"> | |
| <div class="attack-step">攻击者登录自己的账号，获取一个合法的用户ID</div> | |
| <div class="attack-step">构造恶意SQL注入Payload替换用户ID</div> | |
| <div class="attack-step">服务器执行恶意SQL查询，返回所有用户数据</div> | |
| <div class="attack-step">攻击者获取大量敏感用户补贴信息</div> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <p class="font-medium">风险接口地址: /api/subsidies/status/{subsidyId}</p> | |
| <p class="text-sm text-gray-600 mt-1">风险描述: 越权修改其他用户补贴状态</p> | |
| <h4 class="font-medium mt-4 mb-2">攻击手法:</h4> | |
| <div class="attack-flow"> | |
| <div class="attack-step">攻击者登录自己的账号，获取一个合法的订单ID</div> | |
| <div class="attack-step">修改请求中的subsidyId参数，尝试访问其他订单ID</div> | |
| <div class="attack-step">服务器未进行权限校验，成功修改状态</div> | |
| <div class="attack-step">通过自动化工具可以批量修改大量订单状态</div> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-4 bg-blue-50 rounded-lg"> | |
| <h4 class="font-medium mb-2">修复建议:</h4> | |
| <div class="flex items-start"> | |
| <div class="flex-1"> | |
| <pre><code class="language-http fixed-payload">GET /api/subsidies/1001 HTTP/1.1</code></pre> | |
| <p class="text-sm mt-1">使用参数化查询:</p> | |
| <pre><code class="language-javascript">const query = 'SELECT * FROM subsidies WHERE user_id = ?'; | |
| db.query(query, [userId]);</code></pre> | |
| </div> | |
| <button class="ml-4 px-3 py-1 bg-green-100 text-green-800 rounded text-sm">已修复</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Release Tab --> | |
| <div id="release" class="tab-content hidden"> | |
| <div class="grid grid-cols-2 divide-x"> | |
| <!-- Left: Content --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold mb-4">发布检查内容</h3> | |
| <div class="content-container"> | |
| <div class="space-y-4"> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium">需求环节遗留风险</h4> | |
| <p class="text-sm text-gray-600 mt-1">管理员越权风险: 已添加权限校验中间件</p> | |
| <p class="text-sm text-green-600 mt-1">状态: 已修复</p> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium">代码环节遗留风险</h4> | |
| <p class="text-sm text-gray-600 mt-1">SQL注入漏洞: 已改为参数化查询</p> | |
| <p class="text-sm text-green-600 mt-1">状态: 已修复</p> | |
| <p class="text-sm text-gray-600 mt-1">信息泄露风险: 已添加数据脱敏</p> | |
| <p class="text-sm text-green-600 mt-1">状态: 已修复</p> | |
| </div> | |
| <div class="border rounded-lg p-4 bg-red-50"> | |
| <h4 class="font-medium text-red-600">安全测试环节遗留风险</h4> | |
| <p class="text-sm text-gray-600 mt-1">订单ID枚举漏洞: 未完全修复</p> | |
| <p class="text-sm text-red-600 mt-1">状态: 未修复</p> | |
| <p class="text-sm text-blue-600 mt-1">建议: 添加速率限制和异常检测</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right: Analysis --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold mb-4">安全分析结果</h3> | |
| <div class="content-container"> | |
| <div class="space-y-4"> | |
| <div class="border rounded-lg p-4 bg-green-50"> | |
| <h4 class="font-medium text-green-800">已修复风险</h4> | |
| <ul class="list-disc pl-5 mt-2 text-sm text-gray-700"> | |
| <li>需求环节: 管理员越权风险</li> | |
| <li>代码环节: SQL注入漏洞</li> | |
| <li>代码环节: 信息泄露风险</li> | |
| </ul> | |
| </div> | |
| <div class="border rounded-lg p-4 bg-red-50"> | |
| <h4 class="font-medium text-red-800">未修复风险</h4> | |
| <div class="mt-2"> | |
| <p class="font-medium">订单ID枚举漏洞</p> | |
| <p class="text-sm text-gray-600 mt-1">风险描述: 攻击者可以通过枚举ID获取其他用户信息</p> | |
| <p class="text-sm text-blue-600 mt-1">影响环节: 安全测试环节发现，代码环节未完全修复</p> | |
| <p class="text-sm text-blue-600 mt-1">建议措施: 1. 添加速率限制 2. 实现资源级权限控制 3. 监控异常访问</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-4 bg-blue-50 rounded-lg"> | |
| <h4 class="font-medium mb-2">发布决策</h4> | |
| <div class="flex items-center"> | |
| <div class="flex-1"> | |
| <p class="text-sm">存在1个未修复的高危漏洞，建议:</p> | |
| <p class="font-medium text-red-600">延迟发布，优先修复订单ID枚举漏洞</p> | |
| </div> | |
| <button class="ml-4 px-4 py-2 bg-red-100 text-red-800 rounded">拒绝发布</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Production Tab --> | |
| <div id="production" class="tab-content hidden"> | |
| <div class="grid grid-cols-2 divide-x"> | |
| <!-- Left: Content --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold mb-4">线上监控内容</h3> | |
| <div class="content-container"> | |
| <div class="space-y-4"> | |
| <div class="border rounded-lg p-4 bg-red-50"> | |
| <h4 class="font-medium text-red-800">安全事件</h4> | |
| <p class="text-sm mt-1">2023-06-20 14:30: 检测到异常补贴状态修改请求</p> | |
| <p class="text-sm mt-1">2023-06-21 09:15: 检测到批量补贴查询请求</p> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium">监控指标</h4> | |
| <div class="grid grid-cols-2 gap-4 mt-2"> | |
| <div> | |
| <p class="text-sm text-gray-600">异常请求数</p> | |
| <p class="text-xl font-bold">128</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">拦截攻击</p> | |
| <p class="text-xl font-bold">42</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium">访问日志</h4> | |
| <div class="mt-2 overflow-x-auto"> | |
| <table class="min-w-full text-sm"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="py-2 text-left">时间</th> | |
| <th class="py-2 text-left">接口</th> | |
| <th class="py-2 text-left">状态</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b"> | |
| <td class="py-2">2023-06-20 14:30:22</td> | |
| <td class="py-2">PUT /status/1002</td> | |
| <td class="py-2 text-red-600">拦截</td> | |
| </tr> | |
| <tr class="border-b"> | |
| <td class="py-2">2023-06-20 14:30:25</td> | |
| <td class="py-2">PUT /status/1003</td> | |
| <td class="py-2 text-red-600">拦截</td> | |
| </tr> | |
| <tr> | |
| <td class="py-2">2023-06-20 14:30:28</td> | |
| <td class="py-2">PUT /status/1004</td> | |
| <td class="py-2 text-red-600">拦截</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right: Analysis --> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-semibold mb-4">安全分析结果</h3> | |
| <div class="content-container"> | |
| <div class="space-y-4"> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium">漏洞修复情况</h4> | |
| <div class="mt-2"> | |
| <p class="text-sm font-medium">SQL注入漏洞</p> | |
| <p class="text-sm text-green-600">已修复 - 2023-06-18</p> | |
| <p class="text-sm text-gray-600 mt-1">修复后未发现相关攻击</p> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm font-medium">越权访问漏洞</p> | |
| <p class="text-sm text-green-600">已修复 - 2023-06-19</p> | |
| <p class="text-sm text-gray-600 mt-1">修复后拦截42次攻击尝试</p> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 bg-yellow-50"> | |
| <h4 class="font-medium text-yellow-800">待处理问题</h4> | |
| <div class="mt-2"> | |
| <p class="text-sm font-medium">订单ID枚举漏洞</p> | |
| <p class="text-sm text-red-600">未完全修复</p> | |
| <p class="text-sm text-gray-600 mt-1">检测到128次枚举尝试</p> | |
| <p class="text-sm text-blue-600 mt-1">建议: 添加资源级权限控制</p> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium">安全态势</h4> | |
| <div class="mt-2"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm">SQL注入防护</span> | |
| <span class="text-sm font-medium text-green-600">有效</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm">越权访问防护</span> | |
| <span class="text-sm font-medium text-green-600">有效</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm">枚举攻击防护</span> | |
| <span class="text-sm font-medium text-yellow-600">部分有效</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Mermaid | |
| mermaid.initialize({ | |
| startOnLoad: true, | |
| theme: 'default', | |
| flowchart: { useMaxWidth: false } | |
| }); | |
| // Initialize syntax highlighting | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| document.querySelectorAll('pre code').forEach((block) => { | |
| hljs.highlightElement(block); | |
| }); | |
| }); | |
| // Tab switching | |
| document.querySelectorAll('.tab-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| // Update tab buttons | |
| document.querySelectorAll('.tab-btn').forEach(b => { | |
| b.classList.remove('text-blue-600', 'border-blue-600'); | |
| b.classList.add('text-gray-600', 'hover:text-blue-600'); | |
| }); | |
| btn.classList.add('text-blue-600', 'border-blue-600'); | |
| btn.classList.remove('text-gray-600', 'hover:text-blue-600'); | |
| // Show selected tab content | |
| const tabId = btn.getAttribute('data-tab'); | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| document.getElementById(tabId).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Code file tabs | |
| document.querySelectorAll('.code-file-tab').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // Update tab buttons | |
| document.querySelectorAll('.code-file-tab').forEach(t => { | |
| t.classList.remove('active'); | |
| }); | |
| tab.classList.add('active'); | |
| // Show selected file content | |
| const fileId = tab.getAttribute('data-file'); | |
| document.querySelectorAll('.code-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| document.getElementById(fileId).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Content tabs in requirements section | |
| document.querySelectorAll('.content-tab').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // Update tab buttons | |
| document.querySelectorAll('.content-tab').forEach(t => { | |
| t.classList.remove('active', 'bg-blue-600', 'text-white'); | |
| t.classList.add('bg-gray-100', 'text-gray-700'); | |
| }); | |
| tab.classList.add('active', 'bg-blue-600', 'text-white'); | |
| tab.classList.remove('bg-gray-100', 'text-gray-700'); | |
| // Show selected content | |
| const contentId = tab.getAttribute('data-content') + '-content'; | |
| document.querySelectorAll('#doc-content, #diagram-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| document.getElementById(contentId).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Highlight code line | |
| function highlightCodeLine(fileId, lineNumber) { | |
| // First switch to the correct file tab | |
| document.querySelectorAll('.code-file-tab').forEach(tab => { | |
| if (tab.getAttribute('data-file') === fileId) { | |
| tab.click(); | |
| } | |
| }); | |
| // Then highlight the line (simplified for demo) | |
| const fileContent = document.getElementById(fileId); | |
| const codeLines = fileContent.querySelector('code').textContent.split('\n'); | |
| // Clear previous highlights | |
| fileContent.querySelectorAll('.vulnerable-line').forEach(el => { | |
| el.classList.remove('vulnerable-line'); | |
| }); | |
| // Highlight the line (in a real implementation would need more sophisticated line targeting) | |
| const codeElement = fileContent.querySelector('code'); | |
| const lineElements = codeElement.querySelectorAll('.hljs-ln-line'); | |
| if (lineElements.length >= lineNumber) { | |
| lineElements[lineNumber - 1].classList.add('vulnerable-line'); | |
| // Scroll to the line | |
| lineElements[lineNumber - 1].scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| } | |
| } | |
| // Scroll to requirement | |
| function scrollToRequirement(id) { | |
| const element = document.getElementById(id); | |
| if (element) { | |
| // Switch to doc content if needed | |
| document.querySelector('[data-content="doc"]').click(); | |
| // Scroll to element | |
| element.scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| // Add temporary highlight | |
| element.style.backgroundColor = '#fef3c7'; | |
| setTimeout(() => { | |
| element.style.backgroundColor = ''; | |
| }, 2000); | |
| } | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=capta1n/projectdetail3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |