Hello folks!!! hope you all are doing well, I am here to write a blog on DOM XSS, and I hope you all like it. We will start with understanding what is DOM, source, and sinks and then move to the XSS part with some demonstration.
What is DOM
Before Going to Dom XSS we should understand what is DOM. Google Definition of DOM is:
“DOM stands for the Document Object Model. It’s the API for HTML and XML documents. We’re concerned with HTML when looking at what browsers are doing to render the screen.”
So what I understand from this definition, DOM basically defines the logical structure of an HTML document and the way it is manipulated.
The following picture represents the basic structure tree of an HTML document or DOM of the webpage.

Difference between DOM and view-source
When I was learning about DOM XSS , i got confused about the DOM and view-source of a page. I will explain the difference between them with an example.
So when you see the view-source of a webpage, it is actually the source code of the response given by the server, but you’re looking at the DOM as it exists at the moment, which includes inline styles, parsing corrections, and other things that are the result of javascript running.
For example in the following figure, I have made a simple HTML webpage in which I have mistakenly close the <p> tag by <h1> tag, lol.
Now when you see the source code of the HTML page, it was the same as before, but when you see the DOM, it was corrected there.
We look at the DOM after:
- HTML error correction by the browser.
- DOM Manipulation by the javascript.
I think that clears all about the DOM and how it differs from the view-source.
Sources and Sinks
Now other concepts are sources and sinks, these two are important before understanding the DOM XSS.
Sources are basically the origin of the untrusted data which are given by the users. Some of the sources are location.hash, location.href,etc, and Sinks are the executable function where the data from the source are being executed.
In the following HTML page, in the script section, the location.hash.substr() are acting as the source and document. write is acting as the sinks. So whatever we write after the hash (“#”) part in the URL , it will get stored in the variable x and get executed by the sink document. write and will be written on the HTML page after clicking on the button.
This was all about sources and sinks.
DOM XSS
DOM XSS occurs when the web application takes the input from the source and mishandles it in a way that causes it execution in the sink without proper sanitization, or in simple words, we can say that the web application writes the data to the dom without proper sanitization.
Generally in DOM XSS, you need to set your payload according to the DOM, no need for source code here.
Now we will do some exercises on portswigger labs and I have also made a couple of challenges, you can easily found it in my Github repository.
Challenge-1
In the following challenge, i have created a simple web page, and have used the location.hash as source and window.location as sink.

So whatever we write after the hash part, our new location will be set to that hash part. But as we can see that, the source is not sanitized anywhere, so we can send our payload there.

Challenge-2
In the following challenge, i have used a vulnerable function “eval()” in the script section.

NOTE: It is recommended not to use eval() function in your web application. I have used this function only to show about dom XSS.
If you don’t know about the eval function, search it on the web. Basically, it will execute anything given to it.
So just giving our payload will do the work here.

Challenge-3
This challenge is on the portswigger labs.
On opening the web application , a search bar appears. So we will give it some input and see where our term is reflected in the DOM.
We observe that our term ‘domxss’ is appearing in the “img” tag .

It was appearing there in the “img” tag due to the “trackSearch()” function. It is taking input from the source and writing it to the DOM without proper sanitization.
So first we need to come out of the “img” tag by using inverted commas , and then give a simple payload.

Challenge-4
In this challenge , ongoing to any product details we observe that in the dom, there is another parameter named “storedId”.

And also this parameter is going from location.search source to document.write sink without sanitization.
So, first, we need to find where the parameter “storeId” is reflecting in the DOM and then crafting our payload according to that.
We observe that the parameter is appearing in the “select” tag. So first we need to come out of the “select” tag, and then writing our simple payload after it.

Challenge-5
In this challenge, on visiting the web page and observing the DOM, we see that the “search” parameter is used in conjunction with inner.html
But here, we can not use our simple “script” tag, because when they are being used with inner.html they are easily blocked by modern browsers. So we need to use some other tag like “IMG” here.

So this was all about DOM XSS. I hope you all enjoyed it.
HAPPY HACKING