sanitizeFor() method of the
Sanitizer interface is used to parse and sanitize a string of HTML for insertion into the DOM at some later point.
The method accepts the tag name of the eventual destination HTML element as a parameter, and returns an HTML element object (of that type) that contains the sanitized subtree as its child.
This context is needed because the result of parsing an HTML string depends on where it is used.
<td> elements are valid nodes when inserted into a
<table> but will be skipped/ignored when parsed into a
The subtree must be inserted into an element of the same type as the returned object (and the original
If the caller extracts the sanitized subtree from the object, for example by using
innerHTML, it is their responsibility to ensure the correct context is used when it is inserted in the DOM.
Sanitizer() configuration strips out XSS-relevant input by default, including
<script> tags, custom elements, and comments.
The sanitizer configuration may be customized using
Sanitizer() constructor options.
Element.setHTML() instead of this method if the target element is available for immediate update.
A string indicating the HTML tag of the element into which the
inputis to be inserted. For example
"p", and so on.
A string of HTML to be sanitized.
An HTML element corresponding to the tag specified in the
element parameter, containing the parsed and sanitized
input string as a DOM subtree.
For example, if the
"div" then the return value would be a
The code below demonstrates how to sanitize a string of HTML into a
const unsanitized_string = "abc <script>alert(1)</script> def"; // Unsanitized string of HTML const sanitizer = new Sanitizer(); // Default sanitizer; // Sanitize the string let sanitizedDiv = sanitizer.sanitizeFor("div", unsanitized_string); //We can verify the returned element type, and view sanitized HTML in string form: console.log( (sanitizedDiv instanceof HTMLDivElement) ); // true console.log(sanitizedDiv.innerHTML) // "abc def" // At some point later ... // Get the element to update. This must be a div to match our sanitizeFor() context. // Set its content to be the children of our sanitized element. document.querySelector("div#target").replaceChildren(sanitizedDiv.children);
|HTML Sanitizer API |
BCD tables only load in the browser