Cross-Site Scripting (XSS)

XSS is a variety of injection attacks in which JavaScript code is injected into the browsers of victims.

A03:2021

Background

Context

Websites, that pass user input directly, without any kind of validation or sanitization, to the DOM, are potentially attackable via XSS. Three types of XSS exist:

Type	Description
Stored XSS attack	An attacker injects code onto a server. The code is executed later inside of the victim's browser.
Reflected XSS attack	Injected code is stored in for example URL parameters and directly executed.
DOM-based attack	Data flow from source to sink never leaves the DOM.

Following sources can be used to exploit XSS vulnerabilities

• HTML through for example the script element
• URLs through the :javascript scheme (opens new window)
• CSS through for example the definition of ULRs that exploit the first point

Issues

Attacker can execute arbitrary JavaScript code and through that is able to:

• Read data such as stored tokens or cookies
• Send requests through the victim's browser and therefore hide the attacker

Solution

• User inputs should never be passed to locations in which JavaScript code can be executed (HTML, CSS, or URLs)
• In case this is needed: Data escaping or/and sanitization is mandatory!

Technology

The following will discuss different protection mechanisms that are offered through frameworks and libraries.

HTML5

HTML5 prevents the execution of embedded script elements.

<script> alert('Hacked!')</script>

However, XSS attacks are still possible. An attacker can make us of the onError attribute of img HTML elements to pass JavaScript code in case the image could not be loaded.

<img src="..." onError= "alert('Hacked!')"/>

React

React offers following native security mechanisms:

• The databinding via { } automatically escapes content causing for example HTML elements to be only displayed as text and to not be executed
• Renaming of the innerHTML() method, which needs to be used to display HTML content, to dangerouslySetInnerHTML()

Vue.js

Vue.js also offers native security mechanisms:

• Escaping of content that is added to the DOM via its databinding using , again causing HTML elements to not be executed
• The usage of the v-html tag of a div element offers a developer to add HTML content to the div without alarming the developer about potential security risks

DANGER

The v-html should be contained in a linter or in code analysis rules and throw a warning about the security risks it can cause.

Angular

Angular offers a different approach for the security mechanisms:

• It defines different Security Contexts (opens new window), that not only include HTML but also CSS and URLs.
• Sanitization is applied to all security contexts instead of escaping.

IMPORTANT

Angular offers the highest amount of Security by Default and also usability because a sanitization takes place.

Node.js Libraries

There is a vast assortment of different libraries that help to protect against XSS attacks. Three types were identified:

1. Escaping libraries
2. HTML and CSS sanitization libraries
3. URL sanitization libraries

The second and third group are especially relevant since they can be used as additional security mechanisms in React and Vue.js.

TIP

Concrete recommendation: DomPurify (opens new window)

• DomPurify uses a whitelisting approach, which removes for example the onError attribute
• High popularity (<1,5M downloads)
• Issues are closed at a very high rate (on average eight days)
• Recommended by OWASP (opens new window)