What is DOM?

The Document Object Model (DOM) represents the structure, content, and style of a web page in a way that allows JavaScript programs to manipulate it. Think of it as the bridge between your HTML content and the JavaScript that needs to interact with it. The DOM provides a structured representation of documents as a tree of objects that JavaScript can access and modify.

What is DOM Clobbering?

DOM Clobbering is an attack technique that abuses how browsers handle HTML elements with IDs and names. The term “clobbering” comes from software engineering, where it refers to intentionally or unintentionally overwriting a specific memory location or register.

In the context of web security, DOM Clobbering refers to the act of overwriting JavaScript objects by using specially crafted HTML elements. When a website uses window object properties or global variables, an attacker can “clobber” (override) these objects by injecting HTML elements with specific ID or name attributes.

This attack technique specifically exploits how JavaScript processes DOM elements, taking advantage of the browser’s automatic creation of global variables for elements with ID attributes. The term “clobbering” in this context literally means “overwriting the DOM,” as attackers can manipulate and override expected DOM behaviors.

A key aspect of DOM Clobbering is that HTML elements with ID attributes become accessible not only through document.getElementById() but also directly through the window object. For example:

<a id="CONFIG"></a>

This element can be accessed in two ways:

document.getElementById('CONFIG');
window.CONFIG;

This behavior isn’t limited to exact matches between document objects and variable names. Overwriting can occur even when a variable with the same name exists in the global scope. Here’s an illustrative example:

<a id="testzz" href="/111">
<script>
  alert(window.testzz)
</script>
<!-- This will output: /111 -->

In this case, the href attribute value becomes accessible through the window object, demonstrating how DOM Clobbering can affect global variable scope.

How DOM Clobbering Works

The fundamental principle of DOM Clobbering is based on how browsers handle HTML elements with ID attributes. When you create an HTML element with an ID attribute, the browser automatically creates a global variable with the same name, accessible via the window object.

For example, when you have this HTML:

<a id="CONFIG"></a>

You can access this element in JavaScript using either of these methods:

document.getElementById('CONFIG');
window.CONFIG;

This behavior is what makes DOM Clobbering possible. If a website’s JavaScript code relies on a global variable like window.CONFIG, and an attacker can inject HTML with an ID of “CONFIG”, they can override the expected object with their HTML element.

DOM Clobbering in Action

Let’s look at a basic example that demonstrates DOM Clobbering:

<html>
  <body>
    <a id="CONFIG"></a>
    <a id="CONFIG" name="cmd" href="javascript:alert(secretkey)"></a>
  </body>

  <script>
    secretkey = "sensitive_data";
    window.CONFIG = window.CONFIG || {
      cmd: "1",
      isadmin: false,
    };

    if (window.CONFIG.isadmin !== false) {
      location.href = window.CONFIG.cmd;
    }
  </script>
</html>

In this example, the JavaScript code expects window.CONFIG to be an object with properties like cmd and isadmin. However, the attacker has injected two anchor tags with the ID “CONFIG”, which creates an HTML Collection. When the script tries to access window.CONFIG.cmd, it’s actually accessing the href attribute of the second anchor tag, which contains malicious JavaScript.

Form Elements and DOM Clobbering

Forms are particularly susceptible to DOM Clobbering because browsers treat form elements with name and id attributes as properties of the Form object. This can lead to unexpected behavior when accessing form methods.

Consider this example:

<html>
  <form action="">
    <input type="text" value="aaa" />
    <input type="submit" name="submit" />
  </form>

  <script>
    document.forms[0].submit();
  </script>
</html>

This code will generate an error: Uncaught TypeError: document.forms[0].submit is not a function.

Why? Because the input element with name="submit" has overwritten the form’s built-in submit() method. Instead of getting the function, you’re getting the input element itself.

getElementById Clobbering

Even more dangerously, attackers can clobber core DOM methods like getElementById:

<html>
  <body>
    <form name="getElementById"></form>
    <div id="intadd">hihi</div>
  </body>

  <script>
    document.getElementById("intadd");
  </script>
</html>

This will result in Uncaught TypeError: document.getElementById is not a function because the form named “getElementById” has clobbered the document’s method.

HTML Collections

HTML Collections play a key role in DOM Clobbering attacks, especially when combined with string conversion behavior of different HTML elements. Let’s look at this concept with some examples.

First, let’s look at a basic DOM Clobbering scenario using forms:

<html>
  <body>
    <form name="CHECKER">
      <input name="isadmin" />
    </form>
  </body>

  <script>
    window.CHECKER = window.CHECKER || {
      isadmin: false,
    };

    window.CONFIG = window.CONFIG || {
      secretkey: "strooongkeeey",
      isadmin: false,
    };

    if (window.CHECKER.isadmin || window.CONFIG.isadmin !== false) {
      document.write(window.CONFIG.secretkey);
    }
  </script>
</html>

A key aspect of DOM Clobbering is understanding how different HTML elements convert to strings. For instance, anchor (<a>) tags have a specific behavior where their toString() method returns the value of their href attribute. However, note that anchor tags cannot be used as form element attributes.

To work around this limitation, we can use HTML Collections. When multiple elements share the same ID, they form an HTML Collection. Here’s an example that demonstrates this technique:

<html>
  <body>
    <a id="CONFIG"></a>
    <a id="CONFIG" name="cmd" href="javascript:alert(secretkey)"></a>
  </body>

  <script>
    secretkey = "asdfasdf";
    window.CONFIG = window.CONFIG || {
      cmd: "1",
      isadmin: false,
    };

    if (window.CONFIG.isadmin !== false) {
      location.href = window.CONFIG.cmd;
    }
  </script>
</html>

This example demonstrates how HTML Collections can be used to manipulate location.href and execute JavaScript code when the application uses window objects. The key points to remember are:

1. When multiple elements share the same ID, they form an HTML Collection
2. Different HTML elements have different string conversion behaviors
3. Anchor tags’ toString() method returns their href value
4. This technique can be particularly effective when targeting properties like location.href in combination with window object usage

Defending Against DOM Clobbering

To protect your web applications from DOM Clobbering attacks:

1. Use namespaced objects - Keep your objects in namespaces that aren’t likely to be clobbered.

2. Strict property checking - Always use strict checks (=== instead of ==) and explicit property existence checks.

3. Input sanitization - Properly sanitize user inputs that could end up in the DOM.

4. Modern JavaScript practices - Use const and let instead of global variables, employ strict mode, and use modules.

5. Content Security Policy (CSP) - Implement a strong CSP to prevent the execution of unauthorized JavaScript.

Conclusion

DOM Clobbering represents a subtle but powerful attack vector that exploits the way browsers handle HTML elements with ID and name attributes. Understanding this vulnerability is key for web developers and security professionals to build safer web applications.

While DOM Clobbering may not be as widely known as other web vulnerabilities like XSS or CSRF, it can be just as dangerous, especially in environments where direct script injection is prevented but HTML injection is still possible.

By understanding the mechanisms behind DOM Clobbering and implementing proper defenses, developers can significantly reduce the risk of these attacks in their applications.

References

• https://www.hahwul.com/cullinan/dom-clobbering/
• https://intadd.tistory.com/143