Next.js嵌入Google Maps页面出现Content Security Policy警告如何解决

报错根本原因 #

这个警告是CSP（内容安全策略）的规则冲突导致的：

Content Security Policy 3规范明确规定，当script-src指令同时配置了'strict-dynamic'和'report-sample'时，'strict-dynamic'的优先级更高，浏览器会直接忽略'report-sample'的配置，因此抛出该警告。

修复步骤（适配Next.js + Google Maps嵌入场景） #

• 第一步：定位你项目中CSP的配置位置，Next.js项目的CSP通常配置在三个位置：next.config.js的自定义响应头规则、服务端组件通过next/headers设置的响应头、页面head的meta标签中。
• 第二步：根据你的安全需求选择对应修复方案：

  方案1（推荐，安全性更高）：保留strict-dynamic #

  直接删除script-src指令中的'report-sample'声明即可消除警告。
  若仍需要收集违规脚本样本，可将'report-sample'转移到default-src指令下，不要和'strict-dynamic'同放在script-src中。
  针对Google Maps嵌入的适配：给Google Maps的加载脚本配置nonce校验：
  1. 在服务端生成随机nonce值，将'nonce-${生成的nonce值}'添加到script-src的配置列表中
  2. 给引入Google Maps的script标签添加nonce="${生成的nonce值}"属性，即可正常加载Google Maps脚本，不会触发CSP拦截

  方案2：不需要strict-dynamic的场景 #

  直接删除script-src指令中的'strict-dynamic'声明，'report-sample'即可正常生效。
  针对Google Maps嵌入的适配：将Google Maps相关域名添加到script-src白名单中：

  script-src 'self' 'report-sample' https://maps.googleapis.com https://maps.gstatic.com;
  

额外注意事项 #

• Next.js App Router项目默认会生成大量内联脚本，尽量使用nonce配置适配strict-dynamic，不要直接开启'unsafe-inline'降低安全等级
• Pages Router项目如果使用了<Script>组件加载Google Maps，可给组件添加nonce属性传入生成的随机值，和CSP配置保持一致即可。

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