DOM XSS Explained With Sources and Sinks

When people first study DOM XSS, it often feels complicated.
But the truth is much simpler:
If you understand how the DOM works, DOM XSS becomes much easier to analyze.
In many cases, it starts looking similar to Reflected XSS, because the core idea is the same:

Track the data.
Where does it come from?
Where does it go?
How does the browser interpret it?

That tracing process is the real key to understanding DOM-Based XSS.

---

What Is The DOM? 🧠​

Before talking about the vulnerability itself, we need to separate two concepts:

• DOM (Document Object Model)
• DOM APIs

When a browser loads an HTML page, it performs parsing.
It converts HTML into objects such as:

• Elements
• Tags
• Attributes
• Text nodes

This allows developers to manipulate pages dynamically instead of keeping them static.
That structured browser representation is called the DOM.

---

DOM APIs: How JavaScript Interacts With HTML ⚙️​

Developers use DOM APIs to interact with page elements.
One common example:

document.getElementById()

The name explains itself: Get an element by ID.
Example HTML:

<div id="out">tabcode</div>

JavaScript:

const user = document.getElementById("out");
user.innerHTML = "lol";

What happened here?

1. JavaScript located the element with ID out
2. Stored it inside a variable
3. Modified its content using innerHTML

The value changed from:
tabcode to: lol

Another API example:

document.getElementsByTagName()

Example:

<div>One</div>
<div>Two</div>
<div>Three</div>

This API retrieves elements by tag name.

So the DOM basically allows JavaScript to:

✅ Find elements
✅ Read values
✅ Modify content
✅ Create dynamic behavior​

---

The Three Critical Concepts Behind DOM XSS 🔥​

If you understand these three ideas… DOM XSS becomes dramatically easier.
They are:

• Sources
• Sinks
• Contexts

---

Sources: Where The Data Comes From 📥​

Sources are APIs that provide data to JavaScript.
That data can come from:

• User input
• URLs
• Browser storage
• Cookies
• Server responses

JavaScript reads data from Sources and moves it through its execution flow.

Common Sources include:

location.href
location.search
location.hash
location.pathname
document.URL
document.documentURI
localStorage.getItem()
sessionStorage.getItem()
fetch()
XMLHttpRequest.responseText
response.json()

Example: location.search​

Code: let data = location.search;
URL: site.com/?name=tabcode
location.search extracts: ?name=tabcode
The source simply pulls data from the URL.

Example: localStorage Source​

localStorage.getItem("username");
localStorage.getItem("token");

This retrieves values stored locally inside the browser.
Unlike URLs, this data comes from browser storage.

---

Sinks: Where Data Gets Used ⚠️​

Now comes the dangerous part.
After JavaScript retrieves data…
it usually does something with it.
That destination point is called a Sink.
Sinks can:

• Render text
• Modify HTML
• Execute code
• Change URLs
• Trigger navigation

Common dangerous sinks include:

innerHTML
outerHTML
insertAdjacentHTML()
document.write()
eval()
Function()
setTimeout()
setInterval()
location.href
location.assign()
location.replace()
iframe.src
script.src
img.src
setAttribute()

Different sinks carry different security risks.

Example: DOM XSS Using innerHTML​

Source: let data = location.search;
URL: site.com/?name=<b>tabcode</b>
Target element: let output = document.getElementById("out");
Sink: output.innerHTML = data;
Flow explanation:
URL → Source → Variable → Sink → HTML Output
If unsafe input reaches innerHTML, browser interpretation becomes important.

---

Another Example: location.hash → Redirect Flow 🔄​

Source: let data = location.hash;
URL: site.com/#https://example.com
Retrieved value: https://example.com
Sink usage: location.href = data;
Now the data influences browser navigation.
Same pattern: Source → Processing → Sink

---

Contexts: Where The Payload Lands 🎯​

This part is extremely important during XSS analysis.
Because payload construction depends on where the data finally appears.

HTML Context​

Example:

<div id="out">DATA</div>

HTML payload example:

<img src=x onerror=alert(1)>

Tag Break Context​

Breaking outside tags:

</div><script>alert(1)</script>

Attribute Context​

Example:

<img src="DATA">

Payload idea:

" autofocus onfocus=alert(1) "

JavaScript Context​

Example: var x = "DATA";
Payload concept: alert(1)
Each context changes payload strategy completely.

---

DOM XSS Analysis Using DevTools 🔎​

Real applications often contain massive JavaScript files.
Reading everything manually is impractical.
A better approach is using Browser DevTools.
Open:

• Inspect Element
• Sources Tab
• Console Tab

Search for keywords like:

location
hash
search
cookie
localStorage
innerHTML
document.write
eval
setTimeout
location.href

Then trace the flow:

1. Where did the data originate? → Source
2. What processing occurred?
3. Where did it end up? → Sink
4. How was it interpreted? → Context

This method is significantly faster than reading thousands of lines of code.

---

Final Thoughts 🚀​

DOM XSS becomes much less intimidating once you understand the browser model.
The core workflow is simple: Source → JavaScript Flow → Sink → Context
Track the data.
Understand the DOM.
Identify dangerous sinks.
Determine the final rendering context.
And suddenly…
DOM XSS stops looking mysterious and starts looking like structured data tracing inside the browser.
That mindset is one of the most valuable skills in web security analysis 🔥