XSS 101

circle-info

Cross-Site Scripting (XSS) is a vulnerability where an attacker injects malicious scripts into web pages viewed by other users, typically through input fields or URL parameters.

triangle-exclamation
circle-check

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)arrow-up-right of the page, aka DOM tree (Figure1).

Figure 1: The HTML to DOM process.

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.

XSS Types

There are mainly two XSS classifications (Figure 2):

  1. Based on the level of the payload's persistence: Reflected vs. Stored.

  2. Based on which location the payload is outputted: Server vs. Client (aka DOM-based).

Figure 2: XSS classifications.
circle-info

Web APIs

There are many built-in web APIsarrow-up-right, but the following are the most useful from an XSS-standpoint.

API
Description

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-200arrow-up-right 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).

circle-info

In HTML, text boxes are created using the inputarrow-up-right tag.

Figure 3: Extracting the values of the targeted fields.

We might also want to create a custom keylogger to extract information (Figure 4).

Figure 4: Creating a custom keylogger.

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.

Last updated

Was this helpful?