Securing Modern Web Apps: A Guide to DOM-based XSS

DOM-based Cross-Site Scripting (DOM XSS) is a client-side vulnerability where the attack payload is executed as a result of modifying the DOM environment in the victim’s browser.

Unlike reflected or stored XSS, the data flow for DOM XSS occurs entirely within the client-side code, meaning the payload never touches the backend server.

Vulnerable Sources and Sinks

• Source: Any JavaScript input that the attacker can control (e.g., location.search, location.hash, document.referrer).
• Sink: A function or DOM object that executes code or renders HTML if input is passed to it raw (e.g., element.innerHTML, document.write, eval()).

Vulnerable Code Example

const query = new URLSearchParams(window.location.search);
const userName = query.get('name');
// Vulnerable Sink
document.getElementById('welcome').innerHTML = "Welcome " + userName;

Remediation

Always sanitize data before rendering, or use safe sinks like element.textContent or element.innerText which automatically treat input as plain text rather than executable HTML:

// Secure Alternative
document.getElementById('welcome').textContent = "Welcome " + userName;