DOM Clobbering

DOM Clobbering is a technique where HTML elements with specific id or name attributes can overwrite global JavaScript variables or DOM properties. This happens because browsers automatically create global references to elements with IDs, which can conflict with expected JavaScript objects.

How It Works

When an HTML element has an id attribute, browsers create a global variable with that name pointing to the element. If JavaScript code expects a certain global variable or property to exist, an attacker can inject HTML that "clobbers" (overwrites) that variable with an HTML element.

Example

Clobbering a security check:

// Expected behavior: config.isAdmin should be undefined or false
if (config && config.isAdmin) {
  showAdminPanel();
}

// Attacker injects:
<form id="config"><input id="isAdmin" value="1"></form>

// Now config.isAdmin returns the input element (truthy)

Common Targets

  • Global variables referenced by scripts
  • window.name, document.body
  • Security-related objects like CSRF tokens
  • Configuration objects

Prevention

  • Use const/let instead of relying on global variables
  • Check typeof of objects before use
  • Use strict equality checks
  • Freeze security-critical objects
  • Sanitize user HTML to remove dangerous id/name attributes

See Also