Hugging Face's logo

Spaces:
capta1n
/
projectdetail2
Running

App Files Community
projectdetail2 / index.html
capta1n's picture
capta1n
Add 3 files
68911aa verified
raw
history blame contribute delete
71 kB
 <!DOCTYPE html>
<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;
}
.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;
}
.threat-node {
cursor: pointer;
transition: all 0.3s ease;
}
.threat-node:hover {
transform: scale(1.05);
}
.attack-animation {
position: relative;
height: 300px;
background-color: #f8fafc;
border-radius: 0.5rem;
overflow: hidden;
}
.attack-path {
position: absolute;
height: 2px;
background-color: #3b82f6;
top: 50%;
left: 0;
width: 0;
transition: width 1s ease-in-out;
}
.attack-point {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #ef4444;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
</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="bg-gray-50 p-4 rounded-lg max-h-96 overflow-auto">
<div class="mb-4">
<h4 class="font-medium text-gray-700 mb-2">关键风险点</h4>
<ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
<li>用户身份认证环节缺乏多因素认证机制</li>
<li>补贴资格审核接口未实现防重放攻击保护</li>
<li>资金发放服务缺乏交易签名验证机制</li>
<li>敏感数据存储未明确加密算法要求</li>
</ul>
</div>
<div>
<h4 class="font-medium text-gray-700 mb-2">安全建议</h4>
<ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
<li>增加短信验证码或生物识别等多因素认证方式</li>
<li>为关键接口添加时间戳和随机数防重放机制</li>
<li>实现基于数字签名的交易验证流程</li>
<li>明确敏感数据加密标准，采用AES-256算法</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 技术架构图 -->
<div class="mt-6 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="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>
<h3 class="text-lg font-medium text-gray-900 mb-4">架构安全分析</h3>
<div class="bg-gray-50 p-4 rounded-lg h-full">
<div class="mb-4">
<h4 class="font-medium text-gray-700 mb-2">架构风险点</h4>
<ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
<li>API Gateway缺乏统一的认证授权机制</li>
<li>微服务间通信未采用双向TLS加密</li>
<li>数据库访问缺乏细粒度权限控制</li>
<li>监控服务日志存储未考虑脱敏处理</li>
</ul>
</div>
<div>
<h4 class="font-medium text-gray-700 mb-2">改进建议</h4>
<ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
<li>在API Gateway实现统一的JWT验证机制</li>
<li>为服务间通信配置双向TLS认证</li>
<li>按最小权限原则配置数据库访问权限</li>
<li>实现日志敏感信息自动脱敏功能</li>
</ul>
</div>
</div>
</div>
</div>
<!-- STRIDE威胁建模 -->
<div class="mt-8">
<h3 class="text-lg font-medium text-gray-900 mb-4">STRIDE威胁建模</h3>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="threat-model p-4" id="threatModel">
<!-- 交互式威胁建模图将通过JavaScript动态生成 -->
</div>
<div>
<div class="bg-gray-50 p-4 rounded-lg h-full">
<h4 class="font-medium text-gray-700 mb-3">威胁分析结果</h4>
<div id="threatDetail" class="text-sm text-gray-700">
<p class="text-gray-500 italic">点击左侧图中的组件查看详细威胁分析</p>
</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 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-2 gap-6">
<!-- 代码内容 -->
<div>
<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>
<!-- 漏洞详情 -->
<div>
<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 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="attack-animation" id="attackAnimation">
<div class="attack-path" id="attackPath"></div>
<div class="attack-point" id="attackPoint1" style="left: 20%;"></div>
<div class="attack-point" id="attackPoint2" style="left: 40%;"></div>
<div class="attack-point" id="attackPoint3" style="left: 60%;"></div>
<div class="attack-point" id="attackPoint4" style="left: 80%;"></div>
<div class="absolute top-1/4 left-1/4 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center border-2 border-gray-300">
<span class="text-xs font-medium">攻击者</span>
</div>
<div class="absolute top-1/4 left-2/4 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center border-2 border-gray-300">
<span class="text-xs font-medium">API</span>
</div>
<div class="absolute top-1/4 left-3/4 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center border-2 border-gray-300">
<span class="text-xs font-medium">服务</span>
</div>
<div class="absolute top-3/4 left-1/4 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center border-2 border-gray-300">
<span class="text-xs font-medium">数据库</span>
</div>
<div class="absolute top-3/4 left-3/4 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center border-2 border-gray-300">
<span class="text-xs font-medium">日志</span>
</div>
</div>
<div class="text-center mt-4">
<button id="startAttackBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">开始攻击演示</button>
</div>
</div>
</div>
<!-- 攻击分析 -->
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">攻击分析</h3>
<div class="bg-gray-50 p-4 rounded-lg h-full">
<div id="attackAnalysis">
<h4 class="font-medium text-gray-700 mb-2">攻击步骤</h4>
<ol class="list-decimal pl-5 space-y-2 text-sm text-gray-700">
<li class="opacity-50">攻击者构造恶意SQL注入Payload</li>
<li class="opacity-50">Payload通过API Gateway进入系统</li>
<li class="opacity-50">服务层处理请求时执行恶意SQL</li>
<li class="opacity-50">数据库返回敏感数据给攻击者</li>
</ol>
<h4 class="font-medium text-gray-700 mt-4 mb-2">防御措施</h4>
<ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
<li>在API Gateway实现输入验证和过滤</li>
<li>使用参数化查询防止SQL注入</li>
<li>配置数据库最小权限原则</li>
<li>实现请求日志审计和分析</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Payload展示 -->
<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
<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>
<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>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">Payload分析</h3>
<div class="bg-gray-50 p-4 rounded-lg h-full">
<div class="mb-4">
<h4 class="font-medium text-gray-700 mb-2">SQL注入Payload分析</h4>
<p class="text-sm text-gray-700">该Payload通过构造恶意userId参数，利用单引号闭合SQL语句，添加OR 1=1条件使查询始终返回真，从而绕过认证获取所有补贴数据。</p>
</div>
<div>
<h4 class="font-medium text-gray-700 mb-2">越权攻击Payload分析</h4>
<p class="text-sm text-gray-700">该Payload模拟管理员请求格式，尝试直接调用补贴发放接口。由于权限检查不充分，普通用户可能成功执行资金发放操作。</p>
</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="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div>
<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="space-y-2">
<div class="flex items-center">
<input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded" checked disabled>
<label class="ml-2 block text-sm text-gray-700">代码静态扫描完成</label>
</div>
<div class="flex items-center">
<input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded" checked disabled>
<label class="ml-2 block text-sm text-gray-700">安全测试用例覆盖</label>
</div>
<div class="flex items-center">
<input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded" disabled>
<label class="ml-2 block text-sm text-gray-700">高危漏洞修复验证</label>
</div>
<div class="flex items-center">
<input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded" checked disabled>
<label class="ml-2 block text-sm text-gray-700">安全基线配置检查</label>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900 mb-6">发布决策</h3>
<div class="bg-gray-50 p-4 rounded-lg h-full">
<div class="mb-6">
<h4 class="font-medium text-gray-700 mb-2">风险评分</h4>
<div class="flex items-center">
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-red-600 h-2.5 rounded-full" style="width: 75%"></div>
</div>
<span class="ml-2 text-sm font-medium text-gray-700">7.5/10</span>
</div>
<p class="mt-2 text-sm text-gray-500">高风险阈值: 5.0</p>
</div>
<div class="mb-6">
<h4 class="font-medium text-gray-700 mb-2">发布建议</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>
<h4 class="font-medium text-gray-700 mb-2">风险接受</h4>
<textarea class="w-full border border-gray-300 rounded-md p-2 text-sm" rows="3" placeholder="请输入风险接受理由..."></textarea>
<div class="mt-2 flex justify-end">
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">提交审批</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 线上监控内容 -->
<div id="production" 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-6">线上安全监控</h3>
<div class="space-y-6">
<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>
<h4 class="font-medium text-gray-700 mb-3">安全事件趋势</h4>
<div class="bg-white p-4 rounded-lg border border-gray-200 h-64 flex items-center justify-center">
<p class="text-gray-500 italic">安全事件趋势图表区域</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900 mb-6">近期安全事件</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">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>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-06-05 16:12</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-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 class="mt-6">
<h4 class="font-medium text-gray-700 mb-3">安全告警配置</h4>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="space-y-2">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-700">SQL注入攻击告警</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-700">越权访问告警</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-700">异常登录告警</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</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');
}
});
});
// STRIDE威胁建模图交互
document.addEventListener('DOMContentLoaded', () => {
const threatModelContainer = document.getElementById('threatModel');
threatModelContainer.innerHTML = `
<div class="p-4">
<div class="text-center text-gray-500 mb-4">
<p>STRIDE威胁建模 - 点击组件节点查看风险详情</p>
</div>
<div class="relative h-64 bg-gray-100 rounded-lg">
<!-- 用户服务 -->
<div class="threat-node absolute top-1/4 left-1/4 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center border-2 border-blue-300" onclick="showThreatDetail('用户服务', 'Spoofing', '缺乏强身份认证机制，可能被冒充')">
<span class="text-xs font-medium">用户服务</span>
</div>
<!-- 认证服务 -->
<div class="threat-node absolute top-1/4 right-1/4 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center border-2 border-red-300" onclick="showThreatDetail('认证服务', 'Tampering', '认证令牌未签名，可能被篡改')">
<span class="text-xs font-medium">认证服务</span>
</div>
<!-- 补贴审核 -->
<div class="threat-node absolute bottom-1/3 left-1/3 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center border-2 border-yellow-300" onclick="showThreatDetail('补贴审核', 'Repudiation', '操作日志不完整，无法追溯')">
<span class="text-xs font-medium">补贴审核</span>
</div>
<!-- 资金发放 -->
<div class="threat-node absolute bottom-1/3 right-1/3 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center border-2 border-green-300" onclick="showThreatDetail('资金发放', 'Information Disclosure', '交易详情未加密，可能泄露')">
<span class="text-xs font-medium">资金发放</span>
</div>
<!-- 监控服务 -->
<div class="threat-node absolute top-1/2 left-1/2 w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center border-2 border-purple-300" onclick="showThreatDetail('监控服务', 'Denial of Service', '缺乏限流机制，可能被攻击')">
<span class="text-xs font-medium">监控服务</span>
</div>
<!-- 连接线 -->
<svg class="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
<!-- 用户服务 -> 认证服务 -->
<path d="M25% 25% L50% 25%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
<!-- 认证服务 -> 补贴审核 -->
<path d="M75% 25% L75% 40% L50% 40% L50% 55%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
<!-- 补贴审核 -> 资金发放 -->
<path d="M50% 55% L75% 55%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
<!-- 资金发放 -> 监控服务 -->
<path d="M75% 55% L50% 55% L50% 65%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
</marker>
</defs>
</svg>
</div>
</div>
`;
});
// 显示威胁详情函数
function showThreatDetail(component, threatType, threatDesc) {
const threatDetail = document.getElementById('threatDetail');
threatDetail.innerHTML = `
<div class="mb-3">
<h5 class="font-medium text-gray-700">组件名称</h5>
<p>${component}</p>
</div>
<div class="mb-3">
<h5 class="font-medium text-gray-700">威胁类型 (STRIDE)</h5>
<p class="text-red-600">${threatType}</p>
</div>
<div class="mb-3">
<h5 class="font-medium text-gray-700">威胁描述</h5>
<p>${threatDesc}</p>
</div>
<div>
<h5 class="font-medium text-gray-700">缓解措施</h5>
<ul class="list-disc pl-5 mt-1 text-sm">
<li>实现多因素身份验证</li>
<li>使用数字签名保护关键数据</li>
<li>完善审计日志记录</li>
</ul>
</div>
`;
}
// 攻击演示动画
document.getElementById('startAttackBtn').addEventListener('click', function() {
const attackPath = document.getElementById('attackPath');
const attackPoints = [
document.getElementById('attackPoint1'),
document.getElementById('attackPoint2'),
document.getElementById('attackPoint3'),
document.getElementById('attackPoint4')
];
const attackSteps = document.querySelectorAll('#attackAnalysis ol li');
// 重置状态
attackPath.style.width = '0';
attackPoints.forEach(point => point.style.opacity = '0');
attackSteps.forEach(step => step.classList.add('opacity-50'));
// 开始动画
attackPath.style.width = '100%';
// 分步显示攻击点和步骤
setTimeout(() => {
attackPoints[0].style.opacity = '1';
attackSteps[0].classList.remove('opacity-50');
}, 500);
setTimeout(() => {
attackPoints[1].style.opacity = '1';
attackSteps[1].classList.remove('opacity-50');
}, 1000);
setTimeout(() => {
attackPoints[2].style.opacity = '1';
attackSteps[2].classList.remove('opacity-50');
}, 1500);
setTimeout(() => {
attackPoints[3].style.opacity = '1';
attackSteps[3].classList.remove('opacity-50');
}, 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/projectdetail2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>