如何插入Google Analytics代码不违反内容安全策略(CSP)

1. 缺失Google Tag Manager域名的脚本加载权限 #

你在googleAnalytics.js中动态加载的gtag/js文件来自https://www.googletagmanager.com，但现有script-src规则只允许了https://www.google-analytics.com，没有放开GTM的域名，需要在script-src中新增https://www.googletagmanager.com。

2. 动态注入的内联脚本未被允许 #

你通过script2.text注入的GA初始化代码属于内联脚本，CSP默认会拦截此类脚本，有两种解决方案：

• 简易方案：在script-src中添加'unsafe-inline'规则，适配性高但安全性稍低
• 安全方案：给内联脚本生成唯一nonce值，或者计算脚本的SHA256哈希值，将对应的'nonce-xxx'或'sha256-xxx'添加到script-src规则中

3. 重复配置CSP导致规则冲突 #

你同时在自定义中间件和helmet中配置CSP，浏览器会同时应用两个CSP头的规则，只有同时满足两套规则的请求才会被放行，如果helmet中没有配置对应GA/GTM的规则，即使自定义中间件加了规则也会被拦截，建议统一配置：

• 删掉自定义res.setHeader的CSP配置，所有规则都在helmet的CSP配置项中统一声明
• 或者关闭helmet默认的CSP功能：app.use(helmet({ contentSecurityPolicy: false }))，保留自定义的CSP配置

4. 完整参考规则（简易方案版） #

script-src 'self' 'unsafe-inline' https://www.google-analytics.com https://www.googletagmanager.com;
img-src 'self' https://www.google-analytics.com www.google-analytics.com https://stats.g.doubleclick.net https://www.googletagmanager.com;
connect-src 'self' https://www.google-analytics.com www.google-analytics.com https://stats.g.doubleclick.net;

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