Spaces:
Running
Running
File size: 71,035 Bytes
68911aa |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 |
<!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>
</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> |