DOM-based XSS explained

Tutorial 3 of 5

Introduction

Tutorial's Goal

The goal of this tutorial is to help you understand DOM-based Cross-Site Scripting (XSS) attacks. We will explore what they are, how they work, and provide examples of this vulnerability in HTML.

What You Will Learn

Understanding of DOM-based XSS
How DOM-based XSS attacks happen
How to identify potential DOM-based XSS vulnerabilities
Best practices to prevent DOM-based XSS attacks

Prerequisites

Basic understanding of HTML and JavaScript
Familiarity with web development and security concepts

Step-by-Step Guide

DOM-based XSS, or Type-0 XSS, is a type of Cross-site scripting attack that occurs when an attacker can influence the DOM (Document Object Model) of a webpage using user inputs.

Concepts

Document Object Model (DOM)

DOM is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects. Each object represents a part of the document, such as an element, an attribute, or text.

DOM-based XSS

In DOM-based XSS, the client's script, embedded in the webpage, writes user-provided data to the DOM. The data is then read from the DOM by the web browser and executed. This happens when the data is written to an unsafe location in the DOM.

Examples

Let's say we have a web page that takes a URL parameter and uses it to display a message to the user:

<!DOCTYPE html>
<html>
<body>
    <script>
        var name = decodeURIComponent(location.search.substr(1));
        document.write('<h1>Welcome ' + name + '!</h1>');
    </script>
</body>
</html>

If an attacker modifies the URL's parameter to include script tags (<script>alert('XSS')</script>), the browser will execute the injected script.

Code Examples

Example 1

Below is a simple HTML page vulnerable to DOM-based XSS:

<!DOCTYPE html>
<html>
<body>
    <script>
        // Get the 'name' parameter from the URL
        var name = decodeURIComponent(location.search.substr(1));
        // Add the 'name' to the body of the HTML
        document.write('<h1>Welcome ' + name + '!</h1>');
    </script>
</body>
</html>

In this example, the user-provided data (the 'name' parameter) gets written directly to the webpage's HTML via document.write, making it vulnerable to DOM-based XSS.

Example 2

A more secure way to add user-provided data to the page is using text nodes:

<!DOCTYPE html>
<html>
<body>
    <script>
        // Get the 'name' parameter from the URL
        var name = decodeURIComponent(location.search.substr(1));
        // Create a text node with 'name'
        var textNode = document.createTextNode('Welcome ' + name + '!');
        // Add the text node to the body
        document.body.appendChild(textNode);
    </script>
</body>
</html>

Here, the createTextNode method ensures the 'name' is treated as plain text, not HTML or script, thus preventing script injection.

Summary

In this tutorial, we have covered:
- What is DOM-based XSS
- How these attacks happen
- How to identify potential DOM-based XSS vulnerabilities
- Best practices to prevent these attacks

Next, you should delve deeper into web security, focusing on other types of XSS attacks (Stored and Reflected XSS), and learn about Content Security Policy (CSP).

Practice Exercises

Exercise 1: Create a simple webpage that takes a 'message' parameter from the URL and displays it to the user. Make it vulnerable to DOM-based XSS.
Exercise 2: Now, modify the webpage from Exercise 1 to prevent DOM-based XSS. Use the createTextNode method.

Solutions

Solution 1:

html <!DOCTYPE html> <html> <body> <script> var message = decodeURIComponent(location.search.substr(1)); document.write('<p>' + message + '</p>'); </script> </body> </html>
Solution 2:

html <!DOCTYPE html> <html> <body> <script> var message = decodeURIComponent(location.search.substr(1)); var textNode = document.createTextNode(message); document.body.appendChild(textNode); </script> </body> </html>
Continue practicing by creating more complex applications and always consider security in your implementations.