its work for me, update ur browser.
The error you're encountering is related to a security feature in Chrome that requires TrustedHTML assignment for certain operations, such as assigning to innerHTML. This is part of Content Security Policy (CSP) and is designed to prevent Cross-Site Scripting (XSS) attacks¹.
Here are a couple of ways to address this issue:
Method 1: Using Trusted Types API You can create a policy using the Trusted Types API that returns the same input string. Here's how you can do it:
if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: (string, sink) => string
});
}
Then, you can use this policy in your code:
const newElement = document.createElement('div');
var innerHTMLText = 'Traduci';
'use strict';
newElement.innerHTML = window.trustedTypes.defaultPolicy.createHTML(innerHTMLText);
document.body.appendChild(newElement);
Method 2: Using DOMPurify Another approach is to use DOMPurify, a library that sanitizes HTML and prevents XSS attacks¹. Here's how you can use it:
First, install DOMPurify:
npm install dompurify
Then, use it in your code:
import DOMPurify from 'dompurify';
const newElement = document.createElement('div');
var innerHTMLText = 'Traduci';
'use strict';
newElement.innerHTML = DOMPurify.sanitize(innerHTMLText, {RETURN_TRUSTED_TYPE: true});
document.body.appendChild(newElement);
Please note that these methods are designed to maintain the security benefits of TrustedHTML assignment while allowing your code to function as intended¹². If your output doesn't require any markup, you could also consider changing from innerHTML to innerText³.
Source: Conversation with Bing, 1/30/2024 (1) How to fix TrustedHTML assignment error with Angular [innerHTML]. https://stackoverflow.com/questions/62810553/how-to-fix-trustedhtml-assignment-error-with-angular-innerhtml. (2) jquery - getting error `This document requires 'TrustedHTML' assignment .... https://stackoverflow.com/questions/61964265/getting-error-this-document-requires-trustedhtml-assignment-in-chrome. (3) html - How to fix TrustedHTML assignment error with Dotnet web form .... https://stackoverflow.com/questions/75173928/how-to-fix-trustedhtml-assignment-error-with-dotnet-web-form-innerhtml. (4) This document requires 'TrustedScriptURL' assignment. https://stackoverflow.com/questions/62081028/this-document-requires-trustedscripturl-assignment. (5) undefined. https://web.dev/trusted-types/. (6) undefined. https://www.intricatecloud.io/2019/10/using-angular-innerhtml-to-display-user-generated-content-without-sacrificing-security/. (7) undefined. https://github.com/cure53/DOMPurify. (8) undefined. https://w3c.github.io/webappsec-trusted-types/dist/spec/. (9) undefined. https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML.
This document requires 'TrustedHTML' assignment is just a warning report
It will not cause any error actually. And it cannot be hidden.
It is designed to report to the developers using Dev Tools.
Hello, I made this simple code,
const newElement = document.createElement('div');
var innerHTMLText = 'Traduci';
'use strict';
newElement.innerHTML = innerHTMLText;
document.body.appendChild(newElement);
but when I run it chrome give me this error
This document requires 'TrustedHTML' assignment
How can get ride of it and made my code working