Why the Sanitizer API is just `setHTML()`
Sanitizing HTML is the practice of taking a piece of HTML and removing some unwanted elements and attributes. Most often this is done to allow user-generated content with HTML but without causing XSS bugs. When imported from a library, a sanitizer typically looks like this: const clean = DOMPurify.sanitize(input); context.innerHTML = clean; However, the API that we are building doesn’t look like this at all. The core feature of the Sanitizer API is actually just Element.setHTML(input). This blog post will explain why. To do so, we have to study the two lines of code from the DOMPurity example above. They result in the following steps: Take an input string (and optionally a list of allowed elements as parameter). Parse the input into an HTML fragment (no context element given). Traverse…