此文档需要“TrustedScriptURL”分配

Question

在我的 Content-Security-Policy 标头中添加 require-trusted-types-for 'script'; 之后，它 从 Chrome 83 Beta 引入 以帮助锁定 DOM XSS 注入接收器，

当我打开我的网站时，它变成了一个空白页面。我的控制台中出现了很多这三种错误。 （Chrome 版本 83.0.4103.61）

此文档需要“TrustedScript”分配。

此文档需要“TrustedScriptURL”分配。

TypeError：无法在“HTMLScriptElement”上设置“src”属性：此文档需要“TrustedScriptURL”分配。

我已阅读文章 Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types 。但是，该文章仅说明了如何处理 TrustedHTML ，而没有说明如何处理 TrustedScript 或 TrustedScriptURL 。

任何指南都会有所帮助。谢谢！

原文由 Hongbo Miao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我们一直遇到同样的问题。

修复方法如下：

1. 安装 DOMPurify 库。 npm install --save DOMPurify

2. 创建文件 trusted-security-policies.js 。

3. 在您的捆绑器（例如 webpack）的入口点， 首先 导入此文件（在 任何 可能违反内容安全策略的代码之前）：

    import './path/to/trusted-security-policies';

 import DOMPurify from 'dompurify';

if (window.trustedTypes && window.trustedTypes.createPolicy) { // Feature testing
    window.trustedTypes.createPolicy('default', {
        createHTML: (string) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true}),
        createScriptURL: string => string, // warning: this is unsafe!
        createScript: string => string, // warning: this is unsafe!
    });
}

这是做什么的： 每当将字符串指定 为解析为 HTML 、URL 或脚本时，浏览器 会自动 将此字符串传递给定义的处理函数。

对于 HTML， DOMPurify 库正在从潜在的 XSS 代码中清除 HTML。

对于 scriptURL 和 script ，字符串只是通过。 请注意，这实际上禁用了这两个部分的安全性，并且只应在您尚未确定如何使这些字符串安全的情况下使用。一旦你有了它，相应地替换处理函数。

---

编辑，2021 年 12 月： 我能够 为 DOMPurify 做出贡献 ， 因此如果您需要在 HTML 字符串中使用 自定义元素 以及 自定义属性（在 2.3.4 版 之前是在消毒过程中简单地删除）：

 /**
 * Control behavior relating to Custom Elements
 */

// DOMPurify allows to define rules for Custom Elements. When using the CUSTOM_ELEMENT_HANDLING
// literal, it is possible to define exactly what elements you wish to allow (by default, none are allowed).
//
// The same goes for their attributes. By default, the built-in or configured allow.list is used.
//
// You can use a RegExp literal to specify what is allowed or a predicate, examples for both can be seen below.
// The default values are very restrictive to prevent accidental XSS bypasses. Handle with great care!

var clean = DOMPurify.sanitize(
    '<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>',
    {
        CUSTOM_ELEMENT_HANDLING: {
            tagNameCheck: null, // no custom elements are allowed
            attributeNameCheck: null, // default / standard attribute allow-list is used
            allowCustomizedBuiltInElements: false, // no customized built-ins allowed
        },
    }
); // <div is=""></div>

var clean = DOMPurify.sanitize(
    '<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>',
    {
        CUSTOM_ELEMENT_HANDLING: {
            tagNameCheck: /^foo-/, // allow all tags starting with "foo-"
            attributeNameCheck: /baz/, // allow all attributes containing "baz"
            allowCustomizedBuiltInElements: false, // customized built-ins are allowed
        },
    }
); // <foo-bar baz="foobar"></foo-bar><div is=""></div>

var clean = DOMPurify.sanitize(
    '<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>',
    {
        CUSTOM_ELEMENT_HANDLING: {
            tagNameCheck: (tagName) => tagName.match(/^foo-/), // allow all tags starting with "foo-"
            attributeNameCheck: (attr) => attr.match(/baz/), // allow all containing "baz"
            allowCustomizedBuiltInElements: true, // allow customized built-ins
        },
    }
); // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div>

原文由 connexo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

检查这个。可能会帮助你。

https://zeronights.ru/wp-content/themes/zeronights-2019/public/materials/3_ZN2019_Jakub_Vrana_Krzysztof_Kotowicz_Trusted_Types_and_the_end_of_DOM_XSS.pdf

潜在修复的参考资料：

• https://github.com/w3c/webappsec-trusted-types
• https://w3c.github.io/webappsec-trusted-types/dist/spec/#trused-script-url

可信类型和 Chrome 浏览器实现的背景：

• https://github.com/w3c/webappsec-trusted-types/blob/master/explainer.md
• https://www.chromestatus.com/feature/5650088592408576
• https://gadgets.kotowicz.net/poc/Trusted_Types_TPAC_2018.pdf

短期修复选项：

• 添加一个仅用于报告的 CSP 标头。 [不太好，如果您运行敏感的产品应用程序，您必须了解各种风险]

长期修复选项：

• 您可以调查以将外部第三方的东西带到您的基地并避免整体痛苦。

我不是专家，只是想从中吸取教训，我想说的是修复几乎是因情况而异，而不是灵丹妙药类型。

一切顺利！

原文由 Chris Smith 发布，翻译遵循 CC BY-SA 4.0 许可协议