React+Node应用配置CSP后无法加载Webpack打包文件的问题咨询

问题场景 #

在React + Node应用中配置了如下Content Security Policy（CSP）请求头：

Content-Security-Policy: default-src 'self' https; script-src 'self'; connect-src 'self'; img-src 'self' data: ; font-src 'self' data: https://fonts.googleapis.com https://fonts.gstatic.com ; style-src 'self' 'sha256-rigr5uxAUhb5lEsRjTMBA5S2juuVOhHXstW+OjxdE+I=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-1tr38LWy83eluPFcuLQYtramGMCOjscxtiOqVJ/gMrc=' 'sha256-XmRbDWO4PqwfNgeZPWi3/fHjRx02kfcTM8yid7tdHmw=' 'sha256-ZAzabP7foNZKvX4PqkWVi1UH7ceqLrmDfa/nFYEjJFE=' 'sha256-JTGGKTw77cKzHSmo5g2N94OEWo3dbzNZQ/yT2IqNKow=' 'sha256-Bz44xM5KHxgdFnmpU755ZnbcU+V2yM+Ox5ljX4u+vVs=' https://fonts.googleapis.com; base-uri 'self'; form-action 'self';

（注：原配置中URL前的多余反斜杠为语法错误，已修正）

原本认为script-src: 'self'可加载当前域名下所有脚本，但应用无法正常运行，仅当添加Webpack打包生成的具体脚本路径（如http://localhost:6200/core.2d6b592992d851d11f4c.js）后才恢复正常。

疑问解答 #

1. script-src: 'self'为何不生效？多环境哈希不同该如何处理？ #

正常情况下，script-src: 'self'允许加载当前域名下的所有脚本（包括Webpack打包的带哈希的文件），无需单独添加具体路径。出现问题的核心原因大概率是CSP配置语法错误——原配置中URL前添加了多余的反斜杠（如\https://fonts.googleapis.com），导致浏览器解析CSP规则异常，'self'规则未正确生效。

针对多环境哈希不同的问题，解决方案如下：

• 修正CSP语法：移除所有不必要的反斜杠，确保规则符合标准（如font-src中直接写https://fonts.googleapis.com即可，无需转义）。
• 处理内联脚本：如果应用存在Webpack runtime内联脚本、React hydrate内联脚本等，不能依赖具体路径，可采用两种方案：
  • Nonce方案：服务器端生成随机唯一的nonce值，注入到HTML的<script>标签（如<script nonce="随机值">），同时在CSP的script-src中添加'nonce-随机值'。此方案无需关注哈希变化，只要nonce匹配即可放行。
  • 避免内联脚本：修改Webpack配置，将runtime提取为单独文件（如设置runtimeChunk: 'single'），避免生成内联脚本，这样'self'规则即可覆盖所有脚本。

2. 是否可以使用style-src: 'unsafe-inline'？存在哪些风险？ #

可以使用，但会增加安全风险：'unsafe-inline'允许所有内联样式，攻击者可利用此规则配合XSS漏洞执行恶意操作（如通过内联样式窃取页面信息、诱导用户操作等），即使现代浏览器限制了CSS表达式，仍存在其他攻击途径。

更安全的替代方案：

• 保留样式哈希：像当前配置一样，针对内联<style>标签的内容生成哈希并添加到style-src中，Webpack或CSS-in-JS工具通常可自动生成这些哈希。
• Nonce方案：和脚本的nonce逻辑一致，给内联<style>标签添加nonce属性，CSP的style-src中添加'nonce-随机值'。
• 注意元素style属性：框架生成的元素style属性（如React的style={{}}）不属于CSP限制的"内联样式"范畴，默认允许，无需额外配置。

若必须使用'unsafe-inline'，需确保应用已做好XSS防护（如输入过滤、HTML转义、避免危险DOM操作等），最大程度降低攻击面。

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