create-react-app项目触发script-src类CSP拦截导致页面白屏问题

核心问题逻辑 #

多来源的CSP拦截规则会叠加生效，仅调整HTML中meta标签的CSP配置，无法绕开优先级更高的拦截规则，最终导致脚本、样式资源被拦截，页面渲染失败出现全白屏。

分步排查操作 #

• 校验全链路CSP策略来源
  打开浏览器开发者工具的「网络」面板，选中当前站点的主文档请求，查看响应头字段：
  • 若存在Content-Security-Policy或Content-Security-Policy-Report-Only响应头，说明存在服务端/开发服务器层注入的CSP策略。按照CSP生效规则，多份CSP策略会取交集生效，不会被HTML内的meta标签配置的策略覆盖。需要把meta里的允许项和响应头中的策略做匹配，保证两边的script-src规则无冲突。
• 清理create-react-app的构建缓存
  版本回退操作没有生效，大概率是旧的构建缓存残留导致产物逻辑不一致：
  • 删除项目根目录下node_modules/.cache文件夹
  • 清空浏览器当前站点的所有缓存、Service Worker记录、本地存储数据
  • 重新执行启动/构建命令，避免使用旧的构建产物
• 定位'unsafe-inline'失效的触发原因
  按照CSP3规范，只要script-src策略中配置了nonce值、资源哈希校验项，浏览器会自动忽略策略中配置的'unsafe-inline'允许项，即便手动添加也不会生效。可以点击控制台CSP报错的详情入口，确认被拦截的内联脚本是否触发了nonce/哈希的强制校验逻辑，若存在则需要为对应内联脚本配置匹配的nonce值，而非依赖'unsafe-inline'放行。
• 排除浏览器扩展的干扰
  部分隐私类、广告拦截类浏览器扩展会自动为页面注入额外的CSP策略，这类场景下Chrome可能因为扩展权限差异不弹出明确报错，但实际会拦截脚本加载导致白屏。可通过无痕窗口（默认禁用所有扩展）打开项目地址，验证是否存在同类问题。
• 匹配Material-UI组件库的CSP适配要求
  项目使用的Material-UI v5版本默认通过内嵌样式注入生成渲染逻辑，若CSP的style-src规则未配置'unsafe-inline'允许项，会出现样式加载阻塞、页面渲染失败的问题，需要同步补全style-src的放行规则。

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