如何修复NextJS生产环境谷歌地图脚本违反CSP无法加载问题

核心原因 #

• 你在meta标签中配置的CSP规则没有生效，因为HTTP响应头返回的CSP优先级高于HTML内的meta标签CSP配置，你看到的报错里的CSP规则就是服务器/托管平台在响应头里返回的旧规则，没有包含https://maps.googleapis.com所以会拦截谷歌地图脚本的加载。
• 你没有主动引入的第三方域名出现在CSP规则里，通常是托管平台默认配置的通用CSP模板，或者项目中依赖的第三方包、NextJS插件在构建时注入的规则。

具体修复步骤 #

• 步骤1：修改HTTP响应头中的CSP配置（优先级最高，优先操作） #

  根据你的部署环境修改对应配置，在现有script-src规则中添加https://maps.googleapis.com：
  • Vercel部署：修改项目根目录下的vercel.json，在headers配置中补充CSP规则
  • Nginx部署：修改nginx配置文件，找到add_header Content-Security-Policy对应的配置项，添加谷歌地图域名
  • 其他托管平台（Netlify/云服务器等）：找到平台后台的HTTP响应头配置或者对应的配置文件，修改CSP即可

• 步骤2：校验NextJS项目配置 #

  检查项目根目录的next.config.js，如果有自定义headers配置，也要在对应的CSP规则中添加https://maps.googleapis.com，避免构建时被NextJS覆盖配置。

• 步骤3：清理多余CSP规则（可选） #

  如果要删掉你不需要的第三方域名CSP规则：
  • 先检查package.json中是否有不需要的统计、广告、社交登录类SDK，卸载后重新构建测试
  • 检查托管平台的安全配置页面，关闭默认注入的通用CSP规则，改为使用你自定义的规则即可

内容的提问来源于stack exchange，提问作者Lành Nguyễn Văn