DOM clobbering

DOM, or the document object model present in browsers, allows JavaScript to manipulate or access HTML/XML and also structures it. DOM is very powerful in the way that it allows you to change or access the majority of the content inside the web page. However, DOM was initially born and implemented without any standardization which led to a lot of peculiar behavior and for the sake of maintaining compatibility, browsers still support the unusual behavior of DOM. That leads us to DOM clobbering. Due to non-standardized DOM behavior, browsers may sometimes add name and id attributes to various DOM elements as a property reference to document or global objects. However, this results in replacement of properties on the other objects of the document.

The original research on DOM clobbering was done by Garrett Smith in his publication Unsafe Names for HTML Form Controls and then later picked up by other researchers such as Gareth Heyes and Mario.

Let's now see how we can clobber the...