问题标签 [trusted-types]

更糟糕的是，我的测试通过了使用 Chrome 77 和 Chromedriver 77（测试通过，数据加载到网页等）。只有当我手动启动 Chrome 77 浏览器并对其进行测试时，它才会失败。

这基本上是我的代码在做什么：

问题是在 Chrome 77param === "View"中是假的！但单独使用 Chrome 77 时，这并不是错误的。

我正在尝试使用require-trusted-types-for 'script'Chrome 83 中可用的新标​​头，它给我的网站中的 reCAPTCHA 表单带来了问题。

为了进行测试，我使用了这个版本的标头，它有助于将问题记录到控制台：

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

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

触发错误的代码api.js是：

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

由于 Google 未对其中的代码进行api.js清理，因此无法在标头生效的情况下执行它。有解决方法吗？或者是否有一个标志强制谷歌返回一个api.js将src赋值包装在TrustedType对象中的版本？

reCAPTCHA 如何与可信类型强制结合使用？

（看来我的问题与在 chrome 中出现错误“此文档需要 'TrustedHTML' assignment”有关，但我使用的是 Angular v10）

描述：

当我[innerHTML]="myVar"在 Angular 10（或更低版本）项目上使用该指令时，使用严格的 CSP require-trusted-types-for 'script';，它会失败并显示以下消息：

此文档需要“TrustedHTML”分配。错误类型错误：无法在“元素”上设置“innerHTML”属性：此文档需要“TrustedHTML”分配。

如何重现：

• 打开一个 Angular X 项目
• [innerHTML]="someVar"在模板中使用指令
• 添加require-trusted-types-for 'script';CSP 标头
• 检查 Chrome 控制台；)

我尝试了什么：

在阅读了有关受信任类型的一些资料后，例如：

• https://web.dev/trusted-types/
• https://www.intricatecloud.io/2019/10/using-angular-innerhtml-to-display-user-generated-content-without-sacrificing-security/

我尝试在我的 Angular 项目中使用https://github.com/cure53/DOMPurify 。只需添加包，创建一个 Angular 管道，然后在模板中使用它。

可以使用以下代码创建管道：

它可以像这样使用：[innerHTML]="myVar | safeHtml"

当然，我用 a 检查了返回console.log，它给了我一个真正的 TrustedHTML 对象。Chrome 控制台中弹出了新错误，因此我不得不添加一个新的 CSP 标头来授权 DOMPurify：

require-trusted-types-for 'script';trusted-types dompurify

在那之后，Chrome 很高兴看到了 DOMPurify 字符串操作。

然而，最初的错误再次出现！

我不明白我错过了什么 - Chrome 抱怨 innerHTML 调用中的 TrustedHTML 类型，所以我做了一个 TrustedHTML 转换。在那之后 Chrome 想要一个明确的 dompurify 授权，所以我这样做了，然后 Chrome 再次抱怨 TrustedHTML 类型......

阅读Angular 安全指南后，我想：

• 配置内容安全策略
• 启用可信类型强制

到目前为止，这是我更改index.html的方式：

现在，我的控制台中有很多错误：

我的问题：

• 是否可以定义Content-Security-Policy两次/两者：
  一个用于“经典”CSP 配置，一个用于受信任类型？
  是否有意义？
• 它们如何相互关联？
• 我如何使它在本地和生产中工作？
  • 我知道这个配置可能应该只在生产环境中激活（因为 JIT），
    使用特定的index.production.html文件（参见参考资料）。我不是只为两个元属性复制index.html
    的忠实粉丝......
  • 我还看到我可以在 my 中使用该headers属性architect.serve.configurations.production，
    但我不确定它是否更好和/或等效
• 我什至应该使用trusted-types?
  Angular 安全指南推荐使用它，但仍处于试验阶段

我阅读了一些有趣的资源，但它们没有展示如何具体使用 CSP 属性。
我正在使用 Angular 13。