In this exercise, we’ll take a closer look at DOM-Based XSS Attacks.

A DOM-Based XSS attack occurs when an attack payload is executed by altering the DOM in the victim’s browser.

The DOM (Document Object Model) is a convention used to represent and work with objects in an HTML document. When a client-side script is executed, it can access various properties of the page and change their values. Websites are usually vulnerable to DOM-Based XSS attacks because of bad JavaScript code altering the front end.

Let’s assume that a site is running code to render a name dynamically, and this code lives within dashboard.html. The code to render the name dynamically might look something like this:

greeting.innerHTML = "Welcome " + name + "!";

Notice how this code is changing the HTML of the page using innerHTML. If an attacker wanted to implement a DOM-Based XSS attack they would inject malicious code into the name input field instead of a plaintext name. Instead of sending their name, an attacker could input a value like:

<script>alert("This is an attack!");</script>

The alert function will then be propagated to the webpage to be executed. Some webpages might accidentally allow for code to be injected in the URL as well. For example, the following URL expects a name as a parameter:

http://www.somesite.com/userpage.html?name=jorge

This could potentially allow the attacker to effectively do:

http://www.somesite.com/userpage.html?name=<script>maliciousFunc(variable)</script>

In reality, the attacker would disguise the URL using a URL shortener so that it is not obvious it contains a script. The encoded URL might look like this:

https://www.somesite.com