不添加'unsafe-inline'如何解决jquery.min.js触发CSP内联样式违规问题

你定位到的a.innerHTML = u[1] + S.htmlPrefilter(o) + u[2],是jQuery 3.5.1处理HTML字符串插入的核心逻辑：当你调用$().html()、$().append()等方法传入HTML字符串，或是jQuery内部逻辑（比如旧版本的动画、属性操作）生成带style属性的元素时，会直接通过innerHTML赋值插入DOM。
你当前的CSP策略未显式配置style-src，会继承default-src的规则，而CSP标准中，nonce仅对带nonce属性的<script>/<style>标签块生效，对元素行内的style属性无效，所以innerHTML插入的带行内style的元素会触发内联样式违规报错。

• 方案1：升级jQuery到3.6.0及以上版本
  这是成本最低的解决方案，jQuery 3.6.0专门适配了CSP严格场景，内部不再通过innerHTML注入带行内style的内容，改用setAttribute、style.property等DOM API直接设置样式，不会触发CSP的内联样式校验，大部分场景下无需修改业务代码即可解决问题。
• 方案2：补充style-src规则添加'unsafe-hashes'白名单
  如果你暂时无法升级jQuery，可以调整CSP策略，新增style-src配置：

  default-src 'self' 'nonce-XXXX'; 
  style-src 'self' 'nonce-XXXX' 'unsafe-hashes' sha256-xxxx sha256-yyyy;
  frame-ancestors 'self'; 
  form-action 'self';
  

  把Chrome控制台CSP报错中提示的内联样式对应的sha256哈希值加入白名单即可。'unsafe-hashes'仅放行匹配哈希值的特定内联样式，安全性远高于放开'unsafe-inline'。
• 方案3：业务侧改造规避行内样式
  排查所有调用jQuery DOM操作方法的代码，把HTML字符串中写死的style属性替换为自定义CSS类，通过$().addClass()方法给元素添加样式，从根源上避免插入带行内style的内容，完全消除CSP违规触发点。

不要尝试给style-src添加nonce解决行内style属性的校验问题，该用法不符合CSP标准，不会生效。

内容的提问来源于stack exchange，提问作者Hrishikesh Bawane