How to insert a Google Analytics code snippet into my code so that it does not violate the Content S-CodePudding

I added the following CSP: (following the instructions from this page: https://www.bounteous.com/insights/2017/07/20/using-google-analytics-and-google-tag-manager-content-security-policy/)

script-src '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 ### (I have another CSP within the helmet npm package)

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(
  ........
));

But it's still giving me CSP errors. I can't figure out what CSP to add or what I got wrong that it's not working. Does anyone see that I've implemented something wrong?

Thank you

CodePudding user response：

Unfortunately you have been followed the wrong instructions. Also, you have not shown what exactly is being blocked in your case - you just need to add the blocked sources to the corresponding directives.

Anyway, if you do not use nonces, the CSP for Google Analytics is:

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;

You do not need 'unsafe-inline' in the script-src since you insert GA script as external googleAnalytics.js file that falls under 'self'. You can check exactly your Google Analytics ID in the test linked above.

There can only be one problem - Google Analytics is tightly integrated with the Google Ads Conversion/Remarketing Tags, which use a geographic domains like https://www.google.(com|fr|co.uk|...)/ads/ for loading Ads tracker.
Therefore, the geofence of the www.google domain depends on the IP of the visitor, but it is unrealistic to list all Google geodomains (sorry, link is in French, but domain names are readable).
Therefore, blocking of such geo-domains will occasionally be observed. The good news is that GA's work is not affected by this.