CodeQL documentation

DOM text reinterpreted as HTML

ID: js/xss-through-dom
Kind: path-problem
Severity: warning
Precision: high
Tags:
   - security
   - external/cwe/cwe-079
   - external/cwe/cwe-116
Query suites:
   - javascript-code-scanning.qls
   - javascript-security-extended.qls
   - javascript-security-and-quality.qls

Click to see the query in the CodeQL repository

Extracting text from a DOM node and interpreting it as HTML can lead to a cross-site scripting vulnerability.

A webpage with this vulnerability reads text from the DOM, and afterwards adds the text as HTML to the DOM. Using text from the DOM as HTML effectively unescapes the text, and thereby invalidates any escaping done on the text. If an attacker is able to control the safe sanitized text, then this vulnerability can be exploited to perform a cross-site scripting attack.

Recommendation

To guard against cross-site scripting, consider using contextual output encoding/escaping before writing text to the page, or one of the other solutions that are mentioned in the References section below.

Example

The following example shows a webpage using a data-target attribute to select and manipulate a DOM element using the JQuery library. In the example, the data-target attribute is read into the target variable, and the $ function is then supposed to use the target variable as a CSS selector to determine which element should be manipulated.

$("button").click(function () {
    var target = $(this).attr("data-target");
    $(target).hide();
});

However, if an attacker can control the data-target attribute, then the value of target can be used to cause the $ function to execute arbitary JavaScript.

The above vulnerability can be fixed by using $.find instead of $. The $.find function will only interpret target as a CSS selector and never as HTML, thereby preventing an XSS attack.

$("button").click(function () {
    var target = $(this).attr("data-target");
	$.find(target).hide();
});

References