Next.js配置CSP使用nonce仍拦截Google Tag Manager问题求解

解决方案 #

1. 调整GTM容器配置（核心，无需新增unsafe-eval）
   你遇到的eval拦截是因为GTM默认容器版本依赖eval执行自定义逻辑，目前官方已经提供了无eval的兼容版本，直接在GTM后台操作即可：
   进入对应容器的「容器设置」页面，找到「内容安全政策」选项，勾选「启用无评估（eval）的CSP兼容版本」，保存设置后重新发布容器即可，该配置会让GTM完全不使用eval相关语法，不会触发unsafe-eval拦截。

2. 修正CSP配置规则
   你当前的CSP配置存在冗余和缺失项，调整后如下即可：

default-src 'self';
script-src 'nonce-{NONCE-KEY}' 'strict-dynamic' https://www.googletagmanager.com;
img-src https://www.googletagmanager.com https://www.google-analytics.com https://ssl.gstatic.com;
frame-src https://www.googletagmanager.com;
connect-src https://www.google-analytics.com https://region1.google-analytics.com https://www.googletagmanager.com;

说明：

• 移除了不必要的全局http: https:规则，避免权限过大
• 单独拆分各指令粒度更安全，script-src保留的strict-dynamic会自动信任经nonce验证的GTM脚本加载的后续子脚本，无需额外添加其他GTM相关的脚本域名
• 补充的img、frame、connect指令覆盖GTM、谷歌统计的跟踪请求、noscript场景的iframe加载需求

3. 确认nonce配置正确性
   你当前的GTM初始化代码已经添加了自动传递nonce给gtm.js的逻辑，只需确认两点即可：

• 服务端每次请求生成的nonce值是随机唯一的，不能硬编码固定值
• CSP响应头里的nonce值和HTML中script标签、Head、NextScript上的nonce值完全一致

4. 可选优化
   如果不需要兼容IE11等不支持CSP3的旧浏览器，可以直接移除CSP中的'unsafe-inline'配置，进一步提升安全等级。

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