javascript - 如何使用新的可信类型 header 和 reCAPTCHA?

标签 javascript google-chrome content-security-policy trusted-types

我正在尝试使用 Chrome 83 中可用的新 require-trusted-types-for 'script' header ,这对我网站中的 reCAPTCHA 表单造成了问题。

为了测试,我使用了这个版本的 header ,它有助于将问题记录到控制台:

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

当我导航到我网站中具有 reCAPTCHA 的页面时,我可以提供 URL https://www.google.com/recaptcha/api.js包裹在 TrustedType 对象中作为 TrustedScriptURL 没有问题。没问题。

但是,api.js 文件本身包含触发此错误的 src 赋值:

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

api.js中触发错误的代码是:

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

recaptcha__en.js 代码本身也会触发相同类型的错误,但这次需要一个可信的 html 对象:

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

由于 api.js 中的代码未经过 Google 清理,因此无法在有效 header 的情况下执行。有解决方法吗?或者是否有一个标志强制 Google 返回一个 api.js 版本,该版本具有包含在 TrustedType 对象中的 src 赋值?

reCAPTCHA 如何与可信类型实现结合使用?

最佳答案

要加载使用可信类型的 reCAPTCHA 版本,您必须 pass trustedtypes=true在脚本 URL 的 GET 参数中。

https://www.google.com/recaptcha/api.js?trustedtypes=true

此版本将创建并使用名为“recaptcha”的可信类型策略。

关于javascript - 如何使用新的可信类型 header 和 reCAPTCHA?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62218724/

相关文章:

ckeditor - 内容安全策略CKeditor

javascript - 删除外部事件时在 FullCalendar 上获取资源 ID

sockets - 自签名证书 : connection timeouts

Jquery.css 在 IE 和 Webkit(Chrome、Safari)上执行不需要的闪烁效果,但 Firefox 没问题

javascript - 内容安全策略不从本地主机加载文件

javascript - nodeJS - 我究竟可以把内容安全政策放在哪里

javascript - 创建了一个 Angular Provider,现在出现 StaticInjectorError

javascript - 我可以在 React 函数组件中使用 "let"吗?

javascript - 为什么在 setinterval react 中单击按钮后状态没有更新?

javascript - Chrome 在我的主干页面上卡住 : how to debug?