Dom Clobbering methods on the document object

Question

I'm struggling to understand how this flavor of dom clobbering actually works.

The green box at the top of this section of the HTML spec makes it pretty clear why I can access HTML elements as global variables on the window object. What I don't understand is why, in chrome, setting a tag's name attribute will overwrite javascript methods. For example,

<img name=getElementById>

I get

document.getElementById()
VM5014:1 Uncaught TypeError: document.getElementById is not a function

Can someone help me understand how the name attribute of an img tag overwrites methods on the document object?

Thanks!

Answer 1

The thing is that you look at some code in different ways before and after the attack:

If you have:

document.getElementById(id)

This calls getElementById() on the site (cf Mozilla Documentation). Which gets you the element for a specific id if present.

But what if the function getElementById can be overwritten? This is the case if you create an HTMLCollection at document. You can do that using multiple name attributes (cf. DOM clobbering in sanitized MD causes errors):

<img name="getElementById" src="">
<img name="getElementsByTagName" src="">

After that document.getElementById() will go to nowhere and the site could fail if this frequent used function is used.

For a deeper understanding also refer to this Stack Overflow question.