本次提交包含完整的AI SOC(Security Operations Center)分析师平台,支持本地大模型和Claude API集成,实现端到端的安全威胁分析。 ## 🚀 主要功能 ### 后端架构 (FastAPI) - **多源数据接入**: 支持JSON/CSV格式安全告警数据上传 - **智能预处理**: 基于YAML配置的字段映射和实体提取 - **图分析引擎**: NetworkX驱动的攻击链图构建和分析 - **评分系统**: 实体和子图的多维度风险评分算法 - **LLM集成**: 支持多提供商(Claude、OpenAI、本地模型)的智能报告生成 - **API接口**: 完整的RESTful API (Swagger文档: /docs) ### 前端界面 (Vue 3 + TypeScript) - **拖拽上传**: 支持拖拽上传和实时预览 - **管道分析**: 可视化的数据处理管道状态 - **智能报告**: 动态生成的威胁分析报告和可视化 - **响应式设计**: 适配桌面和移动端的现代UI ### LLM智能分析 - **多模型支持**: qwen3(8B/32B)、deepseek-r1(70B)、Claude 4等 - **超时优化**: 分层超时配置(120s-600s)适配不同模型规模 - **内容清理**: 自动过滤模型思考过程,输出专业分析报告 - **中文优化**: 针对中文安全分析场景的prompt工程 ## 🛠️ 技术栈 **后端**: FastAPI + SQLAlchemy + NetworkX + 多LLM提供商 **前端**: Vue 3 + TypeScript + Naive UI + Tailwind CSS + Vite **数据处理**: YAML配置 + JSONPath表达式 **部署**: Docker支持 + 环境变量配置 ## 🐛 修复的关键问题 1. **LLM超时问题**: 实现前后端分层超时配置,支持大模型长时间推理 2. **报告格式化**: 修复Markdown渲染和换行符显示问题 3. **数据映射**: 统一前后端字段命名和数据结构映射 4. **时间格式**: 修复时间戳解析和中文本地化显示 5. **思考标签清理**: 自动过滤qwen模型的<think>标签 ## 📊 测试数据 包含完整的多阶段APT攻击场景测试数据: - 钓鱼邮件 → 恶意软件执行 → C2通信 - 云凭证窃取 → 资源探测 → 横向渗透 - 后门用户创建 → 权限提升 → 容器控制 ## 🔧 开发工具 - **模型切换**: switch_model.py 支持快速切换本地LLM模型 - **超时测试**: test_llm_timeout.py 验证不同模型性能 - **依赖安装**: install_llm_deps.py 自动安装LLM依赖 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
639 lines
38 KiB
HTML
639 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI SOC分析师</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">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#1e40af',
|
|
secondary: '#3b82f6',
|
|
accent: '#60a5fa',
|
|
dark: '#0f172a',
|
|
light: '#f8fafc'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.upload-area {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.upload-area:hover {
|
|
border-color: #3b82f6;
|
|
background-color: #eff6ff;
|
|
}
|
|
.upload-area.drag-over {
|
|
border-color: #3b82f6;
|
|
background-color: #dbeafe;
|
|
}
|
|
.alert-card {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.alert-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.confidence-high { background: linear-gradient(90deg, #10b981, #059669); }
|
|
.confidence-medium { background: linear-gradient(90deg, #f59e0b, #d97706); }
|
|
.confidence-low { background: linear-gradient(90deg, #ef4444, #dc2626); }
|
|
.stage-recon { background-color: #dbeafe; color: #1e40af; }
|
|
.stage-initial { background-color: #dcfce7; color: #166534; }
|
|
.stage-execution { background-color: #fef3c7; color: #92400e; }
|
|
.stage-persistence { background-color: #ffe4e6; color: #be123c; }
|
|
.stage-privilege { background-color: #f3e8ff; color: #7c3aed; }
|
|
.stage-exfiltration { background-color: #ffedd5; color: #c2410c; }
|
|
.animate-pulse-slow {
|
|
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
.data-type.selected {
|
|
border-color: #3b82f6;
|
|
background-color: #eff6ff;
|
|
}
|
|
.data-type.selected .checked-icon {
|
|
opacity: 1;
|
|
}
|
|
.filter-btn.active {
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<!-- Header -->
|
|
<header class="bg-primary text-white shadow-lg">
|
|
<div class="container mx-auto px-4 py-6 flex flex-col md:flex-row justify-between items-center">
|
|
<div class="flex items-center mb-4 md:mb-0">
|
|
<i class="fas fa-brain text-3xl mr-3"></i>
|
|
<h1 class="text-2xl md:text-3xl font-bold">AI SOC分析师</h1>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="bg-accent rounded-full p-2 animate-pulse-slow">
|
|
<i class="fas fa-robot text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto px-4 py-8">
|
|
<!-- Upload Section -->
|
|
<section class="mb-12">
|
|
<div class="bg-white rounded-xl shadow-lg p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
|
<i class="fas fa-file-upload text-secondary mr-3"></i>
|
|
告警数据上传
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- File Upload Area -->
|
|
<div class="upload-area border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer bg-gray-50"
|
|
id="uploadArea">
|
|
<i class="fas fa-cloud-upload-alt text-5xl text-gray-400 mb-4"></i>
|
|
<h3 class="text-xl font-semibold text-gray-700 mb-2">拖拽文件到此处或点击上传</h3>
|
|
<p class="text-gray-500 mb-4">支持 JSON 或 CSV 格式的安全告警文件</p>
|
|
<button class="bg-secondary hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">
|
|
<i class="fas fa-folder-open mr-2"></i>选择文件
|
|
</button>
|
|
<input type="file" id="fileInput" class="hidden" accept=".json,.csv">
|
|
</div>
|
|
|
|
<!-- File Type Selection -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-700">选择告警数据类型</h3>
|
|
<div class="relative">
|
|
<input type="text" id="searchInput" placeholder="搜索..." class="pl-8 pr-4 py-1 border rounded-lg text-sm">
|
|
<i class="fas fa-search absolute left-2 top-2 text-gray-400 text-sm"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs cursor-pointer filter-btn active" data-filter="all">全部</span>
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs cursor-pointer filter-btn" data-filter="siem">SIEM</span>
|
|
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs cursor-pointer filter-btn" data-filter="edr">EDR</span>
|
|
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs cursor-pointer filter-btn" data-filter="network">网络</span>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-3">
|
|
<input type="radio" id="selectSingle" name="selectionMode" class="form-radio h-4 w-4 text-secondary rounded" checked>
|
|
<label for="selectSingle" class="ml-2 text-gray-700 text-sm">单选模式</label>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-80 overflow-y-auto p-2">
|
|
<div class="border rounded-lg p-3 hover:border-secondary cursor-pointer transition duration-300 bg-white data-type" data-category="siem">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
|
|
<i class="fab fa-microsoft text-lg text-blue-600"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-sm">Microsoft Sentinel</div>
|
|
<div class="text-xs text-gray-500">云原生SIEM</div>
|
|
</div>
|
|
<i class="fas fa-check-circle text-secondary ml-auto opacity-0 checked-icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-lg p-3 hover:border-secondary cursor-pointer transition duration-300 bg-white data-type" data-category="siem">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-3">
|
|
<i class="fab fa-splunk text-lg text-orange-500"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-sm">Splunk</div>
|
|
<div class="text-xs text-gray-500">企业级SIEM</div>
|
|
</div>
|
|
<i class="fas fa-check-circle text-secondary ml-auto opacity-0 checked-icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-lg p-3 hover:border-secondary cursor-pointer transition duration-300 bg-white data-type" data-category="siem">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
|
|
<i class="fas fa-shield-alt text-lg text-green-600"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-sm">Elastic SIEM</div>
|
|
<div class="text-xs text-gray-500">开源SIEM解决方案</div>
|
|
</div>
|
|
<i class="fas fa-check-circle text-secondary ml-auto opacity-0 checked-icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-lg p-3 hover:border-secondary cursor-pointer transition duration-300 bg-white data-type" data-category="edr">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3">
|
|
<i class="fas fa-fire text-lg text-red-600"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-sm">FireEye HX</div>
|
|
<div class="text-xs text-gray-500">端点检测响应</div>
|
|
</div>
|
|
<i class="fas fa-check-circle text-secondary ml-auto opacity-0 checked-icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-lg p-3 hover:border-secondary cursor-pointer transition duration-300 bg-white data-type" data-category="edr">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
|
|
<i class="fas fa-crown text-lg text-indigo-600"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-sm">CrowdStrike Falcon</div>
|
|
<div class="text-xs text-gray-500">云工作负载保护</div>
|
|
</div>
|
|
<i class="fas fa-check-circle text-secondary ml-auto opacity-0 checked-icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-lg p-3 hover:border-secondary cursor-pointer transition duration-300 bg-white data-type" data-category="network">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-teal-100 flex items-center justify-center mr-3">
|
|
<i class="fas fa-network-wired text-lg text-teal-600"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-sm">Cisco Stealthwatch</div>
|
|
<div class="text-xs text-gray-500">网络流量分析</div>
|
|
</div>
|
|
<i class="fas fa-check-circle text-secondary ml-auto opacity-0 checked-icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-lg p-3 hover:border-secondary cursor-pointer transition duration-300 bg-white data-type" data-category="siem">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center mr-3">
|
|
<i class="fas fa-database text-lg text-pink-600"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-sm">IBM QRadar</div>
|
|
<div class="text-xs text-gray-500">安全信息事件管理</div>
|
|
</div>
|
|
<i class="fas fa-check-circle text-secondary ml-auto opacity-0 checked-icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="border rounded-lg p-3 hover:border-secondary cursor-pointer transition duration-300 bg-white data-type" data-category="edr">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
|
|
<i class="fas fa-shield-virus text-lg text-yellow-600"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-sm">Carbon Black</div>
|
|
<div class="text-xs text-gray-500">下一代防病毒</div>
|
|
</div>
|
|
<i class="fas fa-check-circle text-secondary ml-auto opacity-0 checked-icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-4">分析设置</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="realtime" class="form-checkbox h-5 w-5 text-secondary rounded">
|
|
<label for="realtime" class="ml-2 text-gray-700">实时分析</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="correlation" class="form-checkbox h-5 w-5 text-secondary rounded" checked>
|
|
<label for="correlation" class="ml-2 text-gray-700">启用威胁关联分析</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="behavioral" class="form-checkbox h-5 w-5 text-secondary rounded" checked>
|
|
<label for="behavioral" class="ml-2 text-gray-700">行为模式识别</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 flex justify-center">
|
|
<button id="analyzeBtn" class="bg-gradient-to-r from-primary to-secondary hover:from-blue-800 hover:to-blue-600 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg">
|
|
<i class="fas fa-bolt mr-2"></i>开始AI分析
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Results Section -->
|
|
<section id="resultsSection" class="hidden">
|
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
|
<i class="fas fa-chart-bar text-secondary mr-3"></i>
|
|
分析结果概览
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<div class="bg-gradient-to-br from-red-50 to-red-100 rounded-xl p-5 border border-red-200">
|
|
<div class="text-red-800 text-3xl font-bold mb-2">24</div>
|
|
<div class="text-red-600 font-medium">高风险告警</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-xl p-5 border border-yellow-200">
|
|
<div class="text-yellow-800 text-3xl font-bold mb-2">42</div>
|
|
<div class="text-yellow-600 font-medium">中风险告警</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-5 border border-green-200">
|
|
<div class="text-green-800 text-3xl font-bold mb-2">18</div>
|
|
<div class="text-green-600 font-medium">低风险告警</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-5 border border-blue-200">
|
|
<div class="text-blue-800 text-3xl font-bold mb-2">8</div>
|
|
<div class="text-blue-600 font-medium">潜在攻击链</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-5">
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-4">威胁情报摘要</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">APT28</span>
|
|
<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Cobalt Strike</span>
|
|
<span class="bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm">Ransomware</span>
|
|
<span class="bg-teal-100 text-teal-800 px-3 py-1 rounded-full text-sm">Phishing</span>
|
|
<span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Malware</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- High Confidence Alerts -->
|
|
<div class="bg-white rounded-xl shadow-lg p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
|
|
<i class="fas fa-exclamation-triangle text-yellow-500 mr-3"></i>
|
|
高置信度告警摘要
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Alert 1 -->
|
|
<div class="alert-card border rounded-xl overflow-hidden bg-white shadow-md">
|
|
<div class="p-5 border-b">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between">
|
|
<h3 class="text-xl font-bold text-gray-800">可疑横向移动活动</h3>
|
|
<div class="flex items-center mt-2 md:mt-0">
|
|
<span class="confidence-high text-white px-3 py-1 rounded-full text-sm font-bold mr-3">高置信度 (92%)</span>
|
|
<span class="stage-execution px-3 py-1 rounded-full text-sm font-medium">执行阶段</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-700 mb-2 flex items-center">
|
|
<i class="fas fa-user-shield mr-2 text-secondary"></i>风险实体
|
|
</h4>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-center">
|
|
<i class="fas fa-desktop text-gray-500 mr-2"></i>
|
|
<span>WORKSTATION-07 (192.168.1.45)</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fas fa-user text-gray-500 mr-2"></i>
|
|
<span>张伟 (zhangwei@company.com)</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fas fa-server text-gray-500 mr-2"></i>
|
|
<span>FILE-SERVER-01 (10.0.1.23)</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<h4 class="font-semibold text-gray-700 mt-4 mb-2 flex items-center">
|
|
<i class="fas fa-file-medical mr-2 text-secondary"></i>风险概览
|
|
</h4>
|
|
<p class="text-gray-600">
|
|
检测到从内部工作站 <span class="text-blue-600 font-semibold">WORKSTATION-07</span> 到文件服务器 <span class="text-blue-600 font-semibold">FILE-SERVER-01</span> 的异常SMB连接活动,时间间隔小于1秒,符合横向移动特征。
|
|
与已知APT28攻击模式高度匹配。
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-semibold text-gray-700 mb-2 flex items-center">
|
|
<i class="fas fa-fingerprint mr-2 text-secondary"></i>关键证据
|
|
</h4>
|
|
<ul class="space-y-3">
|
|
<li class="border-l-4 border-blue-500 pl-3 py-1">
|
|
<div class="font-medium">时间: 2023-07-15 14:32:18</div>
|
|
<div class="text-sm text-gray-600">来源: Microsoft Defender ATP</div>
|
|
<div class="text-sm text-gray-500 mt-1">检测到异常的PowerShell命令执行,尝试访问系统敏感目录。</div>
|
|
</li>
|
|
<li class="border-l-4 border-green-500 pl-3 py-1">
|
|
<div class="font-medium">时间: 2023-07-15 14:32:19</div>
|
|
<div class="text-sm text-gray-600">来源: Windows Security Log</div>
|
|
<div class="text-sm text-gray-500 mt-1">记录到非法的管理员权限提升操作,使用了已知的漏洞利用工具。</div>
|
|
</li>
|
|
<li class="border-l-4 border-yellow-500 pl-3 py-1">
|
|
<div class="font-medium">时间: 2023-07-15 14:32:20</div>
|
|
<div class="text-sm text-gray-600">来源: Network Flow Data</div>
|
|
<div class="text-sm text-gray-500 mt-1">发现加密流量中的命令控制通信特征,与APT组织常用协议匹配。</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<h4 class="font-semibold text-gray-700 mt-4 mb-2 flex items-center">
|
|
<i class="fas fa-lightbulb mr-2 text-secondary"></i>处置建议
|
|
</h4>
|
|
<div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-3">
|
|
<h5 class="font-bold text-red-700 mb-1">立即行动:</h5>
|
|
<ul class="list-disc pl-5 text-red-600 text-sm">
|
|
<li>隔离受影响的工作站和文件服务器</li>
|
|
<li>重置相关账户密码</li>
|
|
<li>检查服务器上的异常文件</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
|
<h5 class="font-bold text-blue-700 mb-1">后续调查:</h5>
|
|
<ul class="list-disc pl-5 text-blue-600 text-sm">
|
|
<li>审查过去72小时的相关日志</li>
|
|
<li>检查其他工作站是否存在类似活动</li>
|
|
<li>更新防火墙规则阻止异常SMB连接</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert 2 -->
|
|
<div class="alert-card border rounded-xl overflow-hidden bg-white shadow-md">
|
|
<div class="p-5 border-b">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between">
|
|
<h3 class="text-xl font-bold text-gray-800">可疑数据外泄活动</h3>
|
|
<div class="flex items-center mt-2 md:mt-0">
|
|
<span class="confidence-high text-white px-3 py-1 rounded-full text-sm font-bold mr-3">高置信度 (87%)</span>
|
|
<span class="stage-exfiltration px-3 py-1 rounded-full text-sm font-medium">数据窃取阶段</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-700 mb-2 flex items-center">
|
|
<i class="fas fa-user-shield mr-2 text-secondary"></i>风险实体
|
|
</h4>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-center">
|
|
<i class="fas fa-desktop text-gray-500 mr-2"></i>
|
|
<span>FINANCE-PC-12 (192.168.3.78)</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fas fa-user text-gray-500 mr-2"></i>
|
|
<span>李娜 (lina@company.com)</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fas fa-globe text-gray-500 mr-2"></i>
|
|
<span>外部IP: 203.0.113.45</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<h4 class="font-semibold text-gray-700 mt-4 mb-2 flex items-center">
|
|
<i class="fas fa-file-medical mr-2 text-secondary"></i>风险概览
|
|
</h4>
|
|
<p class="text-gray-600">
|
|
检测到财务部门计算机 <span class="text-blue-600 font-semibold">FINANCE-PC-12</span> 向未知外部IP地址 <span class="text-blue-600 font-semibold">203.0.113.45</span> 传输大量加密数据,传输模式与已知数据窃取活动相符。
|
|
传输时间发生在非工作时间,增加了恶意活动的可能性。
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-semibold text-gray-700 mb-2 flex items-center">
|
|
<i class="fas fa-fingerprint mr-2 text-secondary"></i>关键证据
|
|
</h4>
|
|
<ul class="space-y-3">
|
|
<li class="border-l-4 border-blue-500 pl-3 py-1">
|
|
<div class="font-medium">时间: 2023-07-15 02:15:33</div>
|
|
<div class="text-sm text-gray-600">来源: Network IDS</div>
|
|
<div class="text-sm text-gray-500 mt-1">检测到大量数据库查询命令通过非标准端口传输,疑似数据抽取。</div>
|
|
</li>
|
|
<li class="border-l-4 border-green-500 pl-3 py-1">
|
|
<div class="font-medium">时间: 2023-07-15 02:16:01</div>
|
|
<div class="text-sm text-gray-600">来源: Firewall Logs</div>
|
|
<div class="text-sm text-gray-500 mt-1">观察到异常的TCP连接建立模式,与已知数据外泄工具特征一致。</div>
|
|
</li>
|
|
<li class="border-l-4 border-yellow-500 pl-3 py-1">
|
|
<div class="font-medium">时间: 2023-07-15 02:16:22</div>
|
|
<div class="text-sm text-gray-600">来源: DLP System</div>
|
|
<div class="text-sm text-gray-500 mt-1">拦截到包含客户个人信息的压缩文件被上传至云存储服务。</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<h4 class="font-semibold text-gray-700 mt-4 mb-2 flex items-center">
|
|
<i class="fas fa-lightbulb mr-2 text-secondary"></i>处置建议
|
|
</h4>
|
|
<div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-3">
|
|
<h5 class="font-bold text-red-700 mb-1">立即行动:</h5>
|
|
<ul class="list-disc pl-5 text-red-600 text-sm">
|
|
<li>阻断与外部IP的连接</li>
|
|
<li>隔离财务部门计算机</li>
|
|
<li>审查用户账户活动</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
|
<h5 class="font-bold text-blue-700 mb-1">后续调查:</h5>
|
|
<ul class="list-disc pl-5 text-blue-600 text-sm">
|
|
<li>分析传输数据的性质和范围</li>
|
|
<li>检查其他财务系统访问记录</li>
|
|
<li>评估潜在数据泄露影响</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-dark text-white py-8 mt-12">
|
|
<div class="container mx-auto px-4 text-center">
|
|
<p class="mb-2">AI SOC分析师 - 智能威胁检测与响应平台</p>
|
|
<p class="text-gray-400 text-sm">© 2023 AI SOC Analyst. 所有权利 reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const uploadArea = document.getElementById('uploadArea');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const analyzeBtn = document.getElementById('analyzeBtn');
|
|
const resultsSection = document.getElementById('resultsSection');
|
|
const searchInput = document.getElementById('searchInput');
|
|
const selectSingleRadio = document.getElementById('selectSingle');
|
|
const dataTypeItems = document.querySelectorAll('.data-type');
|
|
const filterButtons = document.querySelectorAll('.filter-btn');
|
|
|
|
// 文件上传区域点击事件
|
|
uploadArea.addEventListener('click', () => {
|
|
fileInput.click();
|
|
});
|
|
|
|
// 文件拖拽事件
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
uploadArea.addEventListener(eventName, preventDefaults, false);
|
|
});
|
|
|
|
function preventDefaults(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => {
|
|
uploadArea.addEventListener(eventName, highlight, false);
|
|
});
|
|
|
|
['dragleave', 'drop'].forEach(eventName => {
|
|
uploadArea.addEventListener(eventName, unhighlight, false);
|
|
});
|
|
|
|
function highlight() {
|
|
uploadArea.classList.add('drag-over');
|
|
}
|
|
|
|
function unhighlight() {
|
|
uploadArea.classList.remove('drag-over');
|
|
}
|
|
|
|
// 处理文件拖放
|
|
uploadArea.addEventListener('drop', handleDrop, false);
|
|
|
|
function handleDrop(e) {
|
|
const dt = e.dataTransfer;
|
|
const files = dt.files;
|
|
handleFiles(files);
|
|
}
|
|
|
|
// 处理文件选择
|
|
fileInput.addEventListener('change', function() {
|
|
handleFiles(this.files);
|
|
});
|
|
|
|
function handleFiles(files) {
|
|
if (files.length > 0) {
|
|
const file = files[0];
|
|
const fileName = file.name;
|
|
const fileSize = (file.size / 1024 / 1024).toFixed(2);
|
|
|
|
uploadArea.innerHTML = `
|
|
<i class="fas fa-file-alt text-5xl text-secondary mb-4"></i>
|
|
<h3 class="text-xl font-semibold text-gray-700 mb-2">文件已选择</h3>
|
|
<p class="text-gray-600 mb-2">${fileName}</p>
|
|
<p class="text-gray-500 text-sm mb-4">${fileSize} MB</p>
|
|
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-6 rounded-full transition duration-300">
|
|
<i class="fas fa-sync-alt mr-2"></i>重新选择
|
|
</button>
|
|
`;
|
|
|
|
// 重新绑定事件
|
|
uploadArea.querySelector('button').addEventListener('click', () => {
|
|
fileInput.click();
|
|
});
|
|
}
|
|
}
|
|
|
|
// 分析按钮点击事件
|
|
analyzeBtn.addEventListener('click', function() {
|
|
// 显示加载状态
|
|
analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>AI分析中...';
|
|
analyzeBtn.disabled = true;
|
|
|
|
// 模拟分析过程
|
|
setTimeout(() => {
|
|
// 显示结果
|
|
resultsSection.classList.remove('hidden');
|
|
|
|
// 滚动到结果区域
|
|
resultsSection.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
// 恢复按钮状态
|
|
analyzeBtn.innerHTML = '<i class="fas fa-bolt mr-2"></i>开始AI分析';
|
|
analyzeBtn.disabled = false;
|
|
}, 3000);
|
|
});
|
|
|
|
// 数据类型选择功能(单选)
|
|
dataTypeItems.forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
// 清除所有已选项
|
|
dataTypeItems.forEach(i => i.classList.remove('selected'));
|
|
// 选中当前项
|
|
this.classList.add('selected');
|
|
});
|
|
});
|
|
|
|
// 搜索功能
|
|
searchInput.addEventListener('input', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
dataTypeItems.forEach(item => {
|
|
const text = item.textContent.toLowerCase();
|
|
item.style.display = text.includes(searchTerm) ? '' : 'none';
|
|
});
|
|
});
|
|
|
|
// 过滤功能
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// 更新激活状态
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
const filter = this.getAttribute('data-filter');
|
|
|
|
dataTypeItems.forEach(item => {
|
|
if (filter === 'all') {
|
|
item.style.display = '';
|
|
} else {
|
|
const category = item.getAttribute('data-category');
|
|
item.style.display = category === filter ? '' : 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// 为告警卡片添加点击事件
|
|
document.querySelectorAll('.alert-card').forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
this.classList.toggle('ring-2');
|
|
this.classList.toggle('ring-secondary');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |