在 chrome 中出现错误“此文档需要“TrustedHTML”分配”

Posted 2023-05-09

【中文标题】在 chrome 中出现错误“此文档需要“TrustedHTML”分配”

【英文标题】：getting error `This document requires 'TrustedHTML' assignment` in chrome

【发布时间】：2020-09-09 20:09:19

【问题描述】：

我正在开发一个运行 Angularjs 1.4 的应用程序。今天早上，当我将 Chrome 浏览器更新为 Version 83.0.4103.61 时，应用程序开始崩溃并出现以下错误

似乎它不再接受 innerhtml 了。

编辑：我发现这与我们的 CSP 政策有关，尤其是 require-trusted-types-for 'script';

随着新的 chrome 更新，它似乎变得更严格了。

【问题讨论】：

这个我也想知道，网上资料不多。由于这个原因，Font Awesome 对我来说失败了

返回到 Angular 存储库的链接，带有解释：github.com/angular/angular/pull/32353

【参考方案1】：

@Doubidou 方法使用default，这将禁用 TrustedHTML assignment (CSP) 保护。

下面的方式不会禁用保护。我们正在创建一个将返回与输入相同的信任策略。

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

然后在任何输入之前准备好你的 html 代码：

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

来源：https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML