錯誤阻止加載 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');