加载应用触发CSP拦截jQuery执行报错，nonce配置无效如何解决

核心原因 #

你给jQuery的script标签添加nonce仅能放行jQuery自身脚本的加载，jQuery运行时通过innerHTML/prepend等API动态插入的内联脚本、内联样式、内联事件处理器不会继承jQuery的nonce属性，因此会触发CSP拦截。

分步修复方案 #

1. 修正CSP头配置 #

首先补全style-src的nonce配置，同时可直接添加报错提示的样式哈希值放行合法内联样式：

add_header Content-Security-Policy    "default-src 'self' data: blob: ;
                                        script-src 'self' data: blob: 'nonce-2726c7f26c' 'unsafe-hashes';
                                        style-src 'self' data: blob: 'nonce-2726c7f26c' 'sha256-1PxuDsPyGK6n+LZsMv0gG4lMX3i3XigG6h0CzPIjwrE=';
                                        img-src 'self' ;
                                        form-action 'self' ;
                                        frame-ancestors 'self' ;" always; 

注：'unsafe-hashes'仅用于放行指定哈希的内联事件，不会放开所有内联脚本权限，安全性远高于'unsafe-inline'

2. 改造动态插入的内联内容 #

所有通过jQuery插入的内容需做三类改造：

• 内联脚本改造：不要把脚本写在innerHTML字符串中，单独创建script元素手动添加nonce后再插入：

  const newScript = document.createElement('script')
  newScript.nonce = '2726c7f26c'
  newScript.textContent = '// 你的脚本逻辑'
  document.body.appendChild(newScript)
  

• 内联样式改造：优先把样式写为class放到外部CSS文件中，少量特殊样式可直接用报错给出的哈希值添加到style-src配置放行。
• 内联事件改造：移除标签上的onclick/onsubmit等内联事件属性，改用事件绑定API实现：

  // jQuery写法
  $('#submitBtn').on('click', submitForm)
  // 原生写法
  document.querySelector('#submitBtn').addEventListener('click', submitForm)
  

3. AngularJS适配 #

从报错看你同时使用了AngularJS，需要在ng-app根标签上添加ng-csp属性，开启AngularJS的CSP兼容模式，避免框架自动注入内联脚本/样式触发拦截。

额外安全提示 #

当前你使用的固定nonce存在安全风险，生产环境需每次请求生成随机不可预测的字符串作为nonce，否则CSP的防注入能力会完全失效。

内容的提问来源于stack exchange，提问作者Abhishek Singh