Hugging Face's logo

Spaces:
capta1n
/
bas4
Running

App Files Community
capta1n commited on
Commit
a32c7f7
·
verified ·
1 Parent(s): a8dc307

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +29 -145
  2. prompts.txt +2 -1
index.html CHANGED
@@ -77,10 +77,18 @@
77
  background-color: #fee2e2;
78
  border-left: 4px solid #dc2626;
79
  }
 
 
 
 
 
 
 
 
80
  </style>
81
  </head>
82
  <body class="bg-gray-50">
83
- <div class="container mx-auto px-4 py-8">
84
  <div class="text-center mb-10">
85
  <h1 class="text-3xl font-bold text-gray-800 mb-2">高级持续性威胁攻击链</h1>
86
  <p class="text-gray-600 max-w-3xl mx-auto">完整的攻击流程可视化，包含交互式防御检测点</p>
@@ -139,26 +147,20 @@
139
  </div>
140
 
141
  <div class="relative">
142
- <div class="attack-flow-container overflow-x-auto pb-6">
143
  <div class="flex space-x-4 items-center">
144
  <!-- Attacker Node -->
145
- <div class="attack-card w-64 flex-shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer transition-all duration-300 attacker-node">
146
- <div class="p-5">
147
- <div class="flex items-center justify-between mb-3">
148
  <div class="flex items-center">
149
- <div class="w-10 h-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-3">
150
  <i class="fas fa-user-secret"></i>
151
  </div>
152
  <span class="text-xs font-semibold text-gray-500">攻击源</span>
153
  </div>
154
- <span class="severity-badge severity-critical rounded-full">高危</span>
155
- </div>
156
- <h3 class="font-semibold text-gray-800 mb-2">BAS AI Hacker</h3>
157
- <p class="text-sm text-gray-600 line-clamp-2 mb-3">高级AI驱动的攻击者，使用自动化工具进行精准攻击</p>
158
- <div class="flex justify-between items-center">
159
- <span class="defense-badge bg-gray-100 text-gray-800 rounded-full">未知来源</span>
160
- <span class="text-xs text-gray-400">00:00</span>
161
  </div>
 
162
  </div>
163
  </div>
164
 
@@ -172,129 +174,17 @@
172
  </div>
173
  </div>
174
 
175
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
176
- <div class="lg:col-span-2">
177
- <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
178
- <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
179
- <h3 class="font-semibold text-gray-800">攻击阶段取证详情</h3>
180
- </div>
181
- <div id="attack-details" class="p-6">
182
- <div class="text-center py-12">
183
- <div class="mx-auto w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mb-4">
184
- <i class="fas fa-mouse-pointer text-blue-500 text-2xl"></i>
185
- </div>
186
- <h4 class="text-lg font-medium text-gray-700 mb-2">选择攻击阶段</h4>
187
- <p class="text-gray-500 max-w-md mx-auto">点击时间线上的任意攻击卡片查看攻击行为和触发防御的详细取证信息</p>
188
- </div>
189
- </div>
190
- </div>
191
  </div>
192
-
193
- <div>
194
- <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
195
- <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
196
- <h3 class="font-semibold text-gray-800">防御检测详情</h3>
197
- </div>
198
- <div class="p-6">
199
- <div class="space-y-4">
200
- <div class="flex items-start">
201
- <div class="flex-shrink-0 mt-1">
202
- <div class="w-3 h-3 rounded-full bg-red-500 animate-pulse-slow"></div>
203
- </div>
204
- <div class="ml-3">
205
- <h4 class="text-sm font-medium text-gray-800">7个攻击阶段被检测到</h4>
206
- <p class="text-xs text-gray-500 mt-1">完整的攻击链可见性</p>
207
- </div>
208
- </div>
209
- <div class="flex items-start">
210
- <div class="flex-shrink-0 mt-1">
211
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
212
- </div>
213
- <div class="ml-3">
214
- <h4 class="text-sm font-medium text-gray-800">6个安全产品被触发</h4>
215
- <p class="text-xs text-gray-500 mt-1">多层防御检测</p>
216
- </div>
217
- </div>
218
- <div class="flex items-start">
219
- <div class="flex-shrink-0 mt-1">
220
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
221
- </div>
222
- <div class="ml-3">
223
- <h4 class="text-sm font-medium text-gray-800">100%阶段被记录</h4>
224
- <p class="text-xs text-gray-500 mt-1">全面的取证证据</p>
225
- </div>
226
- </div>
227
- </div>
228
-
229
- <div class="mt-8">
230
- <h4 class="text-sm font-semibold text-gray-700 mb-3">防御覆盖</h4>
231
- <div class="space-y-3">
232
- <div>
233
- <div class="flex justify-between text-xs text-gray-500 mb-1">
234
- <span>邮件安全</span>
235
- <span>阶段 1</span>
236
- </div>
237
- <div class="w-full bg-gray-200 rounded-full h-2">
238
- <div class="bg-red-500 h-2 rounded-full" style="width: 90%"></div>
239
- </div>
240
- </div>
241
- <div>
242
- <div class="flex justify-between text-xs text-gray-500 mb-1">
243
- <span>终端防护</span>
244
- <span>阶段 2</span>
245
- </div>
246
- <div class="w-full bg-gray-200 rounded-full h-2">
247
- <div class="bg-yellow-500 h-2 rounded-full" style="width: 80%"></div>
248
- </div>
249
- </div>
250
- <div>
251
- <div class="flex justify-between text-xs text-gray-500 mb-1">
252
- <span>网络分析</span>
253
- <span>阶段 3</span>
254
- </div>
255
- <div class="w-full bg-gray-200 rounded-full h-2">
256
- <div class="bg-green-500 h-2 rounded-full" style="width: 70%"></div>
257
- </div>
258
- </div>
259
- <div>
260
- <div class="flex justify-between text-xs text-gray-500 mb-1">
261
- <span>用户行为</span>
262
- <span>阶段 4</span>
263
- </div>
264
- <div class="w-full bg-gray-200 rounded-full h-2">
265
- <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div>
266
- </div>
267
- </div>
268
- <div>
269
- <div class="flex justify-between text-xs text-gray-500 mb-1">
270
- <span>数据保护</span>
271
- <span>阶段 5</span>
272
- </div>
273
- <div class="w-full bg-gray-200 rounded-full h-2">
274
- <div class="bg-purple-500 h-2 rounded-full" style="width: 75%"></div>
275
- </div>
276
- </div>
277
- <div>
278
- <div class="flex justify-between text-xs text-gray-500 mb-1">
279
- <span>主机检测</span>
280
- <span>阶段 6</span>
281
- </div>
282
- <div class="w-full bg-gray-200 rounded-full h-2">
283
- <div class="bg-pink-500 h-2 rounded-full" style="width: 95%"></div>
284
- </div>
285
- </div>
286
- <div>
287
- <div class="flex justify-between text-xs text-gray-500 mb-1">
288
- <span>全流量分析</span>
289
- <span>阶段 7</span>
290
- </div>
291
- <div class="w-full bg-gray-200 rounded-full h-2">
292
- <div class="bg-indigo-500 h-2 rounded-full" style="width: 100%"></div>
293
- </div>
294
- </div>
295
- </div>
296
- </div>
297
  </div>
 
 
298
  </div>
299
  </div>
300
  </div>
@@ -450,24 +340,18 @@
450
 
451
  attackSteps.forEach((step, index) => {
452
  const card = document.createElement('div');
453
- card.className = `attack-card w-64 flex-shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer transition-all duration-300 ${index === 0 ? 'active border-l-4 border-red-500' : ''}`;
454
  card.innerHTML = `
455
- <div class="p-5">
456
- <div class="flex items-center justify-between mb-3">
457
  <div class="flex items-center">
458
- <div class="w-10 h-10 rounded-full ${step.color} flex items-center justify-center mr-3">
459
  <i class="fas fa-${step.icon}"></i>
460
  </div>
461
  <span class="text-xs font-semibold text-gray-500">阶段 ${step.id}</span>
462
  </div>
463
- <span class="severity-badge ${step.alerts[0].severity === 'critical' ? 'severity-critical' : step.alerts[0].severity === 'high' ? 'severity-high' : 'severity-emergency'} rounded-full">${step.alerts[0].severity === 'critical' ? '严重' : step.alerts[0].severity === 'high' ? '高危' : '紧急'}</span>
464
- </div>
465
- <h3 class="font-semibold text-gray-800 mb-2">${step.title}</h3>
466
- <p class="text-sm text-gray-600 line-clamp-2 mb-3">${step.behavior}</p>
467
- <div class="flex justify-between items-center">
468
- <span class="defense-badge bg-gray-100 text-gray-800 rounded-full">${step.defenses}</span>
469
- <span class="text-xs text-gray-400">${step.id < 10 ? '0' + step.id : step.id}:00</span>
470
  </div>
 
471
  </div>
472
  `;
473
 
 
77
  background-color: #fee2e2;
78
  border-left: 4px solid #dc2626;
79
  }
80
+ .attack-flow-container {
81
+ width: 100%;
82
+ overflow-x: auto;
83
+ padding-bottom: 1.5rem;
84
+ }
85
+ .attack-flow-container .flex {
86
+ min-width: max-content;
87
+ }
88
  </style>
89
  </head>
90
  <body class="bg-gray-50">
91
+ <div class="container mx-auto px-4 py-8 max-w-full">
92
  <div class="text-center mb-10">
93
  <h1 class="text-3xl font-bold text-gray-800 mb-2">高级持续性威胁攻击链</h1>
94
  <p class="text-gray-600 max-w-3xl mx-auto">完整的攻击流程可视化，包含交互式防御检测点</p>
 
147
  </div>
148
 
149
  <div class="relative">
150
+ <div class="attack-flow-container">
151
  <div class="flex space-x-4 items-center">
152
  <!-- Attacker Node -->
153
+ <div class="attack-card w-48 flex-shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer transition-all duration-300 attacker-node">
154
+ <div class="p-4">
155
+ <div class="flex items-center justify-between mb-2">
156
  <div class="flex items-center">
157
+ <div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-2">
158
  <i class="fas fa-user-secret"></i>
159
  </div>
160
  <span class="text-xs font-semibold text-gray-500">攻击源</span>
161
  </div>
 
 
 
 
 
 
 
162
  </div>
163
+ <h3 class="font-semibold text-gray-800 text-sm">BAS AI Hacker</h3>
164
  </div>
165
  </div>
166
 
 
174
  </div>
175
  </div>
176
 
177
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
178
+ <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
179
+ <h3 class="font-semibold text-gray-800">攻击阶段取证详情</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
180
  </div>
181
+ <div id="attack-details" class="p-6">
182
+ <div class="text-center py-12">
183
+ <div class="mx-auto w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mb-4">
184
+ <i class="fas fa-mouse-pointer text-blue-500 text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
  </div>
186
+ <h4 class="text-lg font-medium text-gray-700 mb-2">选择攻击阶段</h4>
187
+ <p class="text-gray-500 max-w-md mx-auto">点击时间线上的任意攻击卡片查看攻击行为和触发防御的详细取证信息</p>
188
  </div>
189
  </div>
190
  </div>
 
340
 
341
  attackSteps.forEach((step, index) => {
342
  const card = document.createElement('div');
343
+ card.className = `attack-card w-48 flex-shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer transition-all duration-300 ${index === 0 ? 'active border-l-4 border-red-500' : ''}`;
344
  card.innerHTML = `
345
+ <div class="p-4">
346
+ <div class="flex items-center justify-between mb-2">
347
  <div class="flex items-center">
348
+ <div class="w-8 h-8 rounded-full ${step.color} flex items-center justify-center mr-2">
349
  <i class="fas fa-${step.icon}"></i>
350
  </div>
351
  <span class="text-xs font-semibold text-gray-500">阶段 ${step.id}</span>
352
  </div>
 
 
 
 
 
 
 
353
  </div>
354
+ <h3 class="font-semibold text-gray-800 text-sm">${step.title}</h3>
355
  </div>
356
  `;
357
 
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- 全部语言用中文进行展示 Attack Flow Timeline图表 1、增加攻击者为初始节点，节点颜色用红色高亮展示，并将攻击者名称换为BAS AI Hacker 2、展示节点的图表放大，展示完整的攻击节点和步骤，无需左右切换展示攻击步骤，每个节点直接通过箭头连线进行标记 Defense Detection Summary模块 1、位置调整到图表上方 2、内容修改为拦截率90%、告警率80%、溯源率70%
 
 
1
+ 全部语言用中文进行展示 Attack Flow Timeline图表 1、增加攻击者为初始节点，节点颜色用红色高亮展示，并将攻击者名称换为BAS AI Hacker 2、展示节点的图表放大，展示完整的攻击节点和步骤，无需左右切换展示攻击步骤，每个节点直接通过箭头连线进行标记 Defense Detection Summary模块 1、位置调整到图表上方 2、内容修改为拦截率90%、告警率80%、溯源率70%
2
+ 1、删除防御检测详情内容模块 2、将页面中的内容扩大，填满页面 3、攻击流程时间线模块 1）缩小节点展示，可以在流程中直接展示7个攻击节点 2）节点中不展示攻击行为内容和风险等级