12

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.

enter image description here

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.

Azim Saiyed
  • 392
  • 1
  • 5
  • 15
  • I would like to know this too, there isn't much information online. Font Awesome is failing for me due to this –  May 24 '20 at 21:03
  • Back link to Angular repository, with explanations : https://github.com/angular/angular/pull/32353 – Doubidou Jul 09 '20 at 09:05

2 Answers2

9

@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

Benjamin Walter Mauss
  • 91
  • 1
  • 3
0

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

grantr
  • 878
  • 8
  • 16