DOM-based XSS Lab - location.hash

📚 What is DOM-based XSS?

DOM-based Cross-Site Scripting occurs when JavaScript reads data from a controllable source (like URL parameters, hash, or localStorage) and writes it to a dangerous sink (like innerHTML) without proper validation.

Unlike reflected or stored XSS, DOM-based XSS happens entirely in the browser's DOM - the server is not involved. The vulnerability exists in client-side code.

🧪 Try It Yourself

This page reads content from the URL hash (location.hash) and displays it. Modify the URL to inject malicious code.

Current URL Hash:

Output:

💡 Try These Payloads

Add these to the URL hash or use the input field above:

#<img src=x onerror=alert('DOM XSS')>

#<script>alert('DOM-based XSS!')</script>

#<iframe src="javascript:alert('XSS')"></iframe>

🔍 Understanding the Vulnerability

Vulnerable Code:

                
// ❌ VULNERABLE: Reading from location.hash and using innerHTML

window.addEventListener('hashchange', function() {

  const hash = location.hash.substring(1); // Remove # symbol

  document.getElementById('display').innerHTML = hash;

});

The problem: User-controlled data from location.hash is directly inserted into the DOM using innerHTML, allowing HTML and JavaScript execution.

Secure Code:

                
// ✅ SECURE: Using textContent instead

window.addEventListener('hashchange', function() {

  const hash = location.hash.substring(1);

  document.getElementById('display').textContent = hash;

});

// ✅ SECURE: Or sanitize input

const sanitized = DOMPurify.sanitize(hash);

document.getElementById('display').innerHTML = sanitized;

🎯 Common Sources (User-Controllable)

location.hash - URL fragment (after #)
location.search - URL query parameters
document.referrer - Referring page URL
window.name - Window name property
localStorage / sessionStorage - Browser storage
document.cookie - HTTP cookies

💥 Dangerous Sinks

element.innerHTML - Parses and executes HTML/JS
element.outerHTML - Similar to innerHTML
document.write() - Writes to document stream
eval() - Executes JavaScript code
setTimeout() / setInterval() - With string arguments
Function() constructor - Creates functions from strings
element.setAttribute('onclick', ...) - Event handlers

⚠️ Real-World Impact

Account Hijacking: Steal tokens from URL fragments
Phishing Attacks: Display fake login forms
Data Exfiltration: Send sensitive data to attacker's server
Malware Distribution: Redirect to malicious sites
Client-side Template Injection: Exploit template engines

🔒 Prevention Techniques

Avoid Dangerous Sinks: Never use innerHTML with user-controlled data
Use Safe APIs: Prefer textContent, setAttribute(), createElement()
Input Validation: Validate data from all sources
Sanitization: Use DOMPurify or similar libraries
Content Security Policy: Implement strict CSP
URL Encoding: Properly encode URL parameters

🟠 DOM-based XSS Lab

location.hash Vulnerability