错误阻止加载 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' data: blob: 'nonce-2726c7f26c'”。 启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-1PxuDsPyGK6n+LZsMv0gG4lMX3i3XigG6h0CzPIjwrE='）或随机数（“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-...”）。 请注意，除非存在“unsafe-hashes”关键字，否则哈希值不适用于事件处理程序、样式属性和 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将“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指令中添加'report-sample'令牌并添加report-uri https://url_to_handle_reports; CSP 末尾的指令（例如，您可以临时使用https://report-uri.com的免费计划，或使用一些Node.js 包来处理违规报告）。
使用'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=' 哈希与Angular框架的<style>典型块有关。

Jquery 不会将'nonce-value'从脚本重新分配到样式。 无论如何，Angular 需要在style-src指令中使用'unsafe-inline' - 请参阅建议步骤： 1.我们应该明确指出，Angular 应用程序需要在 style-src 中允许使用 'unsafe-inline' 。

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

您确实插入内联事件处理程序，如elem.innerHTML = "<div onclick='...'" 。 这需要'unsafe-inline' 'script-src' 'unsafe-inline'中的'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');