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

编程问答 2022-12-25

问题描述

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

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>

我不想使用'unsafe-inline'。

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

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

jquery-3.6.0.js:6262 拒绝应用内联样式，因为它违反了 以下内容安全策略指令：“style-src 'self' 数据：blob：'nonce-2726c7f26c'"。要么是'unsafe-inline'关键字，一个 hash ('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' data: blob: 'nonce-2726c7f26c'"。要么是'unsafe-inline' 关键字、散列 ('sha256-...') 或随机数 ('nonce-...') 是必需的 启用内联执行。请注意，哈希值不适用于事件 处理程序、样式属性和 javascript: 导航，除非 'unsafe-hashes' 关键字存在。

在 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.
}

解决方法

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

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 需要 'unsafe-inline' 指令中的 style-src - 请参阅建议步骤：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='...'"。这需要 'unsafe-inline' 中的 'script-src'，因为内置事件处理程序包含在 'unsafe-hashes' 令牌中，但在 Safari 中不受支持。

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

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

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

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

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