加载 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 header:

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 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' data: blob: 'nonce-2726c7f26c'". Either the 'unsafe-inline' keyword, a hash ('sha256-1PxuDsPyGK6n+LZsMv0gG4lMX3i3XigG6h0CzPIjwrE='), or a nonce ('nonce-...') is required to enable inline execution.

(anonymous) @ jquery-3.6.0.js:6262 domManip @ jquery-3.6.0.js:6089 prepend @ jquery-3.6.0.js:6259 (anonymous) @ angular.min.js:315

:81/uploadGrp:1 Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' data: blob: 'nonce-2726c7f26c'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

第 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()'）甚至'value'.[=44中的<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, or use some Node.js packages的免费套餐来处理违规举报。
使用 'report-sample' 令牌，您将获得导致违规的代码示例（前 40 个字符）。

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

在附加 Chrome 条控制台消息后更新

jquery-3.6.0.js:6262 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' data: blob: 'nonce-2726c7f26c'". Either the 'unsafe-inline' keyword, a hash ('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 Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' data: blob: 'nonce-2726c7f26c'". Either the 'unsafe-inline' keyword, a hash ('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');

加载 Jquery.js 时出错 - 内容安全策略

Error blocked loading of Jquery.js - Content Security Policy

javascript

jquery

angularjs

content-security-policy

nonce