Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>风险项目告警系统</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid@10/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/atom-one-dark.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .risk-highlight { | |
| background-color: #fef3c7; | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| font-weight: 500; | |
| } | |
| .vulnerable-line { | |
| background-color: #fee2e2; | |
| display: inline-block; | |
| width: 100%; | |
| } | |
| .architecture-diagram { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.5rem; | |
| overflow: auto; | |
| background-color: white; | |
| } | |
| .threat-model { | |
| height: 400px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.5rem; | |
| background-color: white; | |
| } | |
| .code-container { | |
| height: 500px; | |
| overflow: auto; | |
| } | |
| .payload-block { | |
| font-family: monospace; | |
| background-color: #1e293b; | |
| color: #f8fafc; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .request-flow { | |
| position: relative; | |
| height: 200px; | |
| margin: 2rem 0; | |
| } | |
| .flow-line { | |
| position: absolute; | |
| height: 2px; | |
| background-color: #3b82f6; | |
| top: 50%; | |
| left: 0; | |
| right: 0; | |
| transform: translateY(-50%); | |
| } | |
| .flow-node { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background-color: white; | |
| border: 2px solid #3b82f6; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .flow-arrow { | |
| position: absolute; | |
| top: 50%; | |
| right: -10px; | |
| width: 0; | |
| height: 0; | |
| border-top: 10px solid transparent; | |
| border-bottom: 10px solid transparent; | |
| border-left: 10px solid #3b82f6; | |
| transform: translateY(-50%); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .alert-item { | |
| transition: all 0.3s ease; | |
| } | |
| .alert-item:hover { | |
| transform: translateX(5px); | |
| } | |
| .risk-critical { | |
| border-left: 4px solid #ef4444; | |
| } | |
| .risk-high { | |
| border-left: 4px solid #f97316; | |
| } | |
| .risk-medium { | |
| border-left: 4px solid #f59e0b; | |
| } | |
| .risk-low { | |
| border-left: 4px solid #10b981; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- 主内容区 --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- 顶部导航 --> | |
| <header class="bg-white shadow-sm z-10"> | |
| <div class="px-6 py-4 flex items-center justify-between"> | |
| <h1 class="text-xl font-semibold text-gray-800">风险项目告警系统</h1> | |
| <div class="flex items-center space-x-4"> | |
| <button id="riskProjectsBtn" class="flex items-center space-x-2 bg-indigo-50 text-indigo-600 px-4 py-2 rounded-lg hover:bg-indigo-100 transition"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| <span>风险项目</span> | |
| </button> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full cursor-pointer"> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 主内容 --> | |
| <main class="flex-1 overflow-auto p-6"> | |
| <!-- 项目详情 --> | |
| <div id="projectDetail" class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-800">支付宝国补项目</h2> | |
| <p class="text-gray-500">最后更新时间: 2023-06-15 14:30</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-medium">高风险</span> | |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">越权</span> | |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">SQL注入</span> | |
| </div> | |
| </div> | |
| <!-- 选项卡导航 --> | |
| <div class="border-b border-gray-200 mb-6"> | |
| <nav class="-mb-px flex space-x-8"> | |
| <button data-tab="requirements" class="tab-btn whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-indigo-500 text-indigo-600">需求分析</button> | |
| <button data-tab="code" class="tab-btn whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">代码分析</button> | |
| <button data-tab="testing" class="tab-btn whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">安全测试</button> | |
| <button data-tab="release" class="tab-btn whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">发布检查</button> | |
| <button data-tab="production" class="tab-btn whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">线上监控</button> | |
| </nav> | |
| </div> | |
| <!-- 需求分析内容 --> | |
| <div id="requirements" class="tab-content active"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- 需求文档内容 --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">需求文档内容</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg max-h-96 overflow-auto"> | |
| <p class="mb-3">支付宝国补项目旨在为政府补贴资金发放提供数字化解决方案，通过支付宝平台实现补贴资金的精准发放和管理。</p> | |
| <p class="mb-3"><span class="risk-highlight">项目涉及用户身份认证、补贴资格审核、资金发放、使用监控等多个环节。</span>系统需要与政府数据库对接获取补贴人员名单，并通过支付宝账户完成资金发放。</p> | |
| <p class="mb-3">技术架构采用微服务设计，主要包含以下组件：用户服务、认证服务、补贴审核服务、资金发放服务、监控服务。</p> | |
| <p class="mb-3"><span class="risk-highlight">用户服务负责处理用户注册、登录和个人信息管理。认证服务对接政府数据库验证用户补贴资格。</span>补贴审核服务处理补贴申请和审批流程。</p> | |
| <p class="mb-3">资金发放服务负责将补贴资金转入用户支付宝账户。监控服务跟踪补贴资金使用情况并向政府监管部门提供报表。</p> | |
| <p class="mb-3">系统预计日处理交易量100万笔，峰值QPS要求达到500。数据存储采用MySQL集群和Redis缓存。</p> | |
| <p class="mb-3"><span class="risk-highlight">安全要求包括：用户身份严格验证、补贴资格防篡改、资金发放防重放、敏感数据加密存储。</span></p> | |
| <p class="mb-3">项目计划开发周期3个月，测试周期1个月，预计2023年9月上线。</p> | |
| </div> | |
| </div> | |
| <!-- 技术架构图 --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">技术架构图</h3> | |
| <div class="architecture-diagram p-4"> | |
| <div class="mermaid"> | |
| graph TD | |
| A[用户端] --> B[API Gateway] | |
| B --> C[用户服务] | |
| B --> D[认证服务] | |
| B --> E[补贴审核服务] | |
| B --> F[资金发放服务] | |
| B --> G[监控服务] | |
| C --> H[MySQL集群] | |
| D --> I[政府数据库] | |
| E --> H | |
| F --> J[支付宝接口] | |
| G --> K[Redis缓存] | |
| G --> L[监管报表] | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 威胁建模 --> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">威胁建模分析</h3> | |
| <div class="threat-model p-4" id="threatModel"> | |
| <!-- 交互式威胁建模图将通过JavaScript动态生成 --> | |
| </div> | |
| </div> | |
| <!-- 安全风险分析 --> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">安全风险分析</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">业务场景</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险点</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险类型</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">整改建议</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">补贴资格审核</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">认证服务未验证调用方身份</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">越权访问</td> | |
| <td class="px-6 py-4 text-sm text-gray-900">增加服务间认证机制，使用双向TLS或JWT验证</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">资金发放</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">发放请求参数未过滤</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">SQL注入</td> | |
| <td class="px-6 py-4 text-sm text-gray-900">使用参数化查询或ORM框架，对输入参数进行严格验证</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">用户信息管理</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">敏感数据未加密存储</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数据泄露</td> | |
| <td class="px-6 py-4 text-sm text-gray-900">对身份证号等敏感信息进行加密存储，使用AES-256算法</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 代码分析内容 --> | |
| <div id="code" class="tab-content"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- 代码文件树 --> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">代码文件结构</h3> | |
| <div class="space-y-1"> | |
| <div class="cursor-pointer hover:bg-gray-100 p-2 rounded"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>src</span> | |
| </div> | |
| <div class="ml-6 mt-1 space-y-1"> | |
| <div class="flex items-center hover:bg-gray-100 p-1 rounded"> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>controllers</span> | |
| </div> | |
| <div class="flex items-center hover:bg-gray-100 p-1 rounded"> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>services</span> | |
| </div> | |
| <div class="flex items-center hover:bg-gray-100 p-1 rounded"> | |
| <i class="fas fa-folder text-yellow-400 mr-2"></i> | |
| <span>models</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="cursor-pointer hover:bg-gray-100 p-2 rounded"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-code text-blue-400 mr-2"></i> | |
| <span>app.js</span> | |
| </div> | |
| </div> | |
| <div class="cursor-pointer hover:bg-gray-100 p-2 rounded bg-red-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-code text-blue-400 mr-2"></i> | |
| <span class="font-medium">subsidyController.js</span> | |
| <span class="ml-auto bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">2漏洞</span> | |
| </div> | |
| </div> | |
| <div class="cursor-pointer hover:bg-gray-100 p-2 rounded"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-code text-blue-400 mr-2"></i> | |
| <span>authController.js</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 代码内容 --> | |
| <div class="lg:col-span-2"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">代码内容</h3> | |
| <div class="code-container bg-gray-800 rounded-lg overflow-hidden"> | |
| <pre><code class="language-javascript hljs">const db = require('../models/database'); | |
| const subsidyService = require('../services/subsidyService'); | |
| class SubsidyController { | |
| // 获取补贴资格 | |
| async getSubsidyStatus(req, res) { | |
| try { | |
| const userId = req.params.userId; | |
| // 漏洞: SQL注入风险 | |
| const query = `SELECT * FROM subsidies WHERE user_id = ${userId}`; | |
| const result = await db.query(query); | |
| if (result.rows.length > 0) { | |
| res.json({ eligible: true, amount: result.rows[0].amount }); | |
| } else { | |
| res.json({ eligible: false }); | |
| } | |
| } catch (error) { | |
| res.status(500).json({ error: error.message }); | |
| } | |
| } | |
| // 发放补贴 | |
| async distributeSubsidy(req, res) { | |
| try { | |
| const { userId, amount } = req.body; | |
| // 漏洞: 未验证管理员权限 | |
| if (!req.session.user || req.session.user.role !== 'admin') { | |
| return res.status(403).json({ error: '无权操作' }); | |
| } | |
| const success = await subsidyService.distribute(userId, amount); | |
| if (success) { | |
| res.json({ success: true }); | |
| } else { | |
| res.status(400).json({ error: '发放失败' }); | |
| } | |
| } catch (error) { | |
| res.status(500).json({ error: error.message }); | |
| } | |
| } | |
| } | |
| module.exports = new SubsidyController();</code></pre> | |
| </div> | |
| <!-- 漏洞详情 --> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">安全风险分析</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-red-50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium text-red-800">SQL注入漏洞</h4> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">高危</span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-700">文件: src/controllers/subsidyController.js</p> | |
| <p class="mt-1 text-sm text-gray-700">行号: 8-9</p> | |
| <p class="mt-2 text-gray-700">直接拼接用户输入到SQL查询中，攻击者可构造恶意输入执行任意SQL命令。</p> | |
| <div class="mt-3"> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">查看修复建议 <i class="fas fa-chevron-down ml-1"></i></button> | |
| <div class="mt-2 bg-white p-3 rounded-lg border border-gray-200 hidden"> | |
| <p class="text-sm text-gray-700">建议使用参数化查询或ORM框架:</p> | |
| <pre class="mt-2 bg-gray-800 text-gray-100 p-2 rounded text-sm">const query = 'SELECT * FROM subsidies WHERE user_id = $1'; | |
| const result = await db.query(query, [userId]);</pre> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-orange-50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium text-orange-800">越权访问漏洞</h4> | |
| <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-full">中危</span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-700">文件: src/controllers/subsidyController.js</p> | |
| <p class="mt-1 text-sm text-gray-700">行号: 22-24</p> | |
| <p class="mt-2 text-gray-700">权限检查在业务逻辑之后执行，存在时间差攻击风险。</p> | |
| <div class="mt-3"> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">查看修复建议 <i class="fas fa-chevron-down ml-1"></i></button> | |
| <div class="mt-2 bg-white p-3 rounded-lg border border-gray-200 hidden"> | |
| <p class="text-sm text-gray-700">建议将权限检查移到方法开头:</p> | |
| <pre class="mt-2 bg-gray-800 text-gray-100 p-2 rounded text-sm">async distributeSubsidy(req, res) { | |
| if (!req.session.user || req.session.user.role !== 'admin') { | |
| return res.status(403).json({ error: '无权操作' }); | |
| } | |
| // 其余业务逻辑... | |
| }</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 安全测试内容 --> | |
| <div id="testing" class="tab-content"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- 接口攻击可视化 --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">接口攻击过程</h3> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="request-flow"> | |
| <div class="flow-line"></div> | |
| <div class="flow-node" style="left: 10%;">攻击者</div> | |
| <div class="flow-arrow" style="left: 25%;"></div> | |
| <div class="flow-node" style="left: 40%;">API Gateway</div> | |
| <div class="flow-arrow" style="left: 55%;"></div> | |
| <div class="flow-node" style="left: 70%;">Subsidy Service</div> | |
| <div class="flow-arrow" style="left: 85%;"></div> | |
| <div class="flow-node" style="left: 90%;">Database</div> | |
| </div> | |
| <div class="text-center text-sm text-gray-500 mt-4"> | |
| <p>攻击者构造恶意SQL注入Payload，通过API Gateway直接访问补贴服务，最终在数据库执行恶意SQL命令。</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payload展示 --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">攻击Payload</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">SQL注入攻击</h4> | |
| <div class="payload-block"> | |
| GET /api/subsidy/status/12345%27%20OR%201%3D1%3B-- HTTP/1.1 | |
| Host: api.example.com | |
| Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="text-sm bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700">修复建议</button> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">越权攻击</h4> | |
| <div class="payload-block"> | |
| POST /api/subsidy/distribute HTTP/1.1 | |
| Host: api.example.com | |
| Content-Type: application/json | |
| { | |
| "userId": "67890", | |
| "amount": 1000 | |
| } | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="text-sm bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700">修复建议</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 测试结果分析 --> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">安全测试结果</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险接口</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">攻击类型</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险描述</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">GET /api/subsidy/status/{userId}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">SQL注入</td> | |
| <td class="px-6 py-4 text-sm text-gray-900">通过构造恶意userId参数可执行任意SQL命令</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">未修复</span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">POST /api/subsidy/distribute</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">越权访问</td> | |
| <td class="px-6 py-4 text-sm text-gray-900">普通用户可模拟管理员请求发放补贴</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">修复中</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 发布检查内容 --> | |
| <div id="release" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-6">发布安全检查</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">未修复风险清单</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险类型</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发现环节</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险描述</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">严重程度</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SQL注入</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">代码分析</td> | |
| <td class="px-6 py-4 text-sm text-gray-900">补贴状态查询接口存在SQL注入漏洞</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">高危</span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">越权访问</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">需求分析</td> | |
| <td class="px-6 py-4 text-sm text-gray-900">补贴发放接口权限检查不充分</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><span class="px-2 py-1 bg-orange-100 text-orange-800 rounded-full text-xs">中危</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">发布决策</h4> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-triangle text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| 当前存在未修复的高危漏洞，建议修复后再发布。如需强制发布，请填写风险接受理由并由安全负责人审批。 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 线上监控内容 --> | |
| <div id="production" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-6">线上安全监控</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-700 mb-2">安全事件统计</h4> | |
| <div class="flex items-center justify-between mt-4"> | |
| <div class="text-center"> | |
| <p class="text-3xl font-bold text-red-500">2</p> | |
| <p class="text-sm text-gray-500">高危事件</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-3xl font-bold text-orange-500">5</p> | |
| <p class="text-sm text-gray-500">中危事件</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-3xl font-bold text-blue-500">12</p> | |
| <p class="text-sm text-gray-500">低危事件</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-700 mb-2">漏洞修复率</h4> | |
| <div class="mt-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">已修复</span> | |
| <span class="text-sm font-medium text-gray-700">75%</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: 75%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">近期安全事件</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">事件类型</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-06-10 14:23</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">SQL注入攻击</td> | |
| <td class="px-6 py-4 text-sm text-gray-900">检测到针对补贴状态查询接口的SQL注入尝试</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已防御</span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-06-08 09:45</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-orange-600">越权访问</td> | |
| <td class="px-6 py-4 text-sm text-gray-900">普通用户尝试调用补贴发放接口</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">已拦截</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- 告警中心侧边栏 --> | |
| <div class="w-80 border-l border-gray-200 bg-white flex flex-col"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-900">告警中心</h3> | |
| <p class="text-sm text-gray-500">实时风险项目监控</p> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-2"> | |
| <div class="space-y-2"> | |
| <div class="alert-item p-3 rounded-lg bg-white shadow-sm risk-critical cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-exclamation-circle text-red-500"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <p class="text-sm font-medium text-gray-900">微信支付跨境项目</p> | |
| <p class="text-sm text-gray-500">在代码和发布环节存在XSS和CSRF风险</p> | |
| <p class="text-xs text-gray-400 mt-1">刚刚</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="alert-item p-3 rounded-lg bg-white shadow-sm risk-high cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-exclamation-triangle text-orange-500"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <p class="text-sm font-medium text-gray-900">阿里云数据中台</p> | |
| <p class="text-sm text-gray-500">在需求和测试环节存在数据泄露风险</p> | |
| <p class="text-xs text-gray-400 mt-1">5分钟前</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="alert-item p-3 rounded-lg bg-white shadow-sm risk-medium cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-exclamation text-yellow-500"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <p class="text-sm font-medium text-gray-900">京东金融风控系统</p> | |
| <p class="text-sm text-gray-500">在代码环节存在信息泄露风险</p> | |
| <p class="text-xs text-gray-400 mt-1">15分钟前</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="alert-item p-3 rounded-lg bg-white shadow-sm risk-low cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-info-circle text-green-500"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <p class="text-sm font-medium text-gray-900">百度智能客服</p> | |
| <p class="text-sm text-gray-500">在需求环节存在日志敏感信息风险</p> | |
| <p class="text-xs text-gray-400 mt-1">30分钟前</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 风险项目弹窗 --> | |
| <div id="riskProjectsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between"> | |
| <h3 class="text-lg font-medium text-gray-900">风险项目列表</h3> | |
| <button id="closeRiskProjectsModal" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-4"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目名称</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险环节</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险类型</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">严重程度</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">支付宝国补项目</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">需求, 代码</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">越权, SQL注入</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">高危</span></td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><button class="text-indigo-600 hover:text-indigo-900">查看详情</button></td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">微信支付跨境项目</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">代码, 发布</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">XSS, CSRF</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">高危</span></td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><button class="text-indigo-600 hover:text-indigo-900">查看详情</button></td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">阿里云数据中台</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">需求, 测试</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数据泄露</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><span class="px-2 py-1 bg-orange-100 text-orange-800 rounded-full text-xs">中危</span></td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><button class="text-indigo-600 hover:text-indigo-900">查看详情</button></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 border-t border-gray-200 flex justify-end"> | |
| <button id="closeRiskProjectsModal2" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200">关闭</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // 初始化Mermaid | |
| mermaid.initialize({ | |
| startOnLoad: true, | |
| theme: 'default', | |
| flowchart: { | |
| useMaxWidth: false, | |
| htmlLabels: true | |
| } | |
| }); | |
| // 初始化代码高亮 | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| document.querySelectorAll('pre code').forEach((block) => { | |
| hljs.highlightElement(block); | |
| }); | |
| }); | |
| // 选项卡切换 | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const tabId = button.getAttribute('data-tab'); | |
| // 更新按钮状态 | |
| tabButtons.forEach(btn => { | |
| btn.classList.remove('border-indigo-500', 'text-indigo-600'); | |
| btn.classList.add('border-transparent', 'text-gray-500'); | |
| }); | |
| button.classList.remove('border-transparent', 'text-gray-500'); | |
| button.classList.add('border-indigo-500', 'text-indigo-600'); | |
| // 更新内容显示 | |
| tabContents.forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // 风险项目弹窗 | |
| const riskProjectsBtn = document.getElementById('riskProjectsBtn'); | |
| const riskProjectsModal = document.getElementById('riskProjectsModal'); | |
| const closeButtons = document.querySelectorAll('#closeRiskProjectsModal, #closeRiskProjectsModal2'); | |
| riskProjectsBtn.addEventListener('click', () => { | |
| riskProjectsModal.classList.remove('hidden'); | |
| }); | |
| closeButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| riskProjectsModal.classList.add('hidden'); | |
| }); | |
| }); | |
| // 修复建议展开/收起 | |
| document.querySelectorAll('.bg-red-50 button, .bg-orange-50 button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const suggestion = button.nextElementSibling; | |
| if (suggestion.classList.contains('hidden')) { | |
| suggestion.classList.remove('hidden'); | |
| button.innerHTML = button.innerHTML.replace('chevron-down', 'chevron-up'); | |
| } else { | |
| suggestion.classList.add('hidden'); | |
| button.innerHTML = button.innerHTML.replace('chevron-up', 'chevron-down'); | |
| } | |
| }); | |
| }); | |
| // 威胁建模图交互 | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const threatModelContainer = document.getElementById('threatModel'); | |
| // 这里应该是动态生成威胁建模图的代码 | |
| // 简化的示例，实际应用中应该使用专业的图表库如D3.js或GoJS | |
| threatModelContainer.innerHTML = ` | |
| <div class="p-4"> | |
| <div class="text-center text-gray-500 mb-4"> | |
| <p>交互式威胁建模图 - 点击节点查看风险详情</p> | |
| </div> | |
| <div class="relative h-64 bg-gray-100 rounded-lg flex items-center justify-center"> | |
| <div class="absolute top-1/4 left-1/4 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-blue-50 border-2 border-blue-300" onclick="showThreatDetail('用户服务')"> | |
| <span class="text-xs font-medium">用户服务</span> | |
| </div> | |
| <div class="absolute top-1/4 right-1/4 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-blue-50 border-2 border-red-300" onclick="showThreatDetail('认证服务')"> | |
| <span class="text-xs font-medium">认证服务</span> | |
| </div> | |
| <div class="absolute bottom-1/3 left-1/3 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-blue-50 border-2 border-yellow-300" onclick="showThreatDetail('补贴审核')"> | |
| <span class="text-xs font-medium">补贴审核</span> | |
| </div> | |
| <div class="absolute bottom-1/3 right-1/3 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-blue-50 border-2 border-green-300" onclick="showThreatDetail('资金发放')"> | |
| <span class="text-xs font-medium">资金发放</span> | |
| </div> | |
| <div class="absolute top-1/2 left-1/2 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-blue-50 border-2 border-purple-300" onclick="showThreatDetail('监控服务')"> | |
| <span class="text-xs font-medium">监控服务</span> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| // 显示威胁详情函数 | |
| function showThreatDetail(component) { | |
| alert(`查看 ${component} 的风险详情\n\n实际应用中这里会显示组件详细的风险分析数据。`); | |
| } | |
| </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/project-detail" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |