CSP 阻止 GTM答案

【问题标题】：CSP blocking the GTMCSP 阻止 GTM
【发布时间】：2021-08-31 20:45:35
【问题描述】：

我对 CSP 有疑问。他阻止了我的 GTM 脚本。

我正在使用 gatsby 框架，这是 gatsby-config.js 的一部分，我们在哪里有 CSP 实现

--------gatsby-config.js 代码---------------

                resolve: `gatsby-plugin-csp`,
                options: {
                    disableOnDev: true,
                    reportOnly: false,
                    mergeScriptHashes: false,
                    mergeStyleHashes: false,
                    mergeDefaultDirectives: true,
                    directives: {
                        'script-src': `'self' 'unsafe-inline' ${host}`,
                        'style-src': `'self' data: 'unsafe-inline' ${host}`,
                        'font-src': `'self' data: ${host} fonts.gstatic.com`
                    }
                }
            },

            {
                resolve: 'gatsby-plugin-htaccess',
                options: {
                    RewriteBase: true,
                    https: true,
                    www: true,
                    SymLinksIfOwnerMatch: true,
                    host: `${host}`,
                    custom: `
    <IfModule mod_headers.c>
    Header always set X-Frame-Options "SAMEORIGIN"
    Header set X-XSS-Protection "1; mode=block"
    Header set X-Content-Type-Options "nosniff"
    Header set Referrer-Policy "same-origin"
    Header set Feature-Policy "geolocation 'self'; vibrate 'none'"
    Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" early
    Header unset Strict-Transport-Security env=!HTTPS
    Header set Content-Security-Policy "default-src 'self' ${host}; base-uri 'self' ${host}; connect-src 'self' ${host}; style-src 'self' data: 'unsafe-inline' ${host}; script-src 'self' 'unsafe-inline' ${host}; img-src 'self' https: data: ${host}; font-src 'self' https: data: ${host} fonts.gstatic.com; form-action 'self' https: ${host};"

    ## Cache
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
    Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>

    <FilesMatch "\.(jpg|jpeg|png|gif|ico)$">
    Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>

    <FilesMatch "\.(css|json|js)$">
    Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>
    </IfModule>

    `,
                },
            },

我需要帮助，伙计们。谢！！！

【问题讨论】：

标签： javascript gatsby google-tag-manager content-security-policy gatsby-plugin

【解决方案1】：

您是否尝试将 Google 添加到 script-src directive？

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

【讨论】：

【解决方案2】：

您同时发布 2 个 CSP，一个通过 gatsby-plugin-csp，第二个通过 gatsby-plugin-htaccess。但是这两个 CSP 是不同的。
在正常情况下，第二个 CP 会覆盖第一个，因为 Apache Web 服务器会覆盖同名的头文件，并且它会在 'gatsby-plugin-csp' 工作后执行 .htaccess。
但在某些情况下，可以同时发布 2 个 CSP，在这种情况下，更严格的 CSP 规则将起作用。

无论如何，发布 2 个 CSP 是不好的，因此您应该删除 gatsby-plugin-csp，或者从 gatsby-plugin-htaccess 插件中删除 Header set Content-Security-Policy ...。

消息：Refused to load the script https://googletagmanager.com because it violates the following CSP dorectives script-src 'self' 'unsafe-unline' www.vidav.com.br 表示您必须将 https://googletagmanager.com host-source 添加到 script-src 指令中，以允许从中加载脚本。

但问题不会就此结束，因为 GTM 需要允许更多来源。目前，GTM 的最小 CSP 是（如果您不使用 nonce-value 令牌）：

font-src data: fonts.gstatic.com;
frame-src www.googletagmanager.com;
img-src www.googletagmanager.com ssl.gstatic.com www.gstatic.com stats.g.doubleclick.net;
script-src 'unsafe-inline' tagmanager.google.com googletagmanager.com www.googletagmanager.com stats.g.doubleclick.net;
style-src 'unsafe-inline' tagmanager.google.com fonts.googleapis.com;

但如果您使用使用自定义 JavaScript 变量的«自定义 HTML 标记»，则必须将 'unsafe-eval' 添加到 script-src 指令中。

您还可以通过 GTM 注入任何第三方脚本，例如 jQuery。在这种情况下，您必须将此脚本的 CDN 添加到 script-src 指令中（并且可能将一些源添加到 style-src/img-src 中）。更多详情请参见CSP for GTM 的测试，您可以在其中准确测试您的 GTM ID。

【讨论】：