HTML Sanitizer API Playground

The HTML Sanitizer API is an API that sanitizes an untrusted string, minimizing the risk of unintended script execution. Amazing, right?

Untrusted Input

Live Output

Configuration: new Sanitizer()

sanitizeToString(input):

sanitize(input):

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.replaceChildren(s.sanitize(untrustedInput));

The goal is for that default configuration 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.replaceChildren(s.sanitize(untrustedInput));