此文档需要 'TrustedScriptURL' 分配

This document requires 'TrustedScriptURL' assignment

在我的Content-Security-Policyheader中添加require-trusted-types-for 'script';后,引入自 Chrome 83 Beta 帮助锁定 DOM XSS 注入槽,

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

This document requires 'TrustedScript' assignment.

This document requires 'TrustedScriptURL' assignment.

TypeError: Failed to set the 'src' property on 'HTMLScriptElement': This document requires 'TrustedScriptURL' assignment.

我已阅读文章Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types。但是文章只说了如何处理TrustedHTML,没有说TrustedScriptTrustedScriptURL.

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

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

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

潜在修复参考:

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

Short-term 修复选项:

  • 添加 report-only CSP header。 [不太好,如果您是 运行 敏感的产品应用程序,则必须了解各种风险]

长期修复选项:

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

我不是专家,只是想从中吸取教训,我想说的是修复几乎是因情况而异,而不是银弹类型。

祝一切顺利!

我们 运行 遇到了同样的问题。

修复方法如下:

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

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

  3. 在您的捆绑器(例如 webpack)的入口点中,首先导入此文件 (在 any 之前可能违反内容安全策略的代码):

    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。

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


编辑,2021 年 12 月: 我能够 contribute to DOMPurify so the library now also can be configured to work if you have the need to use custom elements in your HTML strings, as well as custom attributes (which prior to release 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>