配置Content Security Policy时Google Tag Manager脚本加载报错如何解决？

问题原因分析 #

你当前的CSP配置存在几个明确的规则错误，导致GTM脚本无法匹配放行：

• 路径匹配错误：你配置的https://*.googletagmanager.com/gtm.js/末尾多了斜杠，且路径限制过死。实际加载的GTM脚本地址是https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX，携带查询参数且末尾无斜杠，无法匹配你写的规则。
• 域名拼接错误：配置中https://tagmanager.google.com/http://www.googleadservices.com/pagead/conversion_async.js是两个独立的地址，你漏掉了中间的空格，导致两个地址被识别为一个无效URL，完全无法生效。
• 规则冗余：你重复声明了两次'unsafe-eval'，虽然不影响运行，但属于无效冗余配置。

修正后的CSP script-src配置 #

Content-Security-Policy: script-src 'self' 'unsafe-eval' 'unsafe-inline' https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js https://www.google-analytics.com https://*.googletagmanager.com https://tagmanager.google.com https://www.googleadservices.com/pagead/conversion_async.js https://*.google.com;

调整说明 #

• 把https://*.googletagmanager.com/gtm.js/简化为https://*.googletagmanager.com，允许该域名下所有脚本加载，天然覆盖带查询参数的gtm.js请求；如果要严格控制路径，也可以改为https://*.googletagmanager.com/gtm.js（去掉末尾斜杠即可匹配带参数的请求）。
• 拆分了拼接错误的两个地址，分别添加https://tagmanager.google.com和https://www.googleadservices.com/pagead/conversion_async.js规则。
• 整合了重复的'unsafe-eval'声明，规则更简洁。

额外注意事项 #

• 如果你在GTM中使用了自定义HTML脚本，需要保留'unsafe-inline'和'unsafe-eval'；如果想要避免使用不安全的inline规则，可以用nonce或者哈希值匹配GTM生成的内嵌脚本。
• 除了script-src之外，如果GTM还有图片上报、iframe加载需求，还需要对应调整img-src、frame-src规则，添加对应的Google相关域名。

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