Trusted Types header poses problem for reCAPTCHA api.js code: it needs TrustedScriptURL

[tmb-github]

trafficstars

Chrome Version 83.0.4103.97 (Official Build) (64-bit) Windows 8.1

I'm trying to use the new require-trusted-types-for 'script' header available in Chrome 83, and it poses a problem for a reCAPTCHA form in my site.

For testing, I'm using this version of the header, which helpfully logs problems to the console:

Content-Security-Policy-Report-Only: require-trusted-types-for 'script';

When I navigate to the page in my site that has reCAPTCHA, I can provide the URL https://www.google.com/recaptcha/api.js wrapped in a TrustedType object as a TrustedScriptURL without an issue. That's no problem.

However, the api.js file itself contains a src assignment that triggers this error:

This document requires 'TrustedScriptURL' assignment.
(anonymous) @ api.js:1
(anonymous) @ api.js:1

The code in api.js that triggers the error is:

po.src = 'https://www.gstatic.com/recaptcha/releases/ADnAC3ZykfbIOflWgrKNsVVT/recaptcha__en.js';

Since the code in the api.js is not sanitized by Google, it can't be executed with the header in effect. Is there a workaround for this? Or is there a flag that forces Google to return a version of the api.js that has the src assignment wrapped in a TrustedType object?

How can reCAPTCHA be used in conjunction with Trusted Types enforcement?

[tmb-github]

P.S. On further inspection, the recaptcha__en.js code also triggers the same type of error, but this time a trusted html object is needed:

recaptcha__en.js:formatted:2690 [Report Only] This document requires 'TrustedHTML' assignment.
(anonymous) @ recaptcha__en.js:formatted:2662
(anonymous) @ recaptcha__en.js:formatted:2180
Ph.bottomright.border-radius.render @ recaptcha__en.js:formatted:14714
(anonymous) @ recaptcha__en.js:formatted:599
(anonymous) @ recaptcha__en.js:formatted:5386
(anonymous) @ recaptcha__en.js:formatted:2879
ZI @ recaptcha__en.js:formatted:10647
(anonymous) @ recaptcha__en.js:formatted:4051
(anonymous) @ recaptcha__en.js:formatted:696
(anonymous) @ recaptcha__en.js:formatted:696
(anonymous) @ recaptcha__en.js:formatted:4202
(anonymous) @ recaptcha__en.js:formatted:536
(anonymous) @ recaptcha__en.js:formatted:5151
(anonymous) @ recaptcha__en.js:formatted:536
(anonymous) @ recaptcha__en.js:formatted:14832
(anonymous) @ recaptcha__en.js:formatted:15037

[rowan-m]

Thanks for this! I'm going to spend a bit of time looking at what might be some appropriate best practice here and will document.

[tmb-github]

@rowan-m Thanks! This also affects Google Analytics and Google Tag Manager, and I don't know how to alert those teams. If you could ping them to look at this issue and see what can be done about those tools, it would be great. Currently, Google is pushing this technology, and yet it can't be used with its own technology that's in widespread use.

[av09]

@tmb-github Any news on this? How are you bypassing this, I figured this issue in 2022!

[tmb-github]

@av09 I dropped using reCaptcha entirely because of this problem. The Google Analytics and Google Tag Manager have been rebuilt to use TrustedTypes; it's possible that reCaptcha has as well. Looking at the source code at https://www.gstatic.com/recaptcha/releases/81cz2KigKZoE-gRplogO8692/recaptcha__en.js, it appears that it has as well. Perhaps give it a go and see?

[kdeng]

Any workaround for solving this issue? Thanks.

[Zackere]

https://github.com/evoWeb/recaptcha/issues/70#issuecomment-1679248851 is the recommended way I believe