getting error `This document requires 'TrustedHTML' assignment` in chrome

Question

I am working on an app running Angularjs 1.4. This morning the app started crashing wit the below error when I updated my Chrome browser to Version 83.0.4103.61

Seems like it does not accept innerHTML anymore.

Edit: I figured out it has something to do with our CSP policies especially require-trusted-types-for 'script';

With the new chrome update, it seems to have become stricter.

Internment

I would like to know this too, there isn't much information online. Font Awesome is failing for me due to this – Fold

Back link to Angular repository, with explanations : github.com/angular/angular/pull/32353 – Invar

Answer 1

@Doubidou method uses default, which is going to disable TrustedHTML assignment (CSP) protection.

The way bellow isn't going to disable the protection. We are creating a trust policy that is going to return the same as the input.

escapeHTMLPolicy = trustedTypes.createPolicy("forceInner", {
    createHTML: (to_escape) => to_escape
})

Then just prepare your html codes before any input:

my_element.innerHTML = escapeHTMLPolicy.createHTML("<h1>your_html</h1>");

Source: https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML

Gass

I now get another error: Policy "forceInner" disallowed – Lambda

Answer 2

I landed here because of a scraping issue with python/selenium on a recent recaptcha build, here is the solution using @Benjamin Walter Mauss's answer above:

driver.execute_script(f'''const escapeHTMLPolicy = trustedTypes.createPolicy("forceInner", {{createHTML: (to_escape) => to_escape}});
        document.getElementById("g-recaptcha-response").innerHTML = escapeHTMLPolicy.createHTML("{recaptcha_token}");''') 

note I'm doubling the bracket in the javascript function to escape them for f-string formatting

Blockbusting