Web Security / Cross-Site Scripting (XSS)
DOM-based XSS explained
This tutorial is designed to help you understand DOM-based XSS attacks. We will explain what they are, how they work, and provide examples in HTML.
Section overview
5 resourcesA type of security vulnerability typically found in web applications that enables attackers to inject client-side scripts into web pages viewed by other users.
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
createTextNodemethod.
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.
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Random Password Generator
Create secure, complex passwords with custom length and character options.
Use toolLatest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article