Greasy Fork

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

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.