Google Analytics blocked:csp

[madman3]

I'm trying to integrate google analytics 4 and can't get the content service policy to work with gtm. I tried the steps outlined in #227. But, I'm not sure how @dunithd got it working without changes to csp.

Here's how my csp looks like in ./layouts/index.headers

Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self'; connect-src 'self'; font-src 'self'; img-src 'self' data:; script-src 'self' 'unsafe-inline' www.googletagmanager.com www.google-analytics.com; style-src 'self'

I used a chrome extension to disable the csp temporarily and that triggered traffic on GA. This helped make sure the issue was with csp and not the gtm script itself.

Please note that using 'unsafe-inline' is not recommended. I merely wanted to get csp working first before worrying further about security. Ideally, I'd like to implement what google suggests with a nonce or hash - https://developers.google.com/tag-manager/web/csp

If you've implemented ga4, could you please help me with what I'm getting wrong? Ideally, it would be great if you have feedback on getting the nonce/hash version working.

[h-enk]

Try using Laboratory — see also https://getdoks.org/docs/reference-guides/security/#content-security-policy

[h-enk]

Generate hash: https://sri-gen.henkverlinde.com/

[madman3]

Unfortunately, the Laboratory wasn't helpful. Neither is the current documentation regarding CSP and SRI :(

Especially, if someone is a beginner or not technically savvy, it's hard to figure things out. Adding analytics must be a high priority for anyone building with the theme. I didn't have these issues with other hugo themes I've previously used. I reckon including a couple of lines under these sections could be super helpful!