[Bug]🐛DOM text reinterpreted as HTML Cross-site Scripting

[odaysec]

mapbox-gl-js/debug/globe-fill-extrusion.html

Line 265 in df4901f

document.getElementById('ao_radius').innerHTML = this.value;

mapbox-gl-js version: v3.10.0

browser: Mozilla Firefox/Chromium

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.

POC

The following vulnerable shows a webpage using a data-target attribute to select and manipulate a DOM element using the JQuery library. In the vulnerable, 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 arbitrary 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

DOM based XSS Prevention Cheat Sheet
XSS (Cross Site Scripting) Prevention Cheat Sheet
DOM Based XSS
Types of Cross-Site Scripting
Cross-site scripting
CWE-79
CWE-116