添加GA4分析遇CSP错误求助：脚本加载与连接被拒绝

你的网站当前的Content Security Policy（CSP）未允许GA4运行所需的外部脚本加载与网络请求，导致浏览器拦截了相关操作，具体修正步骤如下：

调整CSP指令 #

需要在CSP中新增两个关键域名的权限：

• 针对脚本加载错误：在script-src-elem（或兼容旧环境的script-src）指令中添加https://www.googletagmanager.com，允许加载Google Tag Manager的脚本文件。
• 针对连接请求错误：在connect-src指令中添加https://www.google-analytics.com，允许向Google Analytics发送数据收集请求。

配置示例 #

HTTP头方式 #

修改后的CSP HTTP头配置示例：

Content-Security-Policy: default-src 'self' 'unsafe-eval' 'unsafe-hashes' 'unsafe-inline' data: blob:; script-src-elem 'self' 'unsafe-inline' https://www.googletagmanager.com; connect-src 'self' https://www.google-analytics.com;

HTML Meta标签方式 #

如果是通过页面meta标签设置CSP，修改后的代码示例：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' 'unsafe-hashes' 'unsafe-inline' data: blob:; script-src-elem 'self' 'unsafe-inline' https://www.googletagmanager.com; connect-src 'self' https://www.google-analytics.com;">

注意事项 #

• 保留原CSP中已有的必要规则，仅添加上述GA4相关的域名即可，避免破坏现有网站功能。
• 第二个错误标注了[Report Only]，说明当前CSP处于报告模式，不会实际阻止请求，但正式环境中建议完成修正，确保GA4数据收集正常。

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