# Cross-Site Scripting (XSS)

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


# 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

# 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 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


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:


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.


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)
Last Updated: 7/3/2022, 3:51:46 PM