|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI SDL Digital Twin Dashboard</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
.analysis-process { |
|
|
height: 400px; |
|
|
overflow-y: auto; |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 0.5rem; |
|
|
padding: 1rem; |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
.code-block { |
|
|
font-family: monospace; |
|
|
background-color: #1e293b; |
|
|
color: #f8fafc; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
overflow-x: auto; |
|
|
} |
|
|
.risk-high { |
|
|
border-left: 4px solid #ef4444; |
|
|
} |
|
|
.risk-medium { |
|
|
border-left: 4px solid #f59e0b; |
|
|
} |
|
|
.risk-low { |
|
|
border-left: 4px solid #10b981; |
|
|
} |
|
|
.avatar-pulse { |
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 1); |
|
|
transform: scale(1); |
|
|
animation: avatar-pulse 2s infinite; |
|
|
} |
|
|
@keyframes avatar-pulse { |
|
|
0% { |
|
|
transform: scale(0.95); |
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); |
|
|
} |
|
|
70% { |
|
|
transform: scale(1); |
|
|
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); |
|
|
} |
|
|
100% { |
|
|
transform: scale(0.95); |
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); |
|
|
} |
|
|
} |
|
|
.chat-container { |
|
|
height: 500px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
.chat-messages { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: 1rem; |
|
|
} |
|
|
.chat-input { |
|
|
padding: 1rem; |
|
|
border-top: 1px solid #e5e7eb; |
|
|
} |
|
|
.message-ai { |
|
|
background-color: #f3f4f6; |
|
|
border-radius: 1rem 1rem 1rem 0; |
|
|
padding: 0.75rem 1rem; |
|
|
margin-bottom: 0.5rem; |
|
|
max-width: 80%; |
|
|
align-self: flex-start; |
|
|
} |
|
|
.message-user { |
|
|
background-color: #3b82f6; |
|
|
color: white; |
|
|
border-radius: 1rem 1rem 0 1rem; |
|
|
padding: 0.75rem 1rem; |
|
|
margin-bottom: 0.5rem; |
|
|
max-width: 80%; |
|
|
align-self: flex-end; |
|
|
} |
|
|
.slide-in { |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
@keyframes slideIn { |
|
|
from { |
|
|
transform: translateY(20px); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-robot text-blue-500 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">AI SDL Digital Twin</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<div class="ml-4 flex items-center md:ml-6"> |
|
|
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none"> |
|
|
<i class="fas fa-bell h-6 w-6"></i> |
|
|
</button> |
|
|
<div class="ml-3 relative"> |
|
|
<div> |
|
|
<button type="button" class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none"> |
|
|
<span class="sr-only">Open user menu</span> |
|
|
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
|
|
|
|
|
<div id="dashboard-view"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h1 class="text-2xl font-bold text-gray-900">AI SDL Digital Twin Dashboard</h1> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative avatar-pulse bg-blue-100 rounded-full p-2 mr-2"> |
|
|
<i class="fas fa-robot text-blue-500 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-600">Active analysis in progress</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
|
|
<i class="fas fa-clipboard-list text-white"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Projects Analyzed</dt> |
|
|
<dd class="flex items-baseline"> |
|
|
<div class="text-2xl font-semibold text-gray-900">142</div> |
|
|
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> |
|
|
<span>12%</span> |
|
|
</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-red-500 rounded-md p-3"> |
|
|
<i class="fas fa-exclamation-triangle text-white"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Active Risks</dt> |
|
|
<dd class="flex items-baseline"> |
|
|
<div class="text-2xl font-semibold text-gray-900">23</div> |
|
|
<div class="ml-2 flex items-baseline text-sm font-semibold text-red-600"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> |
|
|
<span>8%</span> |
|
|
</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-green-500 rounded-md p-3"> |
|
|
<i class="fas fa-check-circle text-white"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Fixed Risks</dt> |
|
|
<dd class="flex items-baseline"> |
|
|
<div class="text-2xl font-semibold text-gray-900">89</div> |
|
|
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> |
|
|
<span>15%</span> |
|
|
</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> |
|
|
<i class="fas fa-shield-alt text-white"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Security Score</dt> |
|
|
<dd class="flex items-baseline"> |
|
|
<div class="text-2xl font-semibold text-gray-900">87%</div> |
|
|
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> |
|
|
<span>5%</span> |
|
|
</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-4">SDL Process Analysis</h2> |
|
|
<div class="bg-white shadow rounded-lg overflow-hidden"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-4"> |
|
|
|
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-pencil-ruler text-blue-500"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Requirement Design</h3> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Active Analysis:</span> 28 projects |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Risks Found:</span> 5 |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-blue-500 rounded-full" style="width: 82%"></div> |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">82% secure</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-code text-green-500"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Code Change</h3> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Active Analysis:</span> 63 projects |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Risks Found:</span> 12 |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-green-500 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">75% secure</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-yellow-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-vial text-yellow-500"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Security Testing</h3> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Active Analysis:</span> 42 projects |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Risks Found:</span> 8 |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-yellow-500 rounded-full" style="width: 68%"></div> |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">68% secure</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-rocket text-purple-500"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Release</h3> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Active Analysis:</span> 15 projects |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Risks Found:</span> 3 |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-purple-500 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">90% secure</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-red-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-globe text-red-500"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Online Operation</h3> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Active Analysis:</span> 37 projects |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Risks Found:</span> 7 |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-red-500 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">65% secure</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-medium text-gray-900">Risk Alerts</h2> |
|
|
<button class="text-sm text-blue-500 hover:text-blue-700">View All</button> |
|
|
</div> |
|
|
<div class="bg-white shadow rounded-lg overflow-hidden"> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
|
|
|
<div class="p-4 hover:bg-gray-50 cursor-pointer transition-colors" onclick="showProjectDetail('Alipay National Subsidy Project')"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 pt-1"> |
|
|
<div class="bg-red-100 p-2 rounded-full"> |
|
|
<i class="fas fa-exclamation-triangle text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Alipay National Subsidy Project</h3> |
|
|
<span class="text-xs text-gray-500">2 min ago</span> |
|
|
</div> |
|
|
<div class="mt-1 text-sm text-gray-600"> |
|
|
Risks found in <span class="font-medium">Code</span> and <span class="font-medium">Requirement</span> phases |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">SQL Injection</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Privilege Escalation</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 hover:bg-gray-50 cursor-pointer transition-colors" onclick="showProjectDetail('WeChat Mini Program Update')"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 pt-1"> |
|
|
<div class="bg-yellow-100 p-2 rounded-full"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h3 class="text-sm font-medium text-gray-900">WeChat Mini Program Update</h3> |
|
|
<span class="text-xs text-gray-500">15 min ago</span> |
|
|
</div> |
|
|
<div class="mt-1 text-sm text-gray-600"> |
|
|
Risks found in <span class="font-medium">Security Testing</span> phase |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">XSS Vulnerability</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">CSRF Vulnerability</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 hover:bg-gray-50 cursor-pointer transition-colors" onclick="showProjectDetail('Bank Payment Gateway')"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 pt-1"> |
|
|
<div class="bg-blue-100 p-2 rounded-full"> |
|
|
<i class="fas fa-exclamation-triangle text-blue-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Bank Payment Gateway</h3> |
|
|
<span class="text-xs text-gray-500">1 hour ago</span> |
|
|
</div> |
|
|
<div class="mt-1 text-sm text-gray-600"> |
|
|
Risks found in <span class="font-medium">Online Operation</span> phase |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Brute Force Attempts</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Suspicious Traffic</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-4">Recent Analysis Reports</h2> |
|
|
<div class="bg-white shadow rounded-lg overflow-hidden"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-check-circle text-green-500"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">E-commerce Platform</h3> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Status:</span> All clear |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-4"> |
|
|
Completed analysis for all SDL phases |
|
|
</div> |
|
|
<button class="w-full bg-green-50 text-green-700 py-1 px-3 rounded-md text-sm font-medium hover:bg-green-100"> |
|
|
View Report |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-yellow-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-exclamation-circle text-yellow-500"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Mobile Banking App</h3> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Status:</span> Minor issues |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-4"> |
|
|
2 low severity findings in Code phase |
|
|
</div> |
|
|
<button class="w-full bg-yellow-50 text-yellow-700 py-1 px-3 rounded-md text-sm font-medium hover:bg-yellow-100"> |
|
|
View Report |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-sync-alt text-blue-500"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">IoT Device Management</h3> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Status:</span> Analysis in progress |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-4"> |
|
|
3 of 5 phases completed |
|
|
</div> |
|
|
<button class="w-full bg-blue-50 text-blue-700 py-1 px-3 rounded-md text-sm font-medium hover:bg-blue-100"> |
|
|
View Progress |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="project-detail-view" class="hidden"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<button onclick="showDashboard()" class="mr-4 p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-arrow-left text-gray-600"></i> |
|
|
</button> |
|
|
<h1 class="text-2xl font-bold text-gray-900" id="project-title">Project Details</h1> |
|
|
<div class="ml-auto flex items-center"> |
|
|
<div class="bg-red-100 px-3 py-1 rounded-full text-sm font-medium text-red-800 mr-4"> |
|
|
<i class="fas fa-exclamation-triangle mr-1"></i> |
|
|
High Risk |
|
|
</div> |
|
|
<button class="bg-blue-50 text-blue-700 py-1 px-3 rounded-md text-sm font-medium hover:bg-blue-100"> |
|
|
<i class="fas fa-download mr-1"></i> Export Report |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-500">Project Name</h3> |
|
|
<p class="mt-1 text-sm text-gray-900" id="detail-project-name">Alipay National Subsidy Project</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-500">Project Owner</h3> |
|
|
<p class="mt-1 text-sm text-gray-900">Security Team A</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-500">Last Analyzed</h3> |
|
|
<p class="mt-1 text-sm text-gray-900">2 minutes ago</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-500">SDL Phase</h3> |
|
|
<div class="mt-1"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Requirement</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Code</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-500">Risk Level</h3> |
|
|
<p class="mt-1 text-sm text-gray-900">High (2 critical findings)</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-500">Security Score</h3> |
|
|
<div class="mt-1 flex items-center"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-red-500 h-2.5 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
<span class="ml-2 text-sm font-medium text-red-600">45%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="border-b border-gray-200"> |
|
|
<nav class="-mb-px flex space-x-8"> |
|
|
<button id="requirement-tab" onclick="showPhase('requirement')" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> |
|
|
Requirement Design |
|
|
</button> |
|
|
<button id="code-tab" onclick="showPhase('code')" class="border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> |
|
|
Code Change |
|
|
</button> |
|
|
<button id="testing-tab" onclick="showPhase('testing')" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> |
|
|
Security Testing |
|
|
</button> |
|
|
<button id="release-tab" onclick="showPhase('release')" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> |
|
|
Release |
|
|
</button> |
|
|
<button id="online-tab" onclick="showPhase('online')" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> |
|
|
Online Operation |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
|
|
|
<div id="requirement-content" class="hidden"> |
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Requirement Document</h3> |
|
|
<div class="border rounded-lg p-4 mb-4"> |
|
|
<h4 class="font-medium mb-2">Project Overview</h4> |
|
|
<p class="text-sm text-gray-600 mb-4"> |
|
|
The Alipay National Subsidy Project aims to distribute government subsidies to eligible citizens through the Alipay platform. The project involves creating new APIs for subsidy application, verification, and distribution. |
|
|
</p> |
|
|
<h4 class="font-medium mb-2">Technical Architecture</h4> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-4"> |
|
|
<img src="https://via.placeholder.com/600x300?text=Technical+Architecture+Diagram" alt="Technical Architecture" class="w-full h-auto rounded"> |
|
|
</div> |
|
|
<h4 class="font-medium mb-2">Key Features</h4> |
|
|
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1"> |
|
|
<li>User subsidy eligibility verification</li> |
|
|
<li>Subsidy amount calculation based on government rules</li> |
|
|
<li>Direct payment distribution to user Alipay accounts</li> |
|
|
<li>Administrative dashboard for monitoring</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="code-content"> |
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Code Repository</h3> |
|
|
<div class="mb-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="font-medium">SubsidyVerificationService.java</h4> |
|
|
<span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">High Risk</span> |
|
|
</div> |
|
|
<div class="code-block"> |
|
|
<pre><code class="text-sm">public class SubsidyVerificationService { |
|
|
@Autowired |
|
|
private UserRepository userRepository; |
|
|
|
|
|
public boolean verifyUserEligibility(Long userId) { |
|
|
// Vulnerable SQL query - concatenates user input directly |
|
|
String query = "SELECT * FROM users WHERE id = " + userId + " AND status = 'ACTIVE'"; |
|
|
User user = userRepository.executeRawQuery(query); |
|
|
|
|
|
if (user == null) { |
|
|
return false; |
|
|
} |
|
|
|
|
|
// No privilege check before accessing sensitive data |
|
|
return checkGovernmentCriteria(user); |
|
|
} |
|
|
|
|
|
private boolean checkGovernmentCriteria(User user) { |
|
|
// Implementation details... |
|
|
} |
|
|
}</code></pre> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="font-medium">PaymentDistributionController.java</h4> |
|
|
<span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">High Risk</span> |
|
|
</div> |
|
|
<div class="code-block"> |
|
|
<pre><code class="text-sm">@RestController |
|
|
@RequestMapping("/api/payments") |
|
|
public class PaymentDistributionController { |
|
|
|
|
|
@PostMapping("/distribute") |
|
|
public ResponseEntity distributePayment( |
|
|
@RequestBody PaymentRequest request, |
|
|
@RequestHeader("X-User-Role") String userRole) { |
|
|
|
|
|
// No proper validation of user role |
|
|
if (userRole.contains("admin")) { |
|
|
// Process payment without proper authorization checks |
|
|
PaymentService.distribute(request.getAmount(), request.getRecipientId()); |
|
|
return ResponseEntity.ok().build(); |
|
|
} |
|
|
|
|
|
return ResponseEntity.status(HttpStatus.FORBIDDEN).build(); |
|
|
} |
|
|
}</code></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="testing-content" class="hidden"> |
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Security Test Results</h3> |
|
|
<div class="border rounded-lg p-4 mb-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="font-medium">/api/payments/distribute</h4> |
|
|
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Medium Risk</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Test Type:</span> Privilege Escalation |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Payload:</span> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1"> |
|
|
POST /api/payments/distribute HTTP/1.1<br> |
|
|
Host: api.alipay.com<br> |
|
|
X-User-Role: admin<br> |
|
|
Content-Type: application/json<br> |
|
|
<br> |
|
|
{"amount": 1000, "recipientId": "attacker_account"} |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Result:</span> Payment was successfully processed despite the user not having admin privileges. |
|
|
</div> |
|
|
</div> |
|
|
<div class="border rounded-lg p-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="font-medium">/api/users/verify</h4> |
|
|
<span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">High Risk</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Test Type:</span> SQL Injection |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-2"> |
|
|
<span class="font-medium">Payload:</span> |
|
|
<div class="bg-gray-100 p-2 rounded mt-1"> |
|
|
GET /api/users/verify?userId=1%20OR%201=1-- HTTP/1.1<br> |
|
|
Host: api.alipay.com |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Result:</span> Returned all user records from the database, exposing sensitive information. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="release-content" class="hidden"> |
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Release Checklist</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Code Review Completed</h4> |
|
|
<p class="text-sm text-gray-600">All code changes have been peer reviewed</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-times-circle text-red-500 mt-1"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-900">SQL Injection Fixes</h4> |
|
|
<p class="text-sm text-gray-600">Critical SQL injection vulnerabilities not addressed</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-times-circle text-red-500 mt-1"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Privilege Escalation Fixes</h4> |
|
|
<p class="text-sm text-gray-600">Authorization bypass issues not resolved</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Dependency Updates</h4> |
|
|
<p class="text-sm text-gray-600">All dependencies updated to latest secure versions</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-gray-900">Performance Testing</h4> |
|
|
<p class="text-sm text-gray-600">Performance tests completed successfully</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="online-content" class="hidden"> |
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Production Monitoring</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
|
<div class="border rounded-lg p-4"> |
|
|
<h4 class="font-medium mb-2">Security Events</h4> |
|
|
<div class="text-sm text-gray-600 space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div> |
|
|
<span>3 SQL injection attempts blocked</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div> |
|
|
<span>12 suspicious login attempts</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> |
|
|
<span>0 successful breaches</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border rounded-lg p-4"> |
|
|
<h4 class="font-medium mb-2">Vulnerability Status</h4> |
|
|
<div class="text-sm text-gray-600 space-y-2"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span>Critical: 2</span> |
|
|
<span class="text-red-600">Not patched</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span>High: 0</span> |
|
|
<span class="text-green-600">Patched</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span>Medium: 1</span> |
|
|
<span class="text-yellow-600">In progress</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<h4 class="font-medium mb-2">Recent Incidents</h4> |
|
|
<div class="border rounded-lg p-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 pt-1"> |
|
|
<div class="bg-red-100 p-2 rounded-full"> |
|
|
<i class="fas fa-exclamation-triangle text-red-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<div class="text-sm font-medium text-gray-900">SQL Injection Attempt</div> |
|
|
<div class="text-sm text-gray-600">Blocked attempt to exploit unpatched vulnerability in SubsidyVerificationService</div> |
|
|
<div class="mt-1 text-xs text-gray-500">2 hours ago</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
<div id="requirement-analysis" class="hidden"> |
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Threat Modeling</h3> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-4"> |
|
|
<img src="https://via.placeholder.com/400x300?text=Threat+Modeling+Diagram" alt="Threat Modeling" class="w-full h-auto rounded"> |
|
|
</div> |
|
|
<h4 class="font-medium mb-2">Security Risks</h4> |
|
|
<div class="space-y-4"> |
|
|
<div class="risk-high p-3 rounded-lg"> |
|
|
<div class="font-medium">Privilege Escalation in Admin Dashboard</div> |
|
|
<div class="text-sm text-gray-600 mt-1"> |
|
|
<span class="font-medium">Business Scenario:</span> Admin dashboard for monitoring subsidy distributions |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Risk Point:</span> No proper role-based access control implementation specified |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Risk Type:</span> Authorization Bypass |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mt-2"> |
|
|
<span class="font-medium">Recommendation:</span> Implement proper RBAC with least privilege principles |
|
|
</div> |
|
|
</div> |
|
|
<div class="risk-medium p-3 rounded-lg"> |
|
|
<div class="font-medium">Data Exposure in Eligibility Verification</div> |
|
|
<div class="text-sm text-gray-600 mt-1"> |
|
|
<span class="font-medium">Business Scenario:</span> User subsidy eligibility verification |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Risk Point:</span> No encryption specified for sensitive user data |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Risk Type:</span> Data Exposure |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mt-2"> |
|
|
<span class="font-medium">Recommendation:</span> Add requirement for data encryption in transit and at rest |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="code-analysis"> |
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Code Analysis Findings</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="risk-high p-3 rounded-lg"> |
|
|
<div class="font-medium">SQL Injection in SubsidyVerificationService</div> |
|
|
<div class="text-sm text-gray-600 mt-1"> |
|
|
<span class="font-medium">Vulnerable File:</span> SubsidyVerificationService.java |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Line Number:</span> 42 |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Vulnerability:</span> Concatenates user input directly into SQL query |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mt-2"> |
|
|
<span class="font-medium">Recommendation:</span> Use prepared statements or ORM with parameterized queries |
|
|
</div> |
|
|
<button onclick="highlightCodeLine('SubsidyVerificationService.java', 42)" class="mt-2 text-xs text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-code mr-1"></i> Show in code |
|
|
</button> |
|
|
</div> |
|
|
<div class="risk-high p-3 rounded-lg"> |
|
|
<div class="font-medium">Privilege Escalation in PaymentDistributionController</div> |
|
|
<div class="text-sm text-gray-600 mt-1"> |
|
|
<span class="font-medium">Vulnerable File:</span> PaymentDistributionController.java |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Line Number:</span> 28 |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Vulnerability:</span> Role check can be bypassed with header manipulation |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mt-2"> |
|
|
<span class="font-medium">Recommendation:</span> Implement proper server-side authorization checks using Spring Security |
|
|
</div> |
|
|
<button onclick="highlightCodeLine('PaymentDistributionController.java', 28)" class="mt-2 text-xs text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-code mr-1"></i> Show in code |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="testing-analysis" class="hidden"> |
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Security Test Findings</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="risk-high p-3 rounded-lg"> |
|
|
<div class="font-medium">SQL Injection via User ID Parameter</div> |
|
|
<div class="text-sm text-gray-600 mt-1"> |
|
|
<span class="font-medium">Endpoint:</span> /api/users/verify |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Severity:</span> Critical |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Impact:</span> Full database access possible |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mt-2"> |
|
|
<span class="font-medium">Recommendation:</span> Fix the underlying code vulnerability in SubsidyVerificationService |
|
|
</div> |
|
|
</div> |
|
|
<div class="risk-medium p-3 rounded-lg"> |
|
|
<div class="font-medium">Privilege Escalation via Role Header</div> |
|
|
<div class="text-sm text-gray-600 mt-1"> |
|
|
<span class="font-medium">Endpoint:</span> /api/payments/distribute |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Severity:</span> High |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Impact:</span> Unauthorized users can distribute payments |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mt-2"> |
|
|
<span class="font-medium">Recommendation:</span> Implement proper server-side authorization checks |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="release-analysis" class="hidden"> |
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Release Risks</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="risk-high p-3 rounded-lg"> |
|
|
<div class="font-medium">Unaddressed SQL Injection</div> |
|
|
<div class="text-sm text-gray-600 mt-1"> |
|
|
<span class="font-medium">Phase:</span> Code |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Status:</span> Not fixed |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mt-2"> |
|
|
<span class="font-medium">Recommendation:</span> Block release until critical vulnerabilities are fixed |
|
|
</div> |
|
|
</div> |
|
|
<div class="risk-high p-3 rounded-lg"> |
|
|
<div class="font-medium">Unaddressed Privilege Escalation</div> |
|
|
<div class="text-sm text-gray-600 mt-1"> |
|
|
<span class="font-medium">Phase:</span> Code |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Status:</span> Not fixed |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mt-2"> |
|
|
<span class="font-medium">Recommendation:</span> Implement proper authorization checks before release |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="online-analysis" class="hidden"> |
|
|
<div class="bg-white shadow rounded-lg mb-6"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Production Risks</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="risk-high p-3 rounded-lg"> |
|
|
<div class="font-medium">Active Exploitation Attempts</div> |
|
|
<div class="text-sm text-gray-600 mt-1"> |
|
|
<span class="font-medium">Phase:</span> Code |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Vulnerability:</span> SQL Injection |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Status:</span> Attackers actively probing |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mt-2"> |
|
|
<span class="font-medium">Recommendation:</span> Emergency patch required |
|
|
</div> |
|
|
</div> |
|
|
<div class="risk-medium p-3 rounded-lg"> |
|
|
<div class="font-medium">Suspicious Activity</div> |
|
|
<div class="text-sm text-gray-600 mt-1"> |
|
|
<span class="font-medium">Phase:</span> Code |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Vulnerability:</span> Privilege Escalation |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span class="font-medium">Status:</span> Potential exploit attempts |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mt-2"> |
|
|
<span class="font-medium">Recommendation:</span> Monitor closely and prepare mitigation |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">AI Security Assistant</h3> |
|
|
<div class="chat-container"> |
|
|
<div class="chat-messages" id="chat-messages"> |
|
|
<div class="message-ai slide-in"> |
|
|
<div class="font-medium">AI Security Assistant</div> |
|
|
<div class="text-sm mt-1">Hello! I can help you analyze security risks in this project. What would you like to know?</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chat-input"> |
|
|
<div class="flex"> |
|
|
<input type="text" id="chat-input" placeholder="Ask about security risks..." class="flex-1 border rounded-l-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"> |
|
|
<button onclick="sendMessage()" class="bg-blue-500 text-white px-3 py-2 rounded-r-md text-sm hover:bg-blue-600"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function showProjectDetail(projectName) { |
|
|
document.getElementById('dashboard-view').classList.add('hidden'); |
|
|
document.getElementById('project-detail-view').classList.remove('hidden'); |
|
|
document.getElementById('project-title').textContent = projectName; |
|
|
document.getElementById('detail-project-name').textContent = projectName; |
|
|
|
|
|
|
|
|
showPhase('code'); |
|
|
} |
|
|
|
|
|
|
|
|
function showDashboard() { |
|
|
document.getElementById('dashboard-view').classList.remove('hidden'); |
|
|
document.getElementById('project-detail-view').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function showPhase(phase) { |
|
|
|
|
|
document.getElementById('requirement-content').classList.add('hidden'); |
|
|
document.getElementById('code-content').classList.add('hidden'); |
|
|
document.getElementById('testing-content').classList.add('hidden'); |
|
|
document.getElementById('release-content').classList.add('hidden'); |
|
|
document.getElementById('online-content').classList.add('hidden'); |
|
|
|
|
|
document.getElementById('requirement-analysis').classList.add('hidden'); |
|
|
document.getElementById('code-analysis').classList.add('hidden'); |
|
|
document.getElementById('testing-analysis').classList.add('hidden'); |
|
|
document.getElementById('release-analysis').classList.add('hidden'); |
|
|
document.getElementById('online-analysis').classList.add('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('requirement-tab').classList.remove('border-blue-500', 'text-blue-600'); |
|
|
document.getElementById('requirement-tab').classList.add('border-transparent', 'text-gray-500'); |
|
|
document.getElementById('code-tab').classList.remove('border-blue-500', 'text-blue-600'); |
|
|
document.getElementById('code-tab').classList.add('border-transparent', 'text-gray-500'); |
|
|
document.getElementById('testing-tab').classList.remove('border-blue-500', 'text-blue-600'); |
|
|
document.getElementById('testing-tab').classList.add('border-transparent', 'text-gray-500'); |
|
|
document.getElementById('release-tab').classList.remove('border-blue-500', 'text-blue-600'); |
|
|
document.getElementById('release-tab').classList.add('border-transparent', 'text-gray-500'); |
|
|
document.getElementById('online-tab').classList.remove('border-blue-500', 'text-blue-600'); |
|
|
document.getElementById('online-tab').classList.add('border-transparent', 'text-gray-500'); |
|
|
|
|
|
|
|
|
document.getElementById(phase + '-content').classList.remove('hidden'); |
|
|
document.getElementById(phase + '-analysis').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById(phase + '-tab').classList.add('border-blue-500', 'text-blue-600'); |
|
|
document.getElementById(phase + '-tab').classList.remove('border-transparent', 'text-gray-500'); |
|
|
} |
|
|
|
|
|
|
|
|
function highlightCodeLine(fileName, lineNumber) { |
|
|
alert(`Highlighting line ${lineNumber} in ${fileName} would be implemented in a real application.`); |
|
|
} |
|
|
|
|
|
|
|
|
function sendMessage() { |
|
|
const input = document.getElementById('chat-input'); |
|
|
const message = input.value.trim(); |
|
|
|
|
|
if (message) { |
|
|
|
|
|
const userMessage = document.createElement('div'); |
|
|
userMessage.className = 'message-user slide-in'; |
|
|
userMessage.innerHTML = ` |
|
|
<div class="font-medium">You</div> |
|
|
<div class="text-sm mt-1">${message}</div> |
|
|
`; |
|
|
document.getElementById('chat-messages').appendChild(userMessage); |
|
|
|
|
|
|
|
|
input.value = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const aiResponse = document.createElement('div'); |
|
|
aiResponse.className = 'message-ai slide-in'; |
|
|
|
|
|
let responseText = ''; |
|
|
if (message.toLowerCase().includes('sql') || message.toLowerCase().includes('injection')) { |
|
|
responseText = `The project has a critical SQL injection vulnerability in the SubsidyVerificationService. The issue occurs because user input is directly concatenated into SQL queries. I recommend using prepared statements or an ORM with parameterized queries to fix this.`; |
|
|
} else if (message.toLowerCase().includes('privilege') || message.toLowerCase().includes('auth')) { |
|
|
responseText = `There's a privilege escalation risk in the PaymentDistributionController. The current implementation checks user roles via a header that can be manipulated. You should implement proper server-side authorization checks using Spring Security's @PreAuthorize annotations.`; |
|
|
} else if (message.toLowerCase().includes('fix') || message.toLowerCase().includes('solution')) { |
|
|
responseText = `For immediate risks, I recommend:<br> |
|
|
1. Fixing the SQL injection by using parameterized queries<br> |
|
|
2. Implementing proper role checks in the payment controller<br> |
|
|
3. Adding input validation for all user-provided data`; |
|
|
} else { |
|
|
responseText = `I've analyzed this project and found several security risks. The most critical are SQL injection and privilege escalation vulnerabilities. Would you like me to provide more details about any specific area?`; |
|
|
} |
|
|
|
|
|
aiResponse.innerHTML = ` |
|
|
<div class="font-medium">AI Security Assistant</div> |
|
|
<div class="text-sm mt-1">${responseText}</div> |
|
|
`; |
|
|
document.getElementById('chat-messages').appendChild(aiResponse); |
|
|
|
|
|
|
|
|
document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight; |
|
|
}, 1000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('chat-input').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
</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=hackaigc/sdl2-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
