CSP拒绝加载CSS但不拦截JS的DevTools复现问题问询

一、为什么仅CSS被CSP拦截，JS却不受影响？ #

从你提供的代码和错误信息里，能直接找到核心原因：

• 你的CSS资源使用的nonce是：o8ucNjn605sWzLMeVlFgM-kh
• 而CSP报错中明确显示，style-src 指令要求的合法nonce是：'nonce-t0wrytDNiwGcyBiQ64Uln-uP'

这两个nonce完全不匹配，所以浏览器严格按照CSP规则拦截了该CSS资源。

而JS资源（包括外部脚本和内联JS）之所以能正常加载执行，是因为所有JS代码使用的nonce都是 o8ucNjn605sWzLMeVlFgM-kh，这个值应该和你CSP规则里script-src指令指定的nonce完全一致（只是这部分规则没有在报错信息中展示），因此JS顺利通过了CSP校验。

简单总结：CSS的nonce与CSP的style-src要求不匹配，JS的nonce与script-src要求匹配，导致了只有CSS被拦截的差异。

二、为什么CSP错误仅在关闭重开DevTools后触发？ #

这个现象和你使用的Chrome 81.x版本的DevTools行为、浏览器资源缓存及CSP校验机制有关：

• 首次加载的日志时机问题：当你第一次打开页面时，浏览器已经完成了CSS资源的加载和CSP校验（校验不通过），但此时DevTools未打开，浏览器不会将这类错误回溯输出到控制台。首次打开DevTools时，Chrome不会主动触发已加载资源的CSP重新校验，所以看不到错误。
• 重开DevTools的校验触发：关闭并重新打开DevTools时，Chrome会触发页面资源的二次检查机制——比如重新解析CSP响应头、重新验证缓存资源的合规性，这时浏览器才会把之前未显示的CSP拦截错误输出到控制台。
• 旧版本Chrome的特定bug：你使用的Chrome 81.0.4044.113是一个较旧的版本，该版本的DevTools在CSP错误上报逻辑上可能存在缺陷，导致错误无法在首次打开时显示，仅在重开时触发日志输出。

验证与解决建议 #

• 直接查看页面的CSP响应头，确认style-src和script-src各自指定的nonce是否与对应资源中的nonce匹配，这能直接验证第一个问题的结论。
• 尝试升级Chrome到最新稳定版本，新版本在CSP错误上报和DevTools交互逻辑上做了大量优化，大概率能解决这个错误延迟显示的问题。

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