The HTML Sanitizer API
is an API that sanitizes
untrusted HTML for insertion into the DOM, minimizing the risk of
unintended script execution.
In its simplest form, it allows you to replace innerHTML= with setHTML().
Sanitizing HTML can be simple, if you stick to safe defaults.
But you can also make use of powerful customizations below.
Input String
Sanitizer Configuration
The Sanitizer default configuration is safe and will likely suffice for many applications. Note that all sanitizers guarantee a safe baseline, so even a misconfigured Sanitizer will not allow script execution.
Configuration:
For (parse context):
const config =
Live Output
node.setHTML(input);
const sanitizer = new Sanitizer(config);
node.setHTML(input, {sanitizer: sanitizer});
How does it work?
The core of the API is the Element.setHTML() function, which can serve as a safe
alternative to setting innerHTML. When only an input string is supplied,
the browser will use a safe list of default elements and attributes.
However, you can also supply a config dictionary that allows to restrict or loosen the defaults.
Regardless of what you end up doing, the setHTML() function will always keep its
core promise that all scripts will be removed.
This page is meant as a quick demonstration of the
very basics of the API, to give you a feel for its usage. Here, that boils down to the
following:
el.setHTML(untrustedString);
The goal for the default configuration is to ensure that the browser won't execute any script as a result of inserting the resulting nodes. You may need to change the sanitizer's configuration if your application has special needs. Configuration options are documented in the specification. For example, you may wish to only allow formatted text:
const config = {
"elements": ["p", "span", "s", "i", "b", "em", "strong", "u"]
};
const s = new Sanitizer(config);
el.setHTML(untrustedInput, {sanitizer: s});