Hugging Face's logo

Spaces:
capta1n
/
projectdetail2
Running

App Files Community
capta1n commited on
Commit
68911aa
·
verified ·
1 Parent(s): 7a776f5

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1054 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Projectdetail2
3
- emoji: 📚
4
- colorFrom: yellow
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: projectdetail2
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1054 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>风险项目告警系统</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ .risk-highlight {
14
+ background-color: #fef3c7;
15
+ padding: 2px 4px;
16
+ border-radius: 4px;
17
+ font-weight: 500;
18
+ }
19
+ .vulnerable-line {
20
+ background-color: #fee2e2;
21
+ display: inline-block;
22
+ width: 100%;
23
+ }
24
+ .architecture-diagram {
25
+ border: 1px solid #e5e7eb;
26
+ border-radius: 0.5rem;
27
+ overflow: auto;
28
+ background-color: white;
29
+ }
30
+ .threat-model {
31
+ height: 400px;
32
+ border: 1px solid #e5e7eb;
33
+ border-radius: 0.5rem;
34
+ background-color: white;
35
+ }
36
+ .code-container {
37
+ height: 500px;
38
+ overflow: auto;
39
+ }
40
+ .payload-block {
41
+ font-family: monospace;
42
+ background-color: #1e293b;
43
+ color: #f8fafc;
44
+ padding: 1rem;
45
+ border-radius: 0.5rem;
46
+ margin-bottom: 1rem;
47
+ }
48
+ .request-flow {
49
+ position: relative;
50
+ height: 200px;
51
+ margin: 2rem 0;
52
+ }
53
+ .flow-line {
54
+ position: absolute;
55
+ height: 2px;
56
+ background-color: #3b82f6;
57
+ top: 50%;
58
+ left: 0;
59
+ right: 0;
60
+ transform: translateY(-50%);
61
+ }
62
+ .flow-node {
63
+ position: absolute;
64
+ top: 50%;
65
+ transform: translateY(-50%);
66
+ width: 80px;
67
+ height: 80px;
68
+ border-radius: 50%;
69
+ background-color: white;
70
+ border: 2px solid #3b82f6;
71
+ display: flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ font-weight: bold;
75
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
76
+ }
77
+ .flow-arrow {
78
+ position: absolute;
79
+ top: 50%;
80
+ right: -10px;
81
+ width: 0;
82
+ height: 0;
83
+ border-top: 10px solid transparent;
84
+ border-bottom: 10px solid transparent;
85
+ border-left: 10px solid #3b82f6;
86
+ transform: translateY(-50%);
87
+ }
88
+ .tab-content {
89
+ display: none;
90
+ }
91
+ .tab-content.active {
92
+ display: block;
93
+ }
94
+ .risk-critical {
95
+ border-left: 4px solid #ef4444;
96
+ }
97
+ .risk-high {
98
+ border-left: 4px solid #f97316;
99
+ }
100
+ .risk-medium {
101
+ border-left: 4px solid #f59e0b;
102
+ }
103
+ .risk-low {
104
+ border-left: 4px solid #10b981;
105
+ }
106
+ .threat-node {
107
+ cursor: pointer;
108
+ transition: all 0.3s ease;
109
+ }
110
+ .threat-node:hover {
111
+ transform: scale(1.05);
112
+ }
113
+ .attack-animation {
114
+ position: relative;
115
+ height: 300px;
116
+ background-color: #f8fafc;
117
+ border-radius: 0.5rem;
118
+ overflow: hidden;
119
+ }
120
+ .attack-path {
121
+ position: absolute;
122
+ height: 2px;
123
+ background-color: #3b82f6;
124
+ top: 50%;
125
+ left: 0;
126
+ width: 0;
127
+ transition: width 1s ease-in-out;
128
+ }
129
+ .attack-point {
130
+ position: absolute;
131
+ width: 16px;
132
+ height: 16px;
133
+ border-radius: 50%;
134
+ background-color: #ef4444;
135
+ top: 50%;
136
+ transform: translateY(-50%);
137
+ opacity: 0;
138
+ transition: opacity 0.5s ease-in-out;
139
+ }
140
+ </style>
141
+ </head>
142
+ <body class="bg-gray-50">
143
+ <div class="flex h-screen overflow-hidden">
144
+ <!-- 主内容区 -->
145
+ <div class="flex-1 flex flex-col overflow-hidden">
146
+ <!-- 顶部导航 -->
147
+ <header class="bg-white shadow-sm z-10">
148
+ <div class="px-6 py-4 flex items-center justify-between">
149
+ <h1 class="text-xl font-semibold text-gray-800">风险项目告警系统</h1>
150
+ <div class="flex items-center space-x-4">
151
+ <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">
152
+ <i class="fas fa-exclamation-triangle"></i>
153
+ <span>风险项目</span>
154
+ </button>
155
+ <div class="relative">
156
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full cursor-pointer">
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </header>
161
+
162
+ <!-- 主内容 -->
163
+ <main class="flex-1 overflow-auto p-6">
164
+ <!-- 项目详情 -->
165
+ <div id="projectDetail" class="bg-white rounded-xl shadow-sm p-6">
166
+ <div class="flex items-center justify-between mb-6">
167
+ <div>
168
+ <h2 class="text-2xl font-bold text-gray-800">支付宝国补项目</h2>
169
+ <p class="text-gray-500">最后更新时间: 2023-06-15 14:30</p>
170
+ </div>
171
+ <div class="flex space-x-2">
172
+ <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-medium">高风险</span>
173
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">越权</span>
174
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">SQL注入</span>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- 选项卡导航 -->
179
+ <div class="border-b border-gray-200 mb-6">
180
+ <nav class="-mb-px flex space-x-8">
181
+ <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>
182
+ <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>
183
+ <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>
184
+ <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>
185
+ <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>
186
+ </nav>
187
+ </div>
188
+
189
+ <!-- 需求分析内容 -->
190
+ <div id="requirements" class="tab-content active">
191
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
192
+ <!-- 需求文档内容 -->
193
+ <div>
194
+ <h3 class="text-lg font-medium text-gray-900 mb-4">需求文档内容</h3>
195
+ <div class="bg-gray-50 p-4 rounded-lg max-h-96 overflow-auto">
196
+ <p class="mb-3">支付宝国补项目旨在为政府补贴资金发放提供数字化解决方案，通过支付宝平台实现补贴资金的精准发放和管理。</p>
197
+ <p class="mb-3"><span class="risk-highlight">项目涉及用户身份认证、补贴资格审核、资金发放、使用监控等多个环节。</span>系统需要与政府数据库对接获取补贴人员名单，并通过支付宝账户完成资金发放。</p>
198
+ <p class="mb-3">技术架构采用微服务设计，主要包含以下组件：用户服务、认证服务、补贴审核服务、资金发放服务、监控服务。</p>
199
+ <p class="mb-3"><span class="risk-highlight">用户服务负责处理用户注册、登录和个人信息管理。认证服务对接政府数据库验证用户补贴资格。</span>补贴审核服务处理补贴申请和审批流程。</p>
200
+ <p class="mb-3">资金发放服务负责将补贴资金转入用户支付宝账户。监控服务跟踪补贴资金使用情况并向政府监管部门提供报表。</p>
201
+ <p class="mb-3">系统预计日处理��易量100万笔，峰值QPS要求达到500。数据存储采用MySQL集群和Redis缓存。</p>
202
+ <p class="mb-3"><span class="risk-highlight">安全要求包括：用户身份严格验证、补贴资格防篡改、资金发放防重放、敏感数据加密存储。</span></p>
203
+ <p class="mb-3">项目计划开发周期3个月，测试周期1个月，预计2023年9月上线。</p>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- 安全分析结果 -->
208
+ <div>
209
+ <h3 class="text-lg font-medium text-gray-900 mb-4">安全分析结果</h3>
210
+ <div class="bg-gray-50 p-4 rounded-lg max-h-96 overflow-auto">
211
+ <div class="mb-4">
212
+ <h4 class="font-medium text-gray-700 mb-2">关键风险点</h4>
213
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
214
+ <li>用户身份认证环节缺乏多因素认证机制</li>
215
+ <li>补贴资格审核接口未实现防重放攻击保护</li>
216
+ <li>资金发放服务缺乏交易签名验证机制</li>
217
+ <li>敏感数据存储未明确加密算法要求</li>
218
+ </ul>
219
+ </div>
220
+ <div>
221
+ <h4 class="font-medium text-gray-700 mb-2">安全建议</h4>
222
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
223
+ <li>增加短信验证码或生物识别等多因素认证方式</li>
224
+ <li>为关键接口添加时间戳和随机数防重放机制</li>
225
+ <li>实现基于数字签名的交易验证流程</li>
226
+ <li>明确敏感数据加密标准，采用AES-256算法</li>
227
+ </ul>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- 技术架构图 -->
234
+ <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
235
+ <div>
236
+ <h3 class="text-lg font-medium text-gray-900 mb-4">技术架构图</h3>
237
+ <div class="architecture-diagram p-4">
238
+ <div class="mermaid">
239
+ graph TD
240
+ A[用户端] --> B[API Gateway]
241
+ B --> C[用户服务]
242
+ B --> D[认证服务]
243
+ B --> E[补贴审核服务]
244
+ B --> F[资金发放服务]
245
+ B --> G[监控服务]
246
+ C --> H[MySQL集群]
247
+ D --> I[政府数据库]
248
+ E --> H
249
+ F --> J[支付宝接口]
250
+ G --> K[Redis缓存]
251
+ G --> L[监管报表]
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- 架构安全分析 -->
257
+ <div>
258
+ <h3 class="text-lg font-medium text-gray-900 mb-4">架构安全分析</h3>
259
+ <div class="bg-gray-50 p-4 rounded-lg h-full">
260
+ <div class="mb-4">
261
+ <h4 class="font-medium text-gray-700 mb-2">架构风险点</h4>
262
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
263
+ <li>API Gateway缺乏统一的认证授权机制</li>
264
+ <li>微服务间通信未采用双向TLS加密</li>
265
+ <li>数据库访问缺乏细粒度权限控制</li>
266
+ <li>监控服务日志存储未考虑脱敏处理</li>
267
+ </ul>
268
+ </div>
269
+ <div>
270
+ <h4 class="font-medium text-gray-700 mb-2">改进建议</h4>
271
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
272
+ <li>在API Gateway实现统一的JWT验证机制</li>
273
+ <li>为服务间通信配置双向TLS认证</li>
274
+ <li>按最小权限原则配置数据库访问权限</li>
275
+ <li>实现日志敏感信息自动脱敏功能</li>
276
+ </ul>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- STRIDE威胁建模 -->
283
+ <div class="mt-8">
284
+ <h3 class="text-lg font-medium text-gray-900 mb-4">STRIDE威胁建模</h3>
285
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
286
+ <div class="threat-model p-4" id="threatModel">
287
+ <!-- 交互式威胁建模图将通过JavaScript动态生成 -->
288
+ </div>
289
+ <div>
290
+ <div class="bg-gray-50 p-4 rounded-lg h-full">
291
+ <h4 class="font-medium text-gray-700 mb-3">威胁分析结果</h4>
292
+ <div id="threatDetail" class="text-sm text-gray-700">
293
+ <p class="text-gray-500 italic">点击左侧图中的组件查看详细威胁分析</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- 安全风险分析 -->
301
+ <div class="mt-8">
302
+ <h3 class="text-lg font-medium text-gray-900 mb-4">安全风险分析</h3>
303
+ <div class="overflow-x-auto">
304
+ <table class="min-w-full divide-y divide-gray-200">
305
+ <thead class="bg-gray-50">
306
+ <tr>
307
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">业务场景</th>
308
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险点</th>
309
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险类型</th>
310
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">整改建议</th>
311
+ </tr>
312
+ </thead>
313
+ <tbody class="bg-white divide-y divide-gray-200">
314
+ <tr>
315
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">补贴资格审核</td>
316
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">认证服务未验证调用方身份</td>
317
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">越权访问</td>
318
+ <td class="px-6 py-4 text-sm text-gray-900">增加服务间认证机制，使用双向TLS或JWT验证</td>
319
+ </tr>
320
+ <tr>
321
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">资金发放</td>
322
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">发放请求参数未过滤</td>
323
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">SQL注入</td>
324
+ <td class="px-6 py-4 text-sm text-gray-900">使用参数化查询或ORM框架，对输入参数进行严格验证</td>
325
+ </tr>
326
+ <tr>
327
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">用户信息管理</td>
328
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">敏感数据未加密存储</td>
329
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数据泄露</td>
330
+ <td class="px-6 py-4 text-sm text-gray-900">对身份证号等敏感信息进行加密存储，使用AES-256算法</td>
331
+ </tr>
332
+ </tbody>
333
+ </table>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- 代码分析内容 -->
339
+ <div id="code" class="tab-content">
340
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
341
+ <!-- 代码内容 -->
342
+ <div>
343
+ <h3 class="text-lg font-medium text-gray-900 mb-4">代码内容</h3>
344
+ <div class="code-container bg-gray-800 rounded-lg overflow-hidden">
345
+ <pre><code class="language-javascript hljs">const db = require('../models/database');
346
+ const subsidyService = require('../services/subsidyService');
347
+
348
+ class SubsidyController {
349
+ // 获取补贴资格
350
+ async getSubsidyStatus(req, res) {
351
+ try {
352
+ const userId = req.params.userId;
353
+
354
+ // 漏洞: SQL注入风险
355
+ const query = `SELECT * FROM subsidies WHERE user_id = ${userId}`;
356
+ const result = await db.query(query);
357
+
358
+ if (result.rows.length > 0) {
359
+ res.json({ eligible: true, amount: result.rows[0].amount });
360
+ } else {
361
+ res.json({ eligible: false });
362
+ }
363
+ } catch (error) {
364
+ res.status(500).json({ error: error.message });
365
+ }
366
+ }
367
+
368
+ // 发放补贴
369
+ async distributeSubsidy(req, res) {
370
+ try {
371
+ const { userId, amount } = req.body;
372
+
373
+ // 漏洞: 未验证管理员权限
374
+ if (!req.session.user || req.session.user.role !== 'admin') {
375
+ return res.status(403).json({ error: '无权操作' });
376
+ }
377
+
378
+ const success = await subsidyService.distribute(userId, amount);
379
+
380
+ if (success) {
381
+ res.json({ success: true });
382
+ } else {
383
+ res.status(400).json({ error: '发放失败' });
384
+ }
385
+ } catch (error) {
386
+ res.status(500).json({ error: error.message });
387
+ }
388
+ }
389
+ }
390
+
391
+ module.exports = new SubsidyController();</code></pre>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- 漏洞详情 -->
396
+ <div>
397
+ <h3 class="text-lg font-medium text-gray-900 mb-4">安全风险分析</h3>
398
+ <div class="space-y-4">
399
+ <div class="bg-red-50 p-4 rounded-lg">
400
+ <div class="flex items-center justify-between">
401
+ <h4 class="font-medium text-red-800">SQL注入漏洞</h4>
402
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">高危</span>
403
+ </div>
404
+ <p class="mt-2 text-sm text-gray-700">文件: src/controllers/subsidyController.js</p>
405
+ <p class="mt-1 text-sm text-gray-700">行号: 8-9</p>
406
+ <p class="mt-2 text-gray-700">直接拼接用户输入到SQL查询中，攻击者可构造恶意输入执行任意SQL命令。</p>
407
+ <div class="mt-3">
408
+ <button class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">查看修复建议 <i class="fas fa-chevron-down ml-1"></i></button>
409
+ <div class="mt-2 bg-white p-3 rounded-lg border border-gray-200 hidden">
410
+ <p class="text-sm text-gray-700">建议使用参数化查询或ORM框架:</p>
411
+ <pre class="mt-2 bg-gray-800 text-gray-100 p-2 rounded text-sm">const query = 'SELECT * FROM subsidies WHERE user_id = $1';
412
+ const result = await db.query(query, [userId]);</pre>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ <div class="bg-orange-50 p-4 rounded-lg">
417
+ <div class="flex items-center justify-between">
418
+ <h4 class="font-medium text-orange-800">越权访问漏洞</h4>
419
+ <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-full">中危</span>
420
+ </div>
421
+ <p class="mt-2 text-sm text-gray-700">文件: src/controllers/subsidyController.js</p>
422
+ <p class="mt-1 text-sm text-gray-700">行号: 22-24</p>
423
+ <p class="mt-2 text-gray-700">权限检查在业务��辑之后执行，存在时间差攻击风险。</p>
424
+ <div class="mt-3">
425
+ <button class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">查看修复建议 <i class="fas fa-chevron-down ml-1"></i></button>
426
+ <div class="mt-2 bg-white p-3 rounded-lg border border-gray-200 hidden">
427
+ <p class="text-sm text-gray-700">建议将权限检查移到方法开头:</p>
428
+ <pre class="mt-2 bg-gray-800 text-gray-100 p-2 rounded text-sm">async distributeSubsidy(req, res) {
429
+ if (!req.session.user || req.session.user.role !== 'admin') {
430
+ return res.status(403).json({ error: '无权操作' });
431
+ }
432
+ // 其余业务逻辑...
433
+ }</pre>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- 安全测试内容 -->
443
+ <div id="testing" class="tab-content">
444
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
445
+ <!-- 接口攻击可视化 -->
446
+ <div>
447
+ <h3 class="text-lg font-medium text-gray-900 mb-4">接口攻击过程</h3>
448
+ <div class="bg-white p-6 rounded-lg shadow-sm">
449
+ <div class="attack-animation" id="attackAnimation">
450
+ <div class="attack-path" id="attackPath"></div>
451
+ <div class="attack-point" id="attackPoint1" style="left: 20%;"></div>
452
+ <div class="attack-point" id="attackPoint2" style="left: 40%;"></div>
453
+ <div class="attack-point" id="attackPoint3" style="left: 60%;"></div>
454
+ <div class="attack-point" id="attackPoint4" style="left: 80%;"></div>
455
+
456
+ <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">
457
+ <span class="text-xs font-medium">攻击者</span>
458
+ </div>
459
+ <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">
460
+ <span class="text-xs font-medium">API</span>
461
+ </div>
462
+ <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">
463
+ <span class="text-xs font-medium">服务</span>
464
+ </div>
465
+ <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">
466
+ <span class="text-xs font-medium">数据库</span>
467
+ </div>
468
+
469
+ <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">
470
+ <span class="text-xs font-medium">日志</span>
471
+ </div>
472
+ </div>
473
+ <div class="text-center mt-4">
474
+ <button id="startAttackBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">开始攻击演示</button>
475
+ </div>
476
+ </div>
477
+ </div>
478
+
479
+ <!-- 攻击分析 -->
480
+ <div>
481
+ <h3 class="text-lg font-medium text-gray-900 mb-4">攻击分析</h3>
482
+ <div class="bg-gray-50 p-4 rounded-lg h-full">
483
+ <div id="attackAnalysis">
484
+ <h4 class="font-medium text-gray-700 mb-2">攻击步骤</h4>
485
+ <ol class="list-decimal pl-5 space-y-2 text-sm text-gray-700">
486
+ <li class="opacity-50">攻击者构造恶意SQL注入Payload</li>
487
+ <li class="opacity-50">Payload通过API Gateway��入系统</li>
488
+ <li class="opacity-50">服务层处理请求时执行恶意SQL</li>
489
+ <li class="opacity-50">数据库返回敏感数据给攻击者</li>
490
+ </ol>
491
+
492
+ <h4 class="font-medium text-gray-700 mt-4 mb-2">防御措施</h4>
493
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
494
+ <li>在API Gateway实现输入验证和过滤</li>
495
+ <li>使用参数化查询防止SQL注入</li>
496
+ <li>配置数据库最小权限原则</li>
497
+ <li>实现请求日志审计和分析</li>
498
+ </ul>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <!-- Payload展示 -->
505
+ <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
506
+ <div>
507
+ <h3 class="text-lg font-medium text-gray-900 mb-4">攻击Payload</h3>
508
+ <div class="space-y-4">
509
+ <div>
510
+ <h4 class="font-medium text-gray-700 mb-2">SQL注入攻击</h4>
511
+ <div class="payload-block">
512
+ GET /api/subsidy/status/12345%27%20OR%201%3D1%3B-- HTTP/1.1
513
+ Host: api.example.com
514
+ Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
515
+ </div>
516
+ </div>
517
+ <div>
518
+ <h4 class="font-medium text-gray-700 mb-2">越权攻击</h4>
519
+ <div class="payload-block">
520
+ POST /api/subsidy/distribute HTTP/1.1
521
+ Host: api.example.com
522
+ Content-Type: application/json
523
+
524
+ {
525
+ "userId": "67890",
526
+ "amount": 1000
527
+ }
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+
533
+ <div>
534
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Payload分析</h3>
535
+ <div class="bg-gray-50 p-4 rounded-lg h-full">
536
+ <div class="mb-4">
537
+ <h4 class="font-medium text-gray-700 mb-2">SQL注入Payload分析</h4>
538
+ <p class="text-sm text-gray-700">该Payload通过构造恶意userId参数，利用单引号闭合SQL语句，添加OR 1=1条件使查询始终返回真，从而绕过认证获取所有补贴数据。</p>
539
+ </div>
540
+ <div>
541
+ <h4 class="font-medium text-gray-700 mb-2">越权攻击Payload分析</h4>
542
+ <p class="text-sm text-gray-700">该Payload模拟管理员请求格式，尝试直接调用补贴发放接口。由于权限检查不充分，普通用户可能成功执行资金发放操作。</p>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+
548
+ <!-- 测试结果分析 -->
549
+ <div class="mt-8">
550
+ <h3 class="text-lg font-medium text-gray-900 mb-4">安全测试结果</h3>
551
+ <div class="overflow-x-auto">
552
+ <table class="min-w-full divide-y divide-gray-200">
553
+ <thead class="bg-gray-50">
554
+ <tr>
555
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险接口</th>
556
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">攻击类型</th>
557
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险描述</th>
558
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
559
+ </tr>
560
+ </thead>
561
+ <tbody class="bg-white divide-y divide-gray-200">
562
+ <tr>
563
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">GET /api/subsidy/status/{userId}</td>
564
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">SQL注入</td>
565
+ <td class="px-6 py-4 text-sm text-gray-900">通过构造恶意userId参数可执行任意SQL命令</td>
566
+ <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>
567
+ </tr>
568
+ <tr>
569
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">POST /api/subsidy/distribute</td>
570
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">越权访问</td>
571
+ <td class="px-6 py-4 text-sm text-gray-900">普通用户可模拟管理员请求发放补贴</td>
572
+ <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>
573
+ </tr>
574
+ </tbody>
575
+ </table>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <!-- 发布检查内容 -->
581
+ <div id="release" class="tab-content">
582
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
583
+ <div>
584
+ <h3 class="text-lg font-medium text-gray-900 mb-6">发布安全检查</h3>
585
+
586
+ <div class="space-y-6">
587
+ <div>
588
+ <h4 class="font-medium text-gray-700 mb-3">未修复风险清单</h4>
589
+ <div class="overflow-x-auto">
590
+ <table class="min-w-full divide-y divide-gray-200">
591
+ <thead class="bg-gray-50">
592
+ <tr>
593
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险类型</th>
594
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发现环节</th>
595
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险描述</th>
596
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">严重程度</th>
597
+ </tr>
598
+ </thead>
599
+ <tbody class="bg-white divide-y divide-gray-200">
600
+ <tr>
601
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SQL注入</td>
602
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">代码分析</td>
603
+ <td class="px-6 py-4 text-sm text-gray-900">补贴状态查询接口存在SQL注入漏洞</td>
604
+ <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>
605
+ </tr>
606
+ <tr>
607
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">越权访问</td>
608
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">需求分析</td>
609
+ <td class="px-6 py-4 text-sm text-gray-900">补贴发放接口权限检查不充分</td>
610
+ <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>
611
+ </tr>
612
+ </tbody>
613
+ </table>
614
+ </div>
615
+ </div>
616
+
617
+ <div>
618
+ <h4 class="font-medium text-gray-700 mb-3">安全检查项</h4>
619
+ <div class="space-y-2">
620
+ <div class="flex items-center">
621
+ <input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded" checked disabled>
622
+ <label class="ml-2 block text-sm text-gray-700">代码静态扫描完成</label>
623
+ </div>
624
+ <div class="flex items-center">
625
+ <input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded" checked disabled>
626
+ <label class="ml-2 block text-sm text-gray-700">安全测试用例覆盖</label>
627
+ </div>
628
+ <div class="flex items-center">
629
+ <input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded" disabled>
630
+ <label class="ml-2 block text-sm text-gray-700">高危漏洞修复验证</label>
631
+ </div>
632
+ <div class="flex items-center">
633
+ <input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded" checked disabled>
634
+ <label class="ml-2 block text-sm text-gray-700">安全基线配置检查</label>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+
641
+ <div>
642
+ <h3 class="text-lg font-medium text-gray-900 mb-6">发布决策</h3>
643
+ <div class="bg-gray-50 p-4 rounded-lg h-full">
644
+ <div class="mb-6">
645
+ <h4 class="font-medium text-gray-700 mb-2">风险评分</h4>
646
+ <div class="flex items-center">
647
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
648
+ <div class="bg-red-600 h-2.5 rounded-full" style="width: 75%"></div>
649
+ </div>
650
+ <span class="ml-2 text-sm font-medium text-gray-700">7.5/10</span>
651
+ </div>
652
+ <p class="mt-2 text-sm text-gray-500">高风险阈值: 5.0</p>
653
+ </div>
654
+
655
+ <div class="mb-6">
656
+ <h4 class="font-medium text-gray-700 mb-2">发布建议</h4>
657
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
658
+ <div class="flex">
659
+ <div class="flex-shrink-0">
660
+ <i class="fas fa-exclamation-triangle text-yellow-400"></i>
661
+ </div>
662
+ <div class="ml-3">
663
+ <p class="text-sm text-yellow-700">
664
+ 当前存在未修复的高危漏洞，建议修复后再发布。如需强制发布，请填写风险接受理由并由安全负责人审批。
665
+ </p>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </div>
670
+
671
+ <div>
672
+ <h4 class="font-medium text-gray-700 mb-2">风险接受</h4>
673
+ <textarea class="w-full border border-gray-300 rounded-md p-2 text-sm" rows="3" placeholder="请输入风险接受理由..."></textarea>
674
+ <div class="mt-2 flex justify-end">
675
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">提交审批</button>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ </div>
680
+ </div>
681
+ </div>
682
+
683
+ <!-- 线上监控内容 -->
684
+ <div id="production" class="tab-content">
685
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
686
+ <div>
687
+ <h3 class="text-lg font-medium text-gray-900 mb-6">线上安全监控</h3>
688
+
689
+ <div class="space-y-6">
690
+ <div class="bg-gray-50 p-4 rounded-lg">
691
+ <h4 class="font-medium text-gray-700 mb-2">安全事件统计</h4>
692
+ <div class="flex items-center justify-between mt-4">
693
+ <div class="text-center">
694
+ <p class="text-3xl font-bold text-red-500">2</p>
695
+ <p class="text-sm text-gray-500">高危事件</p>
696
+ </div>
697
+ <div class="text-center">
698
+ <p class="text-3xl font-bold text-orange-500">5</p>
699
+ <p class="text-sm text-gray-500">中危事件</p>
700
+ </div>
701
+ <div class="text-center">
702
+ <p class="text-3xl font-bold text-blue-500">12</p>
703
+ <p class="text-sm text-gray-500">低危事件</p>
704
+ </div>
705
+ </div>
706
+ </div>
707
+
708
+ <div class="bg-gray-50 p-4 rounded-lg">
709
+ <h4 class="font-medium text-gray-700 mb-2">漏洞修复率</h4>
710
+ <div class="mt-6">
711
+ <div class="flex items-center justify-between mb-2">
712
+ <span class="text-sm font-medium text-gray-700">已修复</span>
713
+ <span class="text-sm font-medium text-gray-700">75%</span>
714
+ </div>
715
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
716
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 75%"></div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+
721
+ <div>
722
+ <h4 class="font-medium text-gray-700 mb-3">安全事件趋势</h4>
723
+ <div class="bg-white p-4 rounded-lg border border-gray-200 h-64 flex items-center justify-center">
724
+ <p class="text-gray-500 italic">安全事件趋势图表区域</p>
725
+ </div>
726
+ </div>
727
+ </div>
728
+ </div>
729
+
730
+ <div>
731
+ <h3 class="text-lg font-medium text-gray-900 mb-6">近期安全事件</h3>
732
+ <div class="overflow-x-auto">
733
+ <table class="min-w-full divide-y divide-gray-200">
734
+ <thead class="bg-gray-50">
735
+ <tr>
736
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
737
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">事件类型</th>
738
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
739
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
740
+ </tr>
741
+ </thead>
742
+ <tbody class="bg-white divide-y divide-gray-200">
743
+ <tr>
744
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-06-10 14:23</td>
745
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">SQL注入攻击</td>
746
+ <td class="px-6 py-4 text-sm text-gray-900">检测到针对补贴状态查询接口的SQL注入尝试</td>
747
+ <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>
748
+ </tr>
749
+ <tr>
750
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-06-08 09:45</td>
751
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-orange-600">越权访问</td>
752
+ <td class="px-6 py-4 text-sm text-gray-900">普通用户尝试调用补贴发放接口</td>
753
+ <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>
754
+ </tr>
755
+ <tr>
756
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-06-05 16:12</td>
757
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">异常登录</td>
758
+ <td class="px-6 py-4 text-sm text-gray-900">检测到来自异常地理位置的登录尝试</td>
759
+ <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>
760
+ </tr>
761
+ </tbody>
762
+ </table>
763
+ </div>
764
+
765
+ <div class="mt-6">
766
+ <h4 class="font-medium text-gray-700 mb-3">安全告警配置</h4>
767
+ <div class="bg-gray-50 p-4 rounded-lg">
768
+ <div class="space-y-2">
769
+ <div class="flex items-center justify-between">
770
+ <span class="text-sm text-gray-700">SQL注入攻击告警</span>
771
+ <label class="relative inline-flex items-center cursor-pointer">
772
+ <input type="checkbox" value="" class="sr-only peer" checked>
773
+ <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>
774
+ </label>
775
+ </div>
776
+ <div class="flex items-center justify-between">
777
+ <span class="text-sm text-gray-700">越权访问告警</span>
778
+ <label class="relative inline-flex items-center cursor-pointer">
779
+ <input type="checkbox" value="" class="sr-only peer" checked>
780
+ <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>
781
+ </label>
782
+ </div>
783
+ <div class="flex items-center justify-between">
784
+ <span class="text-sm text-gray-700">异常登录告警</span>
785
+ <label class="relative inline-flex items-center cursor-pointer">
786
+ <input type="checkbox" value="" class="sr-only peer" checked>
787
+ <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>
788
+ </label>
789
+ </div>
790
+ </div>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ </main>
798
+ </div>
799
+ </div>
800
+
801
+ <!-- 风险项目弹窗 -->
802
+ <div id="riskProjectsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
803
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col">
804
+ <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
805
+ <h3 class="text-lg font-medium text-gray-900">风险项目列表</h3>
806
+ <button id="closeRiskProjectsModal" class="text-gray-400 hover:text-gray-500">
807
+ <i class="fas fa-times"></i>
808
+ </button>
809
+ </div>
810
+ <div class="flex-1 overflow-y-auto p-4">
811
+ <div class="overflow-x-auto">
812
+ <table class="min-w-full divide-y divide-gray-200">
813
+ <thead class="bg-gray-50">
814
+ <tr>
815
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目名称</th>
816
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险环节</th>
817
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险类型</th>
818
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">严重程度</th>
819
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
820
+ </tr>
821
+ </thead>
822
+ <tbody class="bg-white divide-y divide-gray-200">
823
+ <tr>
824
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">支付宝国补项目</td>
825
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">需求, 代码</td>
826
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">越权, SQL注入</td>
827
+ <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>
828
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><button class="text-indigo-600 hover:text-indigo-900">查看详情</button></td>
829
+ </tr>
830
+ <tr>
831
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">微信支付跨境项目</td>
832
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">代码, 发布</td>
833
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">XSS, CSRF</td>
834
+ <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>
835
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><button class="text-indigo-600 hover:text-indigo-900">查看详情</button></td>
836
+ </tr>
837
+ <tr>
838
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">阿里云数据中台</td>
839
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">需求, 测试</td>
840
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数据泄露</td>
841
+ <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>
842
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><button class="text-indigo-600 hover:text-indigo-900">查看详情</button></td>
843
+ </tr>
844
+ </tbody>
845
+ </table>
846
+ </div>
847
+ </div>
848
+ <div class="px-6 py-3 border-t border-gray-200 flex justify-end">
849
+ <button id="closeRiskProjectsModal2" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200">关闭</button>
850
+ </div>
851
+ </div>
852
+ </div>
853
+
854
+ <script>
855
+ // 初始化Mermaid
856
+ mermaid.initialize({
857
+ startOnLoad: true,
858
+ theme: 'default',
859
+ flowchart: {
860
+ useMaxWidth: false,
861
+ htmlLabels: true
862
+ }
863
+ });
864
+
865
+ // 初始化代码高亮
866
+ document.addEventListener('DOMContentLoaded', (event) => {
867
+ document.querySelectorAll('pre code').forEach((block) => {
868
+ hljs.highlightElement(block);
869
+ });
870
+ });
871
+
872
+ // 选项卡切换
873
+ const tabButtons = document.querySelectorAll('.tab-btn');
874
+ const tabContents = document.querySelectorAll('.tab-content');
875
+
876
+ tabButtons.forEach(button => {
877
+ button.addEventListener('click', () => {
878
+ const tabId = button.getAttribute('data-tab');
879
+
880
+ // 更新按钮状态
881
+ tabButtons.forEach(btn => {
882
+ btn.classList.remove('border-indigo-500', 'text-indigo-600');
883
+ btn.classList.add('border-transparent', 'text-gray-500');
884
+ });
885
+ button.classList.remove('border-transparent', 'text-gray-500');
886
+ button.classList.add('border-indigo-500', 'text-indigo-600');
887
+
888
+ // 更新内容显示
889
+ tabContents.forEach(content => {
890
+ content.classList.remove('active');
891
+ });
892
+ document.getElementById(tabId).classList.add('active');
893
+ });
894
+ });
895
+
896
+ // 风险项目弹窗
897
+ const riskProjectsBtn = document.getElementById('riskProjectsBtn');
898
+ const riskProjectsModal = document.getElementById('riskProjectsModal');
899
+ const closeButtons = document.querySelectorAll('#closeRiskProjectsModal, #closeRiskProjectsModal2');
900
+
901
+ riskProjectsBtn.addEventListener('click', () => {
902
+ riskProjectsModal.classList.remove('hidden');
903
+ });
904
+
905
+ closeButtons.forEach(button => {
906
+ button.addEventListener('click', () => {
907
+ riskProjectsModal.classList.add('hidden');
908
+ });
909
+ });
910
+
911
+ // 修复建议展开/收起
912
+ document.querySelectorAll('.bg-red-50 button, .bg-orange-50 button').forEach(button => {
913
+ button.addEventListener('click', () => {
914
+ const suggestion = button.nextElementSibling;
915
+ if (suggestion.classList.contains('hidden')) {
916
+ suggestion.classList.remove('hidden');
917
+ button.innerHTML = button.innerHTML.replace('chevron-down', 'chevron-up');
918
+ } else {
919
+ suggestion.classList.add('hidden');
920
+ button.innerHTML = button.innerHTML.replace('chevron-up', 'chevron-down');
921
+ }
922
+ });
923
+ });
924
+
925
+ // STRIDE威胁建模图交互
926
+ document.addEventListener('DOMContentLoaded', () => {
927
+ const threatModelContainer = document.getElementById('threatModel');
928
+
929
+ threatModelContainer.innerHTML = `
930
+ <div class="p-4">
931
+ <div class="text-center text-gray-500 mb-4">
932
+ <p>STRIDE威胁建模 - 点击组件节点查看风险详情</p>
933
+ </div>
934
+ <div class="relative h-64 bg-gray-100 rounded-lg">
935
+ <!-- 用户服务 -->
936
+ <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', '缺乏强身份认证机制，可能被冒充')">
937
+ <span class="text-xs font-medium">用户服务</span>
938
+ </div>
939
+
940
+ <!-- 认证服务 -->
941
+ <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', '认证令牌未签名，可能被篡改')">
942
+ <span class="text-xs font-medium">认证服务</span>
943
+ </div>
944
+
945
+ <!-- 补贴审核 -->
946
+ <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', '操作日志不完整，无法追溯')">
947
+ <span class="text-xs font-medium">补贴审核</span>
948
+ </div>
949
+
950
+ <!-- 资金发放 -->
951
+ <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', '交易详情未加密，可能泄露')">
952
+ <span class="text-xs font-medium">资金发放</span>
953
+ </div>
954
+
955
+ <!-- 监控服务 -->
956
+ <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', '缺乏限流机制，可能被攻击')">
957
+ <span class="text-xs font-medium">监控服务</span>
958
+ </div>
959
+
960
+ <!-- 连接线 -->
961
+ <svg class="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
962
+ <!-- 用户服务 -> 认证服务 -->
963
+ <path d="M25% 25% L50% 25%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
964
+
965
+ <!-- 认证服务 -> 补贴审核 -->
966
+ <path d="M75% 25% L75% 40% L50% 40% L50% 55%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
967
+
968
+ <!-- 补贴审核 -> 资金发放 -->
969
+ <path d="M50% 55% L75% 55%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
970
+
971
+ <!-- 资金发放 -> 监控服务 -->
972
+ <path d="M75% 55% L50% 55% L50% 65%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
973
+
974
+ <defs>
975
+ <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
976
+ <polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
977
+ </marker>
978
+ </defs>
979
+ </svg>
980
+ </div>
981
+ </div>
982
+ `;
983
+ });
984
+
985
+ // 显示威胁详情函数
986
+ function showThreatDetail(component, threatType, threatDesc) {
987
+ const threatDetail = document.getElementById('threatDetail');
988
+ threatDetail.innerHTML = `
989
+ <div class="mb-3">
990
+ <h5 class="font-medium text-gray-700">组件名称</h5>
991
+ <p>${component}</p>
992
+ </div>
993
+ <div class="mb-3">
994
+ <h5 class="font-medium text-gray-700">威胁类型 (STRIDE)</h5>
995
+ <p class="text-red-600">${threatType}</p>
996
+ </div>
997
+ <div class="mb-3">
998
+ <h5 class="font-medium text-gray-700">威胁描述</h5>
999
+ <p>${threatDesc}</p>
1000
+ </div>
1001
+ <div>
1002
+ <h5 class="font-medium text-gray-700">缓解措施</h5>
1003
+ <ul class="list-disc pl-5 mt-1 text-sm">
1004
+ <li>实现多因素身份验证</li>
1005
+ <li>使用数字签名保护关键数据</li>
1006
+ <li>完善审计日志记录</li>
1007
+ </ul>
1008
+ </div>
1009
+ `;
1010
+ }
1011
+
1012
+ // 攻击演示动画
1013
+ document.getElementById('startAttackBtn').addEventListener('click', function() {
1014
+ const attackPath = document.getElementById('attackPath');
1015
+ const attackPoints = [
1016
+ document.getElementById('attackPoint1'),
1017
+ document.getElementById('attackPoint2'),
1018
+ document.getElementById('attackPoint3'),
1019
+ document.getElementById('attackPoint4')
1020
+ ];
1021
+ const attackSteps = document.querySelectorAll('#attackAnalysis ol li');
1022
+
1023
+ // 重置状态
1024
+ attackPath.style.width = '0';
1025
+ attackPoints.forEach(point => point.style.opacity = '0');
1026
+ attackSteps.forEach(step => step.classList.add('opacity-50'));
1027
+
1028
+ // 开始动画
1029
+ attackPath.style.width = '100%';
1030
+
1031
+ // 分步显示攻击点和步骤
1032
+ setTimeout(() => {
1033
+ attackPoints[0].style.opacity = '1';
1034
+ attackSteps[0].classList.remove('opacity-50');
1035
+ }, 500);
1036
+
1037
+ setTimeout(() => {
1038
+ attackPoints[1].style.opacity = '1';
1039
+ attackSteps[1].classList.remove('opacity-50');
1040
+ }, 1000);
1041
+
1042
+ setTimeout(() => {
1043
+ attackPoints[2].style.opacity = '1';
1044
+ attackSteps[2].classList.remove('opacity-50');
1045
+ }, 1500);
1046
+
1047
+ setTimeout(() => {
1048
+ attackPoints[3].style.opacity = '1';
1049
+ attackSteps[3].classList.remove('opacity-50');
1050
+ }, 2000);
1051
+ });
1052
+ </script>
1053
+ <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>
1054
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ● 去除最右边的告警中心模块 ● 每个环节的内容都采用左右架构，左边是原始内容，右边是安全分析结果 ● 需求分析中威胁建模采STRIDE威胁建模模型进行建模，采用交互式拓扑图（可点击节点查看风险详情） ● 安全测试模块：动态展示接口攻击过程