This example uses the Trusted Types API to sanitize HTML strings before they are written to a document. You should always use trusted types for passing untrusted strings to unsafe APIs.
The example initially displays some default text and a button. When the button is clicked, the current document is opened, some strings of HTML are converted to TrustedHTML instances and written into the document, and the document is then closed. This replaces the document in the example frame, including the original HTML for the button and the JavaScript that made the update!
<p>Some original document content.</p>
<button id="replace" type="button">Replace document content</button>
First we use the Window.trustedTypes property to access the global TrustedTypePolicyFactory, and use its createPolicy() method to define a policy called "docPolicy".
The new policy defines a transformation function createHTML() for creating the TrustedHTML objects that we will pass to the writeln() method. This method can do anything it likes with the input string: the trusted types API just requires that you pass the input through a policy transformation function, not that the transformation function does anything in particular.
You'd use the method to sanitize the input by removing potentially unsafe features such as <script> tags or event handler attributes. Sanitization is hard to get right, so this process typically uses a reputable third-party library such as DOMPurify.
Here we implement a rudimentary "sanitizer" that replaces < symbols in script opening and closing tags with the < character. The injected strings in this example don't actually contain any harmful elements, so this is purely for demonstration.
const policy = trustedTypes.createPolicy("docPolicy", {
createHTML(string) {
return string
.replace("<script", "<script")
.replace("</script", "</script");
},
});
We can then use the TrustedTypePolicy.createHTML() method on the returned policy to create TrustedHTML objects from our original input strings. These are then passed to the writeln() function when the user clicks the button.
const replace = document.querySelector("#replace");
const oneInput = "<h1>Out with";
const twoInput = "the old</h1>";
const threeInput = "<pre>in with";
const fourInput = "the new!</pre>";
replace.addEventListener("click", () => {
document.open();
document.writeln(policy.createHTML(oneInput));
document.writeln(policy.createHTML(twoInput), policy.createHTML(threeInput));
document.writeln(policy.createHTML(fourInput));
document.close();
});
Click the button. Note that a newline is added after each call to writeln(), but this will only be visible inside the <pre> element because its layout preserves whitespace by default.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4