Gatsby框架中CSP配置阻止GTM脚本加载问题求助

DevOps 小满

2026-10-5

解决方案

问题根因

你同时在gatsby-plugin-csp插件和.htaccess文件中配置了两套CSP规则，浏览器会执行严格度更高的规则，且两处配置均未添加GTM相关的许可域名
当前script-src、img-src、connect-src规则中缺少GTM运行所需的第三方域名许可

操作步骤

统一CSP配置入口
选择任意一种配置方式即可，避免规则冲突：
- 若保留gatsby-plugin-csp，删除.htaccess中Header set Content-Security-Policy的整行配置
- 若保留.htaccess配置，直接移除gatsby-plugin-csp插件的引入
补充GTM相关许可规则
根据你选择的配置入口，修改对应CSP指令：

需补充的核心域名：https://www.googletagmanager.com（GTM脚本域名）、https://www.google-analytics.com（若配套使用GA数据上报）

示例修改（以保留.htaccess配置为例）：
将原.htaccess中的CSP配置行修改为：

Header set Content-Security-Policy "default-src 'self' ${host}; base-uri 'self' ${host}; connect-src 'self' ${host} https://www.googletagmanager.com https://www.google-analytics.com; style-src 'self' data: 'unsafe-inline' ${host}; script-src 'self' 'unsafe-inline' ${host} https://www.googletagmanager.com https://www.google-analytics.com; img-src 'self' https: data: ${host} https://www.googletagmanager.com https://www.google-analytics.com; font-src 'self' https: data: ${host} fonts.gstatic.com; form-action 'self' https: ${host};"

若选择保留gatsby-plugin-csp配置，修改插件的directives配置：

directives: {
  'script-src': `'self' 'unsafe-inline' ${host} https://www.googletagmanager.com https://www.google-analytics.com`,
  'style-src': `'self' data: 'unsafe-inline' ${host}`,
  'font-src': `'self' data: ${host} fonts.gstatic.com`,
  'img-src': `'self' https: data: ${host} https://www.googletagmanager.com https://www.google-analytics.com`,
  'connect-src': `'self' ${host} https://www.googletagmanager.com https://www.google-analytics.com`
}