Show description
XSS_HAZARD // SCRIPT_INJECTOR
XSS_HAZARD // SCRIPT_INJECTOR
⚠️ XSS_HAZARD
SANDBOX ENVIRONMENT
Injection Console
SANITIZATION FILTER
COMMENT PAYLOAD
POST COMMENT
Quick Payloads
Basic Img
Body OnLoad
Bold Tag
MISSION:
The victim browser (right) is viewing this page.
If the filter is OFF, inject a script that executes alert('XSS').
Note: Browsers block direct <script> in innerHTML. Use event handlers like onerror.
https://social-victim.site/comments
Admin
Welcome to the community! Please keep comments friendly.
☠️
XSS EXECUTED
The browser executed your injected code!
In a real attack, this could steal cookies, redirect users, or perform actions on their behalf.
alert('XSS')
CONTINUE
XSS_HAZARD // SCRIPT_INJECTOR
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XSS_HAZARD // SCRIPT_INJECTOR</title>
<style>
:root {
--bg-core: #050505;
--bg-panel: #111;
--accent-orange: #ff6600;
--accent-white: #f0f0f0;
--text-dim: #666;
--border-ui: 1px solid #333;
--font-ui: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-code: 'Consolas', 'Monaco', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--bg-core);
color: var(--accent-white);
font-family: var(--font-ui);
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* HEADER */
header {
background: #000;
border-bottom: 2px solid var(--accent-orange);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
h1 {
font-size: 1.2rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent-orange);
display: flex;
align-items: center;
gap: 10px;
}
.status-badge {
font-family: var(--font-code);
font-size: 0.75rem;
background: #222;
padding: 5px 10px;
border-radius: 4px;
border: 1px solid var(--accent-orange);
color: var(--accent-orange);
}
/* MAIN GRID */
main {
flex: 1;
display: grid;
grid-template-columns: 400px 1fr;
height: calc(100vh - 70px);
}
/* LEFT: ATTACK CONSOLE */
.console-panel {
background: var(--bg-panel);
border-right: var(--border-ui);
display: flex;
flex-direction: column;
padding: 1.5rem;
gap: 1.5rem;
overflow-y: auto;
}
.panel-title {
font-size: 0.8rem;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid #222;
padding-bottom: 10px;
margin-bottom: 10px;
}
.control-group {
background: #000;
padding: 1rem;
border: 1px solid #222;
border-radius: 4px;
}
textarea {
width: 100%;
height: 100px;
background: #0a0a0a;
border: 1px solid #333;
color: var(--accent-orange);
font-family: var(--font-code);
padding: 10px;
resize: none;
outline: none;
font-size: 0.9rem;
}
textarea:focus { border-color: var(--accent-orange); }
.btn-group {
display: flex;
gap: 10px;
margin-top: 10px;
}
button {
flex: 1;
padding: 10px;
cursor: pointer;
font-family: var(--font-code);
text-transform: uppercase;
font-weight: bold;
border: none;
transition: 0.2s;
}
.btn-post { background: var(--accent-orange); color: #000; }
.btn-post:hover { background: #fff; }
.btn-payload {
background: #222;
color: #ccc;
border: 1px solid #444;
font-size: 0.7rem;
}
.btn-payload:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
/* SECURITY TOGGLE */
.toggle-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.toggle-label { font-size: 0.8rem; color: #888; }
/* RIGHT: VICTIM BROWSER */
.browser-view {
background: #e0e0e0; /* Light background for contrast */
position: relative;
display: flex;
flex-direction: column;
}
.browser-bar {
background: #d0d0d0;
padding: 10px 20px;
border-bottom: 1px solid #bbb;
display: flex;
align-items: center;
gap: 10px;
color: #555;
font-size: 0.8rem;
}
.url-bar {
background: #fff;
padding: 5px 15px;
border-radius: 15px;
flex: 1;
border: 1px solid #bbb;
font-family: var(--font-ui);
}
.comment-section {
flex: 1;
padding: 2rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.comment-card {
background: #fff;
padding: 1.5rem;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
color: #333;
border-left: 4px solid #ccc;
}
.comment-card.hacked {
border-left-color: var(--accent-orange);
background: #fff5eb;
}
.user-meta {
font-weight: bold;
font-size: 0.9rem;
margin-bottom: 0.5rem;
display: block;
color: #000;
}
/* HACK OVERLAY */
#hackOverlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.85);
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 100;
backdrop-filter: blur(5px);
}
.alert-box {
background: #000;
border: 2px solid var(--accent-orange);
padding: 2rem;
text-align: center;
width: 400px;
box-shadow: 0 0 50px rgba(255, 102, 0, 0.3);
animation: shake 0.5s;
}
.alert-icon {
font-size: 3rem;
color: var(--accent-orange);
margin-bottom: 1rem;
display: block;
}
.alert-msg { font-family: var(--font-code); color: #fff; margin-bottom: 1.5rem; line-height: 1.5; }
.code-snippet {
background: #111;
color: var(--accent-orange);
padding: 10px;
font-size: 0.8rem;
margin-bottom: 1rem;
border-left: 2px solid var(--accent-orange);
text-align: left;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* SWITCH TOGGLE */
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-orange); }
input:checked + .slider:before { transform: translateX(20px); }
/* RESPONSIVE */
@media (max-width: 800px) {
main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.console-panel { height: 400px; border-right: none; border-bottom: var(--border-ui); }
}
</style>
</head>
<body>
<header>
<h1><span>⚠️ XSS_HAZARD</span></h1>
<div class="status-badge">SANDBOX ENVIRONMENT</div>
</header>
<main>
<!-- LEFT: ATTACKER -->
<div class="console-panel">
<div class="panel-title">Injection Console</div>
<div class="control-group">
<div class="toggle-wrapper">
<span class="toggle-label">SANITIZATION FILTER</span>
<label class="switch">
<input type="checkbox" id="secureToggle">
<span class="slider"></span>
</label>
</div>
</div>
<div class="control-group" style="flex:1; display:flex; flex-direction:column;">
<label class="toggle-label" style="margin-bottom:10px; display:block;">COMMENT PAYLOAD</label>
<textarea id="inputComment" placeholder="Type a comment..."></textarea>
<div class="btn-group">
<button class="btn-post" onclick="postComment()">POST COMMENT</button>
</div>
</div>
<div class="panel-title">Quick Payloads</div>
<div class="btn-group" style="flex-wrap: wrap;">
<button class="btn-payload" onclick="fillPayload(1)">Basic Img</button>
<button class="btn-payload" onclick="fillPayload(2)">Body OnLoad</button>
<button class="btn-payload" onclick="fillPayload(3)">Bold Tag</button>
</div>
<div style="font-size: 0.8rem; color: #555; line-height: 1.4;">
<strong style="color: var(--accent-orange)">MISSION:</strong>
The victim browser (right) is viewing this page.
If the filter is OFF, inject a script that executes alert('XSS').
<br><br>
<em>Note: Browsers block direct <script> in innerHTML. Use event handlers like onerror.</em>
</div>
</div>
<!-- RIGHT: VICTIM -->
<div class="browser-view">
<div class="browser-bar">
<div style="width:10px; height:10px; background:#ff5f56; border-radius:50%;"></div>
<div style="width:10px; height:10px; background:#ffbd2e; border-radius:50%;"></div>
<div style="width:10px; height:10px; background:#27c93f; border-radius:50%;"></div>
<div class="url-bar">https://social-victim.site/comments</div>
</div>
<div class="comment-section" id="feed">
<!-- Comments appear here -->
<div class="comment-card">
<span class="user-meta">Admin</span>
Welcome to the community! Please keep comments friendly.
</div>
</div>
<!-- HACK OVERLAY -->
<div id="hackOverlay">
<div class="alert-box">
<span class="alert-icon">☠️</span>
<h2 style="color: #fff; margin-bottom: 1rem;">XSS EXECUTED</h2>
<div class="alert-msg">
The browser executed your injected code!
In a real attack, this could steal cookies, redirect users, or perform actions on their behalf.
</div>
<div class="code-snippet" id="executedCode">
alert('XSS')
</div>
<button class="btn-post" onclick="closeOverlay()">CONTINUE</button>
</div>
</div>
</div>
</main>
<script>
const input = document.getElementById('inputComment');
const feed = document.getElementById('feed');
const secureToggle = document.getElementById('secureToggle');
const overlay = document.getElementById('hackOverlay');
const executedCodeDisplay = document.getElementById('executedCode');
// Payloads
const payloads = {
1: `<img src=x onerror="triggerXSS()">`,
2: `<body onload="triggerXSS()">`, // Won't work in innerHTML div context usually, but good for edu
3: `<b>This is bold text</b>`
};
function fillPayload(id) {
input.value = payloads[id];
}
function postComment() {
const text = input.value;
if(!text.trim()) return;
const isSecure = secureToggle.checked;
// Create Comment Element
const card = document.createElement('div');
card.className = 'comment-card';
const meta = document.createElement('span');
meta.className = 'user-meta';
meta.innerText = 'Anonymous User';
card.appendChild(meta);
// THE VULNERABILITY
if (isSecure) {
// SAFE: Treat input as text
const content = document.createElement('div');
content.innerText = text; // Automatically escapes HTML
card.appendChild(content);
} else {
// UNSAFE: Treat input as HTML
const content = document.createElement('div');
content.innerHTML = text; // Renders tags
card.appendChild(content);
// Highlight that this card contains HTML (visual aid)
if(text.includes('<') && text.includes('>')) {
card.classList.add('hacked');
}
}
feed.appendChild(card);
input.value = '';
// Scroll to bottom
feed.scrollTop = feed.scrollHeight;
}
// We expose a global function that our injected scripts can call
// This simulates window.alert without blocking the UI
window.triggerXSS = function() {
overlay.style.display = 'flex';
executedCodeDisplay.innerText = "<img src=x onerror=...>";
}
function closeOverlay() {
overlay.style.display = 'none';
}
// Helper: Browsers are smart. Simply adding innerHTML with <script> won't run it.
// We rely on <img onerror> which DOES run in innerHTML.
// However, standard <body> onload won't fire if added to a div.
// We can add a mutation observer to "Simulate" the danger of <script> if the user tries it,
// just for educational completeness, although <img onerror> is the 'real' way to demo this.
// This observer watches for <script> tags added to the feed and simulates execution
// because innerHTML strips them by default spec.
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeName === 'SCRIPT') {
// In a real app, scripts via innerHTML don't run.
// But to teach "Script Injection", we can simulate it or warn.
// For this demo, we rely on the img vector as it's the "True" innerHTML bypass.
}
});
});
});
observer.observe(feed, { childList: true, subtree: true });
</script>
</body>
</html>