如何将 Google Analytics 代码片段插入我的代码中，使其不违反内容安全策略？

Question

我添加了以下 CSP：（遵循此页面的说明：https://www.bounteous.com/insights/2017/07/20/using-google-analytics-and-google-tag-manager-content-security-policy/）

脚本源'self' https://www.google-analytics.com;

img-src https://www.google-analytics.com www.google-analytics.com https://stats.g.doubleclick.net;

connect-src https://www.google-analytics.com www.google-analytics.com https://stats.g.doubleclick.net

index.html:

<head>
   <script src="./googleAnalytics.js"></script>
</head>

googleAnalytics.js:

let ga_id = "xxxxxxxxxxxx"; // (id)
let ga_script = document.createElement("SCRIPT");

ga_script.type = "text/javascript";
ga_script.src = `https://www.googletagmanager.com/gtag/js?id=${ga_id}`;
let script2 = document.createElement("SCRIPT");

script2.type = "text/javascript";

script2.text = `
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '${ga_id}');`;

document.head.appendChild(ga_script);
document.head.appendChild(script2);

serverj.js ###（头盔 npm 包中还有另一个 CSP）

app.use(function (req, res, next) {
  res.setHeader(
    "Content-Security-Policy",
    "script-src 'self' https://www.google-analytics.com; img-src 'self' https://www.google-analytics.com www.google-analytics.com https://stats.g.doubleclick.net; connect-src 'self' https://www.google-analytics.com www.google-analytics.com https://stats.g.doubleclick.net;"
  );
  next();
});

app.use(helmet(
  ........
));

但它仍然给我 CSP 错误。我无法弄清楚要添加什么 CSP 或者我弄错了它不起作用。有没有人看到我执行的有问题？

谢谢

Answer 1

很遗憾，您遵循了错误的指示。此外，您还没有显示在您的案例中究竟被阻止了什么 - 您只需要将被阻止的来源添加到相应的指令中。

无论如何，如果你不使用 nonces，CSP for Google Analytics 是：

connect-src www.google-analytics.com https://ampcid.google.com https://stats.g.doubleclick.net;

img-src www.google-analytics.com https://www.google.com/ads/ga-audiences https://stats.g.doubleclick.net;

script-src 'self' google-analytics.com https://ssl.google-analytics.com www.google-analytics.com;

您不需要 script-src 中的 'unsafe-inline'，因为您将 GA 脚本作为外部 googleAnalytics.js 文件插入 'self'。您可以在上面的 link 测试中准确检查您的 Google Analytics ID。

只有一个问题 - Google Analytics 与 Google 广告 Conversion/Remarketing 标签紧密集成，后者使用像 https://www.google.(com|fr|co.uk|...)/ads/ 这样的地理域来加载广告跟踪器。
因此，www.google域的地理围栏取决于访问者的IP，但列出所有Google geodomains是不现实的（抱歉，link是法语，但域名是可读的） .
因此，偶尔会观察到对此类地理域的屏蔽。好消息是GA的工作没有受此影响

如何将 Google Analytics 代码片段插入我的代码中，使其不违反内容安全策略？

How to insert a Google Analytics code snippet into my code so that it does not violate the Content Security Policy?

javascript

node.js

google-analytics

content-security-policy

index.html:

googleAnalytics.js:

serverj.js ###（头盔 npm 包中还有另一个 CSP）