«Solution: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment, Failed to set the 'src' property on 'HTMLScriptElement': This document requires TrustedScriptURL assignment, Failed to execute setAttribute» In the of the Google Chrome browser, errors appear like: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment Failed to set the 'outerHTML' property on 'Element': This document requires 'TrustedHTML' assignment Failed to execute 'write' on 'Document': This document requires 'TrustedHTML' assignment Failed to execute 'parceFromString' on 'DOMParser': This document requires 'TrustedHTML' assignment Failed to evaluate a string as JavaScript because his document requires 'Trusted Type' assignment Failed to execute 'setAttribute' on 'Element': This document requires 'TrustedScript' assignment Failed to set the 'src' property on 'HTMLScriptElement': This document requires 'TrustedScriptURL' assignment
The fact is that the policy prohibits direct initiation of potentially XSS-vulnerable DOM-receivers, bypassing . Therefore, errors occur: • Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment - occurs when trying to assign value el.innerHTML= 'some_string'. • Failed to set the 'outerHTML' property on 'Element': This document requires 'TrustedHTML' assignment - occurs when trying to assign value el.outerHTML = 'some_string'. • Failed to execute 'write' on 'Document': This document requires 'TrustedHTML' assignment - occurs when trying to execute document.write(). • Failed to execute 'parceFromString' on 'DOMParser': This document requires 'TrustedHTML' assignment - occurs when trying to execute parseFromString(). • Failed to evaluate a string as JavaScript because his document requires 'Trusted Type' assignment - occurs when trying to execute eval(). • Failed to execute 'setAttribute' on 'Element': This document requires 'TrustedScript' assignment - occurs when trying to assign el.onclick = some_handler(). • Failed to set the 'src' property on 'HTMLScriptElement': This document requires 'TrustedScriptURL' assignment - occurs when trying to assign document.createElement('script').src = url. Detailed information can be found in the test which DOM elements are controlled by Trusted Types. How to get rid of errors This document requires 'TrustedHTML' assignment / This document requires 'TrustedScriptURL' assignment / This document requires 'TrustedScript' assignment Supporting tests for «Chrome: This document requires ‘TrustedHTML’ 'TrustetScript' 'TrustetScriptURL' assignment» The
document.body.innerHTML = "";
2 property
document.body.innerHTML = "";
3 gets or sets the HTML or XML markup contained within the element. To insert the HTML into the document rather than replace the contents of an element, use the method
document.body.innerHTML = "";
4. A string containing the HTML serialization of the element's descendants. Setting the value of
document.body.innerHTML = "";
3 removes all of the element's descendants and replaces them with nodes constructed by parsing the HTML given in the string htmlString. document.body.innerHTML = "";
7 Thrown if an attempt was made to set the value of
document.body.innerHTML = "";
3 using a string which is not properly-formed HTML.
document.body.innerHTML = "";
7 Thrown if an attempt was made to insert the HTML into a node whose parent is a
document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(
/</g,
"<",
)}</pre>`;
1. The
document.body.innerHTML = "";
3 property can be used to examine the current HTML source of the page, including any changes that have been made since the page was initially loaded. Reading
document.body.innerHTML = "";
3 causes the user agent to serialize the HTML or XML fragment comprised of the element's descendants. The resulting string is returned.
let contents = myElement.innerHTML;
This lets you look at the HTML markup of the element's content nodes. Note: The returned HTML or XML fragment is generated based on the current contents of the element, so the markup and formatting of the returned fragment is likely not to match the original page markup. Setting the value of
document.body.innerHTML = "";
3 lets you easily replace the existing contents of an element with new content. Note: This is a if the string to be inserted might contain potentially malicious content. When inserting user-supplied data you should always consider using
document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(
/</g,
"<",
)}</pre>`;
5 instead, in order to sanitize the content before it is inserted. For example, you can erase the entire contents of a document by clearing the contents of the document's
document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(
/</g,
"<",
)}</pre>`;
6 attribute:
document.body.innerHTML = "";
This example fetches the document's current HTML markup and replaces the
document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(
/</g,
"<",
)}</pre>`;
7 characters with the HTML entity
document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(
/</g,
"<",
)}</pre>`;
8, thereby essentially converting the HTML into raw text. This is then wrapped in a
document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(
/</g,
"<",
)}</pre>`;
9 element. Then the value of
document.body.innerHTML = "";
3 is changed to this new string. As a result, the document contents are replaced with a display of the page's entire source code.
document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(
/</g,
"<",
)}</pre>`;
Operational details What exactly happens when you set value of
document.body.innerHTML = "";
3? Doing so causes the user agent to follow these steps: - The specified value is parsed as HTML or XML (based on the document type), resulting in a
<ul id="list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul> - If the element whose contents are being replaced is a
<ul id="list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul> 3 element, then the <ul id="list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul> 3 element's <ul id="list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul> 5 attribute is replaced with the new <ul id="list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul> - For all other elements, the element's contents are replaced with the nodes in the new
<ul id="list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
Setting the value of
document.body.innerHTML = "";
3 lets you append new contents to the existing one of an element. For example, we can append a new list item (
<ul id="list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
- to the existing list (
const list = document.getElementById("list");
list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;
0): HTML<ul id="list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
JavaScriptconst list = document.getElementById("list");
list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;
Please note that using
document.body.innerHTML = "";
3 to append HTML elements (e.g.
const list = document.getElementById("list");
list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;
- will result in the removal of any previously set event listeners. That is, after you append any HTML element that way you won't be able to listen to the previously set event listeners.
It is not uncommon to see
document.body.innerHTML = "";
3 used to insert text into a web page. There is potential for this to become an attack vector on a site, creating a potential security risk.
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
Although this may look like a cross-site scripting attack, the result is harmless. HTML specifies that a
const list = document.getElementById("list");
list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;
4 tag inserted with
document.body.innerHTML = "";
3 . However, there are ways to execute JavaScript without using
const list = document.getElementById("list");
list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;
4 elements, so there is still a security risk whenever you use
document.body.innerHTML = "";
3 to set strings over which you have no control. For example:
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert
For that reason, it is recommended that instead of
document.body.innerHTML = "";
3 you use:
document.documentElement.innerHTML = <pre>${document.documentElement.innerHTML.replace(
/</g,
"<",
)}</pre>;
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
This example uses
document.body.innerHTML = "";
3 to create a mechanism for logging messages into a box on a web page. function log(msg) {
const logElem = document.querySelector(".log");
const time = new Date();
const timeStr = time.toLocaleTimeString();
logElem.innerHTML += `${timeStr}: ${msg}<br/>`;
}
log("Logging mouse events inside this container…");
The
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
2 function creates the log output by getting the current time from a
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
3 object using
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
4, and building a string with the timestamp and the message text. Then the message is appended to the box with the class
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
5. We add a second method that logs information about
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
6 based events (such as
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
7,
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
8, and
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
9):
function logEvent(event) {
const msg = `Event <strong>${event.type}</strong> at <em>${event.clientX}, ${event.clientY}</em>`;
log(msg);
}
Then we use this as the event handler for a number of mouse events on the box that contains our log:
const boxElem = document.querySelector(".box");
boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);
The HTML is quite simple for our example.
document.body.innerHTML = "";
0 The
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert
0 with the class
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert
1 is just a container for layout purposes, presenting the contents with a box around it. The
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert
0 whose class is
let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
5 is the container for the log text itself. The following CSS styles our example content.
document.body.innerHTML = "";
1 The resulting content looks like this. You can see output into the log by moving the mouse in and out of the box, clicking in it, and so forth. | 
