Dom Clobbering
Last updated
Last updated
Learn & practice AWS Hacking: Learn & practice GCP Hacking:
It's possible to generate global variables inside the JS context with the attributes id
and name
in HTML tags.
Only certain elements can use the name attribute to clobber globals, they are: embed
, form
, iframe
, image
, img
and object
.
Interestingly, when you use a form element to clobber a variable, you will get the toString
value of the element itself: [object HTMLFormElement]
but with anchor the toString
will be the anchor href
. Therefore, if you clobber using the a
tag, you can control the value when it's treated as a string:
It's also possible to clobber an array and object attributes:
To clobber a 3rd attribute (e.g. x.y.z), you need to use a form
:
Clobbering more attributes is more complicated but still possible, using iframes:
The style tag is used to give enough time to the iframe to render. Without it you will find an alert of undefined.
To clobber deeper attributes, you can use iframes with html encoding this way:
If a filter is looping through the properties of a node using something like document.getElementByID('x').attributes
you could clobber the attribute .attributes
and break the filter. Other DOM properties like tagName
, nodeName
or parentNode
and more are also clobberable.
window.someObject
In JavaScript it's common to find:
Manipulating HTML on the page allows overriding someObject
with a DOM node, potentially introducing security vulnerabilities. For example, you can replace someObject
with an anchor element pointing to a malicious script:
In a vulnerable code such as:
This method exploits the script source to execute unwanted code.
Trick: DOMPurify
allows you to use the cid:
protocol, which does not URL-encode double-quotes. This means you can inject an encoded double-quote that will be decoded at runtime. Therefore, injecting something like <a id=defaultAvatar><a id=defaultAvatar name=avatar href="cid:"onerror=alert(1)//">
will make the HTML encoded "
to be decoded on runtime and escape from the attribute value to create the onerror
event.
Another technique uses a form
element. Certain client-side libraries inspect the attributes of a newly created form element to clean them. However, by adding an input
with id=attributes
inside the form, you effectively overwrite the attributes property, preventing the sanitizer from accessing the actual attributes.
According to the documentation it's possible to overwrite attributes of the document object using DOM Clobbering:
Using this technique you can overwrite commonly used values such as document.cookie
, document.body
, document.children
, and even methods in the Document interface like document.querySelector
.
The results of calls to document.getElementById()
and document.querySelector()
can be altered by injecting a <html>
or <body>
tag with an identical id attribute. Here's how it can be done:
Furthermore, by employing styles to hide these injected HTML/body tags, interference from other text in the innerText
can be prevented, thus enhancing the efficacy of the attack:
Investigations into SVG revealed that a <body>
tag can also be utilized effectively:
For the HTML tag to function within SVG in browsers like Chrome and Firefox, a <foreignobject>
tag is necessary:
It's possible to add new entries inside a form just by specifying the form
attribute inside some tags. You can use this to add new values inside a form and to even add a new button to send it (clickjacking or abusing some .click()
JS code):
Heyes, Gareth. JavaScript for hackers: Learn to think like a hacker.
You can .
The interface . The of a object document at any moment consist of the following, in according to the element that contributed them, ignoring later duplicates, and with values from attributes coming before values from name attributes when the same element contributes both:
- The value of the name content attribute for all , , , , and elements that have a non-empty name content attribute and are with document as their ; - The value of the content attribute for all elements that have a non-empty content attribute and are with document as their ; - The value of the content attribute for all elements that have both a non-empty content attribute and a non-empty name content attribute, and are with document as their .
For more form attributes in .
Learn & practice AWS Hacking: Learn & practice GCP Hacking:
Check the !
Join the 💬 or the or follow us on Twitter 🐦 .
Share hacking tricks by submitting PRs to the and github repos.