React生产环境下https://apis.google.com/js/api.js被CSP拦截问题求助

核心原因 #

• 你的csp-html-webpack-plugin仅负责在生成的HTML中注入meta标签形式的CSP规则，若生产环境的服务器（Nginx/Apache）或CDN额外配置了Content-Security-Policy响应头，浏览器会执行两份规则的最严格交集，服务器规则未添加谷歌相关域名就会触发拦截。
• 你在script-src中配置了完整资源路径https://apis.google.com/js/api.js，大部分浏览器的CSP匹配逻辑仅支持源地址校验，不识别完整文件路径，导致匹配失败。
• https://apis.google.com/js/api.js加载后会动态拉取其他谷歌域下的附属脚本，仅配置单个JS地址无法覆盖后续动态加载的资源，也会触发拦截。
• 若你的CSP同时配置了nonce或哈希校验规则，配置中的'unsafe-inline'和'unsafe-eval'会被浏览器自动忽略，可能连带自定义源规则失效。

修复步骤 #

1. 修正script-src的域名配置，将完整路径替换为源地址，同时补充谷歌动态资源依赖的域名：

new CspHtmlWebpackPlugin({
  'script-src': [
    "'unsafe-inline'",
    "'unsafe-eval'",
    "https://apis.google.com", // 替换原完整JS路径
    "https://*.gstatic.com", // 补充谷歌静态资源域名
    "https://www.google.com", // 补充谷歌服务主域名
    "https://www.wiris.net/demo/plugins/app/configurationjs",
    "https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js",
    "https://cdn.mathjax.org/mathjax/latest/MathJax.js",
  ],
  'style-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"]
})

2. 检查生产环境服务器/CDN的响应头配置：
   • 若保留服务器侧CSP配置，需同步将上面的谷歌相关域名添加到服务器的script-src规则中
   • 若不需要多份CSP规则，可直接删除服务器侧的Content-Security-Policy响应头，仅保留HTML meta标签的CSP规则即可
3. 打包后验证生成的HTML文件，确认meta标签中的CSP内容已正确写入你配置的所有源地址。
4. 若仍有拦截，可查看浏览器控制台的CSP报错信息，提取报错提示中缺失的源地址，补入script-src配置即可。

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