错误阻止加载 Jquery.js - 内容安全策略

Question

我在加载应用程序时遇到以下错误：

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). jquery-3.6.0.js:6333:7

这一行的代码：

if ( elem.nodeType === 1 ) {
      jQuery.cleanData( getAll( elem, false ) );
      elem.innerHTML = value;    // this line is causing issue
  }

我的 CSP 标头：

add_header Content-Security-Policy    "default-src 'self' data: blob: ;
                                        script-src 'self' data: blob: 'nonce-2726c7f26c';
                                        style-src 'self' data: blob: ;
                                        img-src 'self' ;
                                        form-action 'self' ;
                                        frame-ancestors 'self' ;" always; 

我也在尝试使用“nonce”，但它不起作用。

<script src="js/jquery-3.6.0.js" nonce="2726c7f26c"></script>

我不想使用“不安全内联”。

任何人都可以帮助解决这个问题，我在谷歌上搜索了 2 天，但没有任何结果。 提前致谢。

更新 1： 在 Chrome 中出现以下错误：

jquery-3.6.0.js:6262 拒绝应用内联样式，因为它违反 以下内容安全策略指令：“style-src 'self' 数据：blob：'nonce-2726c7f26c'"。要么是 'unsafe-inline' 关键字，一个 哈希（'sha256-1PxuDsPyGK6n+LZsMv0gG4lMX3i3XigG6h0CzPIjwrE='），或 nonce ('nonce-...') 是启用内联执行所必需的。

（匿名）@ jquery-3.6.0.js:6262 domManip @ jquery-3.6.0.js:6089 前置@ jquery-3.6.0.js:6259（匿名）@ angular.min.js:315

:81/uploadGrp:1 拒绝执行内联事件处理程序，因为它 违反以下内容安全策略指令：“script-src 'self' 数据：blob：'nonce-2726c7f26c'"。要么是 'unsafe-inline' 关键字、哈希 ('sha256-...') 或随机数 ('nonce-...') 是必需的 启用内联执行。请注意，哈希不适用于事件 处理程序、样式属性和 javascript: 导航，除非 存在“不安全哈希”关键字。

jquery-3.6.0.js:6262 行代码：

if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
     var target = manipulationTarget( this, elem );
     target.insertBefore( elem, target.firstChild ); //this line is causing issue.
}

Answer 1

jquery 3.6 redistributes 'nonce-value' 它注入到它注入的所有内联脚本中，包括$.ajax() 中的scriptAttrs: {nonce: "value"} 属性。因此行：

elem.innerHTML = value; // this line is causing issue

在“值”中包含内联事件处理程序（例如<tag onclick='...'）或javascript 导航（例如<a href='javascript:void()'）甚至<script>...</script>。

Firefox 浏览器并不太冗长来区分这些类型的内联脚本，但 Chrome 会更规范地描述违规行为 (Refused to execute inline script / Refused to execute inline event handler / Refused to run the JavaScript URL)。因此，使用 Chrome 可以粉碎发生的事情。

您也可以使用内容安全策略 (CSP) 的报告工具 - 将 'report-sample' 令牌添加到 script-src 指令中，并在 CSP 末尾添加 report-uri https://url_to_handle_reports; 指令（例如，您可以临时使用https://report-uri.com，或者使用一些Node.js packages来处理违规报告）。
使用'report-sample' 令牌，您将获得导致违规的代码示例（前 40 个字符）。

识别出导致违规的代码后，您已经可以尝试修复它了。

更新 Chrome 控制台消息附加后

jquery-3.6.0.js:6262 拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style-src 'self' data: blob: 'nonce-2726c7f26c'”。 'unsafe-inline' 关键字，哈希（'sha256-1PxuDsPyGK6n+LZsMv0gG4lMX3i3XigG6h0CzPIjwrE='）...

“sha256-1PxuDsPyGK6n+LZsMv0gG4lMX3i3XigG6h0CzPIjwrE=”哈希与典型的 block of <style> of Angular 框架相关。

Jquery 不会将 'nonce-value' 从脚本重新分配到样式。无论如何，Angular 在 style-src 指令中需要 'unsafe-inline' - 请参阅建议步骤：1. We should clearly state that allowing 'unsafe-inline' in style-src is required for Angular applications。

:81/uploadGrp:1 拒绝执行 内联事件处理程序，因为它违反了以下内容安全策略指令：“script-src 'self' data: blob: 'nonce-2726c7f26c'”。 'unsafe-inline' 关键字，哈希 ('sha256-...') ...

您确实插入了像elem.innerHTML = "<div onclick='...'" 这样的内联事件处理程序。这需要'script-src' 中的'unsafe-inline'，因为'unsafe-hashes' 令牌涵盖了内置事件处理程序，但Safari 不支持它。

如果您可以更改逻辑并使用addEventListener 附加事件处理程序：

document.querySelector("#element-id").addEventListener("click", function() {...do something...} );

您可以避免在script-src 中使用'unsafe-inline'。

顺便说一句：您可以使用一段代码来定义阻塞的事件处理程序：

if ('SecurityPolicyViolationEvent' in window)
  document.addEventListener('securitypolicyviolation', (e) => {
     console.log(e.sample + '` in `' + e.violatedDirective + '`');
  } );
else console.log('SecurityPolicyViolationEvent unsupported');