|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Adware Defense Game</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.js"></script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
overscroll-behavior: none; |
|
|
} |
|
|
.chat-bubble { |
|
|
max-width: 70%; |
|
|
padding: 10px 15px; |
|
|
border-radius: 20px; |
|
|
margin-bottom: 10px; |
|
|
word-wrap: break-word; |
|
|
} |
|
|
.user-bubble { |
|
|
background-color: #DCF8C6; |
|
|
align-self: flex-end; |
|
|
margin-left: auto; |
|
|
} |
|
|
.friend-bubble { |
|
|
background-color: #E5E7EB; |
|
|
align-self: flex-start; |
|
|
} |
|
|
.ad-bubble { |
|
|
background-color: #FECACA; |
|
|
border: 2px dashed #F87171; |
|
|
align-self: center; |
|
|
width: 80%; |
|
|
text-align: center; |
|
|
animation: fadeIn 0.5s ease-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.device-icon { |
|
|
font-size: 3rem; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
.control-button { |
|
|
padding: 0.75rem 1.5rem; |
|
|
border-radius: 0.5rem; |
|
|
font-weight: 600; |
|
|
transition: all 0.2s ease-in-out; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
} |
|
|
.control-button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15); |
|
|
} |
|
|
.control-button:active { |
|
|
transform: translateY(0px); |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
} |
|
|
.info-panel { |
|
|
background-color: rgba(0,0,0,0.75); |
|
|
color: white; |
|
|
padding: 2rem; |
|
|
border-radius: 1rem; |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
z-index: 100; |
|
|
width: 90%; |
|
|
max-width: 600px; |
|
|
text-align: center; |
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.3); |
|
|
} |
|
|
.info-panel h2 { |
|
|
font-size: 2rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
.info-panel p, .info-panel li { |
|
|
font-size: 1.1rem; |
|
|
line-height: 1.6; |
|
|
} |
|
|
.game-title { |
|
|
font-size: 2.5rem; |
|
|
font-weight: bold; |
|
|
margin-bottom: 1rem; |
|
|
color: #1E40AF; |
|
|
} |
|
|
.step-title { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 1rem; |
|
|
color: #1D4ED8; |
|
|
} |
|
|
.highlight-box { |
|
|
border: 3px dashed #F59E0B; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
margin-top: 1rem; |
|
|
background-color: #FFFBEB; |
|
|
} |
|
|
.mermaid-diagram-container { |
|
|
background-color: white; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
|
|
margin: 1rem 0; |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
.mermaid svg text { |
|
|
fill: #111827 !important; |
|
|
stroke: none !important; |
|
|
font-size: 16px !important; |
|
|
} |
|
|
.mermaid svg .label { |
|
|
font-size: 16px !important; |
|
|
} |
|
|
.mermaid svg .actor { |
|
|
fill: #BFDBFE !important; |
|
|
stroke: #3B82F6 !important; |
|
|
} |
|
|
.mermaid svg .messageText, .mermaid svg .noteText { |
|
|
font-size: 14px !important; |
|
|
} |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-blue-100 via-indigo-50 to-purple-100 min-h-screen flex flex-col items-center justify-center p-4 overflow-hidden"> |
|
|
|
|
|
<div id="gameContainer" class="w-full max-w-4xl bg-white p-6 rounded-xl shadow-2xl"> |
|
|
<h1 class="game-title text-center">🛡️ Adware Defense Sim 🛡️</h1> |
|
|
<p class="text-center text-gray-600 mb-6 text-lg">Experience how adware can inject ads and how to stay vigilant!</p> |
|
|
|
|
|
<div id="stepIndicator" class="text-center mb-4"> |
|
|
<span id="currentStep" class="text-xl font-bold text-indigo-600">Step 1</span> / 10 |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
|
|
|
<div class="border p-4 rounded-lg bg-gray-50 shadow-md"> |
|
|
<h2 class="step-title text-center">💻 Your PC (Chrome Browser)</h2> |
|
|
<div class="device-icon text-center">🖥️</div> |
|
|
<div id="pcChatArea" class="h-64 overflow-y-auto p-2 border rounded bg-white flex flex-col space-y-2"> |
|
|
|
|
|
</div> |
|
|
<input type="text" id="pcMessageInput" placeholder="Type a message..." class="w-full mt-2 p-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
|
|
<div id="pcInfo" class="text-sm text-gray-500 mt-2"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border p-4 rounded-lg bg-gray-50 shadow-md"> |
|
|
<h2 class="step-title text-center">📱 Your Android Phone (Fold2)</h2> |
|
|
<div class="device-icon text-center">📱</div> |
|
|
<div id="phoneChatArea" class="h-64 overflow-y-auto p-2 border rounded bg-white flex flex-col space-y-2"> |
|
|
|
|
|
</div> |
|
|
<div id="phoneInfo" class="text-sm text-gray-500 mt-2"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="gameMessage" class="text-center text-lg font-semibold my-4 p-3 bg-yellow-100 border border-yellow-300 rounded-lg text-yellow-800"> |
|
|
Welcome! Click "Next Step" to begin the simulation. |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-6"> |
|
|
<button id="nextStepButton" class="control-button bg-blue-600 hover:bg-blue-700 text-white"> |
|
|
Next Step 🚀 |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="mermaidContainer" class="mermaid-diagram-container hidden mt-8"> |
|
|
<h3 class="text-xl font-semibold text-center mb-2">Attack Flow Visualization</h3> |
|
|
<pre class="mermaid" id="mermaidDiagram"> |
|
|
// Diagram will be populated by JS |
|
|
</pre> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="infoPanel" class="info-panel hidden"> |
|
|
<h2 id="infoPanelTitle">Information</h2> |
|
|
<div id="infoPanelContent" class="text-left"></div> |
|
|
<button id="infoPanelCloseButton" class="control-button bg-green-500 hover:bg-green-600 text-white mt-6">Got it!</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
mermaid.initialize({ startOnLoad: false, theme: 'base', securityLevel: 'loose', |
|
|
fontFamily: 'Inter, sans-serif', |
|
|
themeVariables: { |
|
|
primaryColor: '#EFF6FF', |
|
|
primaryTextColor: '#111827', |
|
|
primaryBorderColor: '#60A5FA', |
|
|
lineColor: '#3B82F6', |
|
|
secondaryColor: '#DBEAFE', |
|
|
tertiaryColor: '#BFDBFE' |
|
|
} |
|
|
}); |
|
|
|
|
|
const pcChatArea = document.getElementById('pcChatArea'); |
|
|
const phoneChatArea = document.getElementById('phoneChatArea'); |
|
|
const pcMessageInput = document.getElementById('pcMessageInput'); |
|
|
const nextStepButton = document.getElementById('nextStepButton'); |
|
|
const gameMessage = document.getElementById('gameMessage'); |
|
|
const currentStepEl = document.getElementById('currentStep'); |
|
|
const pcInfo = document.getElementById('pcInfo'); |
|
|
const phoneInfo = document.getElementById('phoneInfo'); |
|
|
|
|
|
const mermaidContainer = document.getElementById('mermaidContainer'); |
|
|
const mermaidDiagramEl = document.getElementById('mermaidDiagram'); |
|
|
|
|
|
const infoPanel = document.getElementById('infoPanel'); |
|
|
const infoPanelTitle = document.getElementById('infoPanelTitle'); |
|
|
const infoPanelContent = document.getElementById('infoPanelContent'); |
|
|
const infoPanelCloseButton = document.getElementById('infoPanelCloseButton'); |
|
|
|
|
|
let step = 0; |
|
|
const totalSteps = 10; |
|
|
|
|
|
const steps = [ |
|
|
|
|
|
() => { |
|
|
gameMessage.textContent = "STEP 1: You're on your PC using Google Messages for web. Type a friendly message to your contact (e.g., 'Hello!') and imagine pressing Enter."; |
|
|
pcMessageInput.value = "Hello from my PC! 👋"; |
|
|
pcMessageInput.focus(); |
|
|
pcInfo.innerHTML = "💡 Google Messages for web syncs with your phone."; |
|
|
}, |
|
|
|
|
|
() => { |
|
|
const msgText = pcMessageInput.value || "Hello from my PC! 👋"; |
|
|
addChatMessage(pcChatArea, msgText, 'user'); |
|
|
gameMessage.textContent = "STEP 2: Message 'sent'! It appears on your PC and syncs to your Android phone via Google's servers (simulated Wi-Fi sync)."; |
|
|
setTimeout(() => { |
|
|
addChatMessage(phoneChatArea, msgText, 'user'); |
|
|
phoneInfo.innerHTML = "📱 Message received from PC via sync!"; |
|
|
}, 500); |
|
|
pcMessageInput.value = ""; |
|
|
}, |
|
|
|
|
|
() => { |
|
|
gameMessage.textContent = "STEP 3: Now, you paste a link into the chat on your PC. Let's say it's a link to a cool Hugging Face Space that shows an HTML component (e.g., from a YAML config)."; |
|
|
pcMessageInput.value = "https://huggingface.co/spaces/cool-project/app"; |
|
|
pcInfo.innerHTML = "🔗 Pasting a link often generates a preview."; |
|
|
}, |
|
|
|
|
|
() => { |
|
|
const linkText = pcMessageInput.value || "https://huggingface.co/spaces/cool-project/app"; |
|
|
addChatMessage(pcChatArea, `Pasted Link: ${linkText}`, 'user'); |
|
|
|
|
|
const previewBubble = document.createElement('div'); |
|
|
previewBubble.className = 'chat-bubble user-bubble'; |
|
|
previewBubble.innerHTML = ` |
|
|
<p class="font-semibold">Preview: Cool Project App</p> |
|
|
<p class="text-xs text-gray-600">${linkText}</p> |
|
|
<div class="mt-1 p-2 border border-gray-300 rounded bg-gray-100">✨ Interactive HTML Component ✨</div> |
|
|
`; |
|
|
pcChatArea.appendChild(previewBubble); |
|
|
pcChatArea.scrollTop = pcChatArea.scrollHeight; |
|
|
|
|
|
gameMessage.textContent = "STEP 4: The link preview for the Hugging Face Space appears normally in your PC chat. So far, so good..."; |
|
|
setTimeout(() => { |
|
|
addChatMessage(phoneChatArea, `Link: ${linkText}`, 'user'); |
|
|
const phonePreviewBubble = document.createElement('div'); |
|
|
phonePreviewBubble.className = 'chat-bubble user-bubble'; |
|
|
phonePreviewBubble.innerHTML = ` |
|
|
<p class="font-semibold">Preview: Cool Project App</p> |
|
|
<p class="text-xs text-gray-600">${linkText}</p> |
|
|
`; |
|
|
phoneChatArea.appendChild(phonePreviewBubble); |
|
|
phoneChatArea.scrollTop = phoneChatArea.scrollHeight; |
|
|
|
|
|
}, 500); |
|
|
pcMessageInput.value = ""; |
|
|
}, |
|
|
|
|
|
() => { |
|
|
gameMessage.innerHTML = ` |
|
|
<span class="text-red-600 font-bold text-xl">🚨 STEP 5: ATTACK! 🚨</span><br> |
|
|
Unknown to you, adware on your PC (e.g., a malicious browser extension) has been monitoring your web activity. |
|
|
Pasting the link and the page updating to show a preview triggered it! |
|
|
`; |
|
|
pcInfo.innerHTML = "<strong class='text-red-500'>🔴 Adware Activated!</strong> It's preparing to inject an ad by manipulating the webpage's code (DOM)."; |
|
|
pcChatArea.classList.add('border-red-500', 'border-2'); |
|
|
phoneChatArea.classList.remove('border-red-500', 'border-2'); |
|
|
}, |
|
|
|
|
|
async () => { |
|
|
gameMessage.textContent = "STEP 6: Let's visualize how this ad injection happens with a diagram."; |
|
|
mermaidContainer.classList.remove('hidden'); |
|
|
const diagramDefinition = ` |
|
|
sequenceDiagram |
|
|
actor UserPC as 💻 User on PC |
|
|
participant Browser as🌐 Chrome Browser (PC) |
|
|
participant AdwareExt as 😈 Adware Extension (PC) |
|
|
participant GoogleMessagesWeb as 💬 Google Messages Web UI |
|
|
participant AdServer as 💰 Ad Server (e.g., AdFox) |
|
|
|
|
|
UserPC->>Browser: Pastes link (e.g., HF Space) |
|
|
Browser->>GoogleMessagesWeb: Updates UI with link/preview |
|
|
Note over AdwareExt,GoogleMessagesWeb: Adware monitors DOM changes or network activity |
|
|
AdwareExt-->>GoogleMessagesWeb: 🔍 Detects UI update (trigger!) |
|
|
AdwareExt->>Browser: 💉 Injects malicious script into page |
|
|
Browser->>AdServer: Script requests ad content |
|
|
AdServer-->>Browser: Delivers ad 🖼️ (e.g., dealsbe.com) |
|
|
Browser->>GoogleMessagesWeb: Script manipulates DOM to display ad |
|
|
Note over GoogleMessagesWeb: Ad appears in chat flow, looking like part of it! |
|
|
UserPC-->>GoogleMessagesWeb: Sees unexpected ad 😡 |
|
|
`; |
|
|
mermaidDiagramEl.textContent = diagramDefinition; |
|
|
try { |
|
|
const { svg } = await mermaid.render('mermaid-graph', diagramDefinition); |
|
|
mermaidDiagramEl.innerHTML = svg; |
|
|
|
|
|
const svgElement = mermaidDiagramEl.querySelector('svg'); |
|
|
if (svgElement) { |
|
|
svgElement.setAttribute('height', '100%'); |
|
|
svgElement.setAttribute('width', '100%'); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} catch (error) { |
|
|
console.error("Mermaid rendering error:", error); |
|
|
mermaidDiagramEl.textContent = "Error rendering diagram. Please see console."; |
|
|
} |
|
|
pcInfo.innerHTML = "📜 Diagram shows the ad injection process."; |
|
|
}, |
|
|
|
|
|
() => { |
|
|
mermaidContainer.classList.add('hidden'); |
|
|
gameMessage.textContent = "STEP 7: The adware successfully injects an ad directly into your Google Messages chat flow on your PC!"; |
|
|
const adBubble = document.createElement('div'); |
|
|
adBubble.className = 'chat-bubble ad-bubble'; |
|
|
adBubble.innerHTML = ` |
|
|
<p class="font-bold text-lg">🎉 Special Offer from DealsBe.com! 🎉</p> |
|
|
<img src="https://placehold.co/300x150/FFDDDD/CC0000?text=Fake+AdFox+Ad!" alt="Fake Ad" class="mx-auto my-2 rounded shadow-sm"> |
|
|
<p class="text-sm">Click here for UNBEATABLE DEALS! (Don't actually click! 😉)</p> |
|
|
<p class="text-xs text-gray-700 mt-1">Powered by 🦊 AdFox (Simulated)</p> |
|
|
`; |
|
|
pcChatArea.appendChild(adBubble); |
|
|
pcChatArea.scrollTop = pcChatArea.scrollHeight; |
|
|
pcInfo.innerHTML = "<strong class='text-red-500'>⚠️ Injected Ad Displayed!</strong> This is NOT from Google Messages."; |
|
|
phoneInfo.innerHTML = "📱 Your phone chat remains clean... for now. The attack is on your PC's browser."; |
|
|
}, |
|
|
|
|
|
() => { |
|
|
gameMessage.textContent = "STEP 8: Your PC has a conceptual 'AI-Powered Security Sandbox' that monitors browser behavior for anomalies."; |
|
|
pcInfo.innerHTML = ` |
|
|
<div class="highlight-box"> |
|
|
<p class="text-lg font-semibold">🤖 AI Sandbox Activated! 🤖</p> |
|
|
<p>Scanning browser activity for unauthorized DOM manipulations and suspicious network requests...</p> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mt-2"> |
|
|
<div id="aiScanProgress" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
let progress = 0; |
|
|
const interval = setInterval(() => { |
|
|
progress += 10; |
|
|
document.getElementById('aiScanProgress').style.width = progress + '%'; |
|
|
if (progress >= 100) clearInterval(interval); |
|
|
}, 100); |
|
|
}, |
|
|
|
|
|
() => { |
|
|
gameMessage.innerHTML = ` |
|
|
<span class="text-green-600 font-bold text-xl">🛡️ STEP 9: THREAT DETECTED! 🛡️</span><br> |
|
|
The AI Sandbox identifies the unauthorized ad injection! |
|
|
`; |
|
|
pcInfo.innerHTML = ` |
|
|
<div class="highlight-box border-green-500 bg-green-50"> |
|
|
<p class="text-lg font-semibold text-green-700">✅ Anomaly Found!</p> |
|
|
<p>Detected: Unauthorized script modified chat interface.</p> |
|
|
<p>Source: Suspected adware browser extension.</p> |
|
|
<p>Action: Flagged suspicious activity.</p> |
|
|
</div> |
|
|
`; |
|
|
pcChatArea.classList.remove('border-red-500'); |
|
|
pcChatArea.classList.add('border-green-500'); |
|
|
}, |
|
|
|
|
|
() => { |
|
|
gameMessage.textContent = "STEP 10: Understanding the Threat & Solution."; |
|
|
showInfoPanel( |
|
|
"💡 Understanding & Defense 💡", |
|
|
` |
|
|
<p class="mb-3">You've seen how adware can sneakily inject ads. This wasn't Google's fault, but a malicious program on <em>your PC</em>.</p> |
|
|
<p class="mb-3"><strong>Key Takeaways:</strong></p> |
|
|
<ul class="list-disc list-inside mb-3 text-left space-y-1"> |
|
|
<li>Adware often comes from unsafe downloads or deceptive browser extensions.</li> |
|
|
<li>It manipulates website code (DOM) locally in <em>your browser</em>.</li> |
|
|
<li>Your actual message content is usually not the primary target for simple ad-injectors, but your browsing data might be.</li> |
|
|
<li>Google Messages' Privacy Policy covers their service, not third-party malware on your device. Always check extension permissions!</li> |
|
|
</ul> |
|
|
<div class="p-4 bg-blue-800 rounded-lg mt-4"> |
|
|
<h3 class="text-xl font-semibold mb-2">✨ Introducing 'Guardian AI Shield' (Conceptual) ✨</h3> |
|
|
<p>Imagine an advanced AI agent, like the one that detected this, constantly protecting you!</p> |
|
|
<p class="mt-2"><strong>Guardian AI Shield could:</strong></p> |
|
|
<ul class="list-disc list-inside text-left space-y-1"> |
|
|
<li>Proactively block known adware sources.</li> |
|
|
<li>Detect and neutralize new ad injection techniques in real-time.</li> |
|
|
<li>Analyze browser extension behavior for risks.</li> |
|
|
<li>Offer one-click cleanup of detected threats.</li> |
|
|
</ul> |
|
|
<p class="mt-3 font-semibold">Stay safe by being vigilant and using robust security tools!</p> |
|
|
</div> |
|
|
` |
|
|
); |
|
|
nextStepButton.textContent = "Restart Simulation 🔄"; |
|
|
nextStepButton.classList.remove('bg-blue-600', 'hover:bg-blue-700'); |
|
|
nextStepButton.classList.add('bg-green-600', 'hover:bg-green-700'); |
|
|
} |
|
|
]; |
|
|
|
|
|
function addChatMessage(area, message, type) { |
|
|
const bubble = document.createElement('div'); |
|
|
bubble.className = `chat-bubble ${type === 'user' ? 'user-bubble' : (type === 'friend' ? 'friend-bubble' : 'ad-bubble')}`; |
|
|
bubble.textContent = message; |
|
|
area.appendChild(bubble); |
|
|
area.scrollTop = area.scrollHeight; |
|
|
} |
|
|
|
|
|
function showInfoPanel(title, content) { |
|
|
infoPanelTitle.textContent = title; |
|
|
infoPanelContent.innerHTML = content; |
|
|
infoPanel.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
infoPanelCloseButton.addEventListener('click', () => { |
|
|
infoPanel.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
function resetSimulation() { |
|
|
step = 0; |
|
|
pcChatArea.innerHTML = ''; |
|
|
phoneChatArea.innerHTML = ''; |
|
|
pcMessageInput.value = ''; |
|
|
pcInfo.innerHTML = ''; |
|
|
phoneInfo.innerHTML = ''; |
|
|
mermaidContainer.classList.add('hidden'); |
|
|
mermaidDiagramEl.innerHTML = ''; |
|
|
pcChatArea.classList.remove('border-red-500', 'border-green-500', 'border-2'); |
|
|
nextStepButton.textContent = "Next Step 🚀"; |
|
|
nextStepButton.classList.remove('bg-green-600', 'hover:bg-green-700'); |
|
|
nextStepButton.classList.add('bg-blue-600', 'hover:bg-blue-700'); |
|
|
updateStepIndicator(); |
|
|
steps[step](); |
|
|
} |
|
|
|
|
|
function updateStepIndicator() { |
|
|
currentStepEl.textContent = `Step ${step + 1}`; |
|
|
} |
|
|
|
|
|
nextStepButton.addEventListener('click', () => { |
|
|
if (step < totalSteps -1) { |
|
|
step++; |
|
|
updateStepIndicator(); |
|
|
steps[step](); |
|
|
} else if (step === totalSteps -1 && nextStepButton.textContent.includes("Restart")) { |
|
|
resetSimulation(); |
|
|
} else { |
|
|
steps[step](); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
updateStepIndicator(); |
|
|
steps[step](); |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
