The following code is vulnerable to DOM-based cross-site scripting because it uses unsanitized URL parameters to alter the DOM of its webpage.
Because the user input is not sanitized here and the used DOM property is vulnerable to XSS, it is possible to inject arbitrary code in the user's browser through this example.
==== Noncompliant code example
The https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML[``Element.innerHTML``] property is used to replace the contents of the `root` element with user-supplied contents. The `innerHTML` property does not sanitize its input, thus allowing for code injection.
const queryParams = new URLSearchParams(document.location.search);
const input = queryParams.get("input");
rootEl.innerHTML = input; // Noncompliant
----
==== Compliant solution
The https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText[``HTMLElement.innerText``] property does not create DOM elements out of its input, rather treating its input as a string. This makes it a safe alternative to `Element.innerHTML` depending on the use case.
[source,javascript,diff-id=1,diff-type=compliant]
----
const rootEl = document.getElementById('root');
const queryParams = new URLSearchParams(document.location.search);
const input = queryParams.get("input");
rootEl.innerText = input;
----
=== How does this work?
In general, one should limit the use of dangerous properties and methods, such as `Element.innerHTML` or `Document.write()`, as there exist many ways for an attacker to exploit their usage. Instead, prefer the usage of safe alternatives such as `HTMLElement.innerText` or `Node.textContent`. Furthermore, frameworks such as React or Vue.js will automatically escape variables used in views, making it much harder to accidentally write vulnerable code.
If these options are not possible, sanitization of the attacker-controllable input should be preferred.
