HTML Sanitizer API Playground

The HTML Sanitizer API is an API that sanitizes untrusted HTML for insertion into the DOM, minimizing the risk of unintended script execution.

Input String

Link to this input.

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

const sanitizer = new Sanitizer(config); node.setHTML(input, {sanitizer: sanitizer});

How does it work?

The API's shape and behavior is still under active discussion, so we'd appreciate your early feedback. This page is meant as a quick demonstration of the very basics of the API, to give you a feel for it's usage. Here, that boils down to the following:

const s = new Sanitizer();
el.setHTML(untrustedString, {sanitizer: s});

The goal for the default configuration is to ensure that the browser won't execute any code 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 block some style vectors in addition to script:

const config = {
    dropAttributes: { "style": ["*"] },
    dropElements: [ "style" ]
};
const s = new Sanitizer(config);
el.setHTML(untrustedInput, {sanitizer: s});