Using cloudflare analytics with CSP?

Hello there,

For Cloudflare Pages, I’d like to use Cloudflare Analytics. Now the problem is that I’m using CSP (content security policy), and I don’t have the ability to copy and paste the JS snippet into my project before constructing it, as Google and Microsoft do. This implies I can’t use hash to whitelist the script because I don’t know what it will be.

  • Is it feasible to block Cloudflare from auto-injecting scripts and have them instead supply snippets that I can utilize in my project?

  • Is there a way to use Cloudflare Pages Analytics while using CSP in a different way?

Thanks

Can you please provide the domain to your site where this issue is reproducable?
Thanks.

Hi @M4rt1n

It is not domain specific and occcure on any website i deploy with CSP the issue is i do not use script-src 'self' but instead i use hash for each script as ‘self’ isn’t the safest option.

SO the only way i can keep using the current CSP hash will be if i can manualy add the analytic script in my project

Thanks

Any URL where the error happens would have been good enought.

As long as you control all content on your own domain self is as secure as you are :slight_smile:
If someone gains access to your domain and can put content/scripts on it, this person can also modify the CSP header. It’s just a tiny little more effort. Thats all.

I in general would like to inspect your whole CSP + site to create my own opinion, with that info I may can help you getting a proper CSP for your setup.

You can do this already. The old versions of all scripts AFAIK are always reachable, even if some scripts would be updated.
So what you already could do is:

Implement the scripts you want yourself, without Cloudflares automatical implementation and add your hash how ever you like. It would be good if you could automatically fetch the newest version of the analytic script you are talking about so everytime you build your website again the newest version will be used. This also would give you a proper version control over which version of which script you are using.

When you go with Cloudflares automatical implementation the script gets updated when they update it, which anyway for you should not be considered safe as another party is able to invoke a script on you site and change it without your knowledge. So going this way would give you:

  1. control over which version of what you are using
  2. full CSP control
  3. the ability to cascade and compress the scripts as you want

Hope that helped.

Hi @M4rt1n

using self is not the same as in self everything is allowed from a url while using hash only allows the use of code without any modification. this will help one to protect in case some 3rd party script becomes vulnerable.

hash provides better control over script code then self. Now instead of using older scripts isnt there an option which let me deciede if i want to add the analytic script manually or automatically?

thanks

It actually does not give control, but forces you to have the exact same hash until you update. That would also mean if the hash changes and you have not updated your CSP yet this particular script will be blocked. And as the update process (and therefore the updating of the hash) is getting done by Cloudflare (if we talk about Cloudflare JS products) then this means your site will very likely be broken regularly, or at least some JS parts.

Why would you use older scripts? The way I described lets you choose every version, older ones and the very newest one.

An option to switch isn’t there, but you can just do it manually and implement the JS yourself. The only problem I could see coming this way is: Analytics may be not visible, due to the fact that you have to deactivate it in the dashboard. as you want to implement it manually.

1 Like

Hi @M4rt1n

you are right i only have the option to use or not use the analytics. If activate the analytics it will auto inject the script. and if i deactivate it just show no analytics in the account. :frowning:

That’s what I thought. I am not a big fan of these “options” since there are none and having control over your JS is enormously important for every website owner/admin. I wish there was an option which let you toggle an expert mode which will activate analytics, but you would have to implement it yourself with an exact version. In this mode it also should always be visible in the dashboard.

The approach Cloudflare went here requires a lot of trust in Cloudflare and that’s what no one should. Not gonna say they are not trustworthy, just sayin that zero-trust means zero-trust and there is a reason for people wanting control over their website. A pity they can’t get it with Cloudflare.

Any other analytic tool I know and is JS based provides you a JS-snippet, URL or the JS file itself and gives you the freedom you need. Here things are actually different. If you use it you use it how Cloudflare wants you to use it and if you don’t like it you don’t get anything :stuck_out_tongue:

Dunno if they will ever change this, but if this is a requirement for you you probably have to switch to another analytics provider.

1 Like

Hi @M4rt1n

I found the answer to why we are not using self for CSP script

  • ‘self’ might host CSP bypasses such as JSONP endpoints, legacy Angular or user uploaded files.

It is sad to knwo there is no option to have js snippet to have control over scripts auto injection.

In my experience Cloudflare is really quick to feedback and improvements. for example somedays ago when i find out that there was a 1000 charcters limit per line in headers after feedback they double that limit in few days. SO i suppose i will just find and tag that orange monkey of Cloudflare.

Also i am not sure why they have no server analytics since Cloudflare pages are on there server what is the purpose of js snippet in my experience the netlify have the best analytics.

thanks for your time


Hi @WalshyMVP can you please find a solution for Cloudflare pages analytics. Me coming from netlify and using the netlify analytics Cloudflare pages analytics seems like a downgrade. Is there a way you can pop this in your road map or somewhere where Cloudflare can consider this for improvement thanks.

Please note, this just applies if you do have a JSONP endpoints. If you don’t have any, don’t worry. If you have some, yes then self is not optimal. But better than a hash and more universal, also independent from the content would be a nonce. I use nonce btw.

You can have a read here: CSP: script-src - HTTP | MDN

Content-Security-Policy: script-src ‘nonce-2726c7f26c’

That is Walshy’s work there :slight_smile: don’t expect that everywhere. Also, changing a value from 1000 to 2000 isn’t the same as allowing own implementations of Cloudflare Analytics, which would require some work in the frond and backend of the dashboard. Let’s see what the future brings.

1 Like

i have static sites and using nonce in Cloudflare pages need additional work and worker script while hash is autogenerated by gobuffalo the site builder i am using. Also the nonce will not be available to use in Cloudflare analytics script :stuck_out_tongue:

that was just an example i have made some very complex requests like provide the solution to copy paste prebuilt site and reducing the environment setup times. So i am hopefull for this.

They do have that, but it’s a paid product. You need to be on the Pro plan to get more than the very basic data. Sadly Pro is per-domain and not per-account, and $20/month is a lot to get analytics on one site.

As for the JS snippet, when you first add a site in Web Analytics, you can then click Advanced Options, disable auto-setup, and get the snippet to add manually. But there is no way I can see to go in after-the-fact and change this setup, and maybe it doesn’t apply to Pages sites (they get their own little blurb that says “manage this site in Pages” or whatever).

2 Likes

Hi @i40west

I was told that the Cloudflare pages pricing is based per user and not for each site which means if i pay 20$/month and i have 3 websites i will only pay 20$ in total.

The analytic option you mention is it part of Cloudflare or the Cloudflare pages? correct me if i am wrong.

thanks

Yes, but that would not be sufficient in his case as he wants to work with csp hash, since the content of https://static.cloudflareinsights.com/beacon.min.js can change anytime. For nonce it would be good enough.

I would appreciate a clear versioning, that would give one full controll and if you stick with an absolut version the hash would always match.

@kepona2732
what you can do is:

  1. use the advanced options @i40west spoke about
  2. do not use the external URL https://static.cloudflareinsights.com/beacon.min.js, but download it a build time and store it at your own storage and serve it from your own URL like https://your.domain.tld/js/beacon.min.js or inline.
  3. hash this version and paste the hash into the CSP.

Like this you can make sure you are using a version that does not change until you rebuild. So even if Cloudflare would update https://static.cloudflareinsights.com/beacon.min.js this would not affect you and therefore would not break analytics for you (because of CSP hash mismatch).

I guess that’s the best you can do without Cloudflare versioning JS based products and you insisting on using CSP hash.

2 Likes

I don’t think the request from @kepona2732 is unreasonable. It would be useful if all Cloudflare script injection automatically handled updating the CSP policy if present.

Zaraz already updates the CSP policy if needed, so enabling Cloudflare Web Analytics with Zaraz should give the OP the desired outcome.

3 Likes

Cloudflare pricing is a bit confusing because of the per-account vs per-zone thing. Pro plans are per-zone, BUT the listed features of Pro Pages (concurrent builds and builds per month) apply across your whole account for the highest plan you have on any zone in your account.

Edge analytics isn’t a Pages feature, it’s a Cloudflare paid plan feature. This, to me, makes Pro not a very compelling product, since the headline features are per-zone and it doesn’t even include the base-level Workers or Images even though those have per-account usage charges.

1 Like

hello @M4rt1n

this is way to expensive for static site just for analytics

I am testing the second option, but the thing is, Cloudflare keeps injecting their code. I have no control and it shows as an error in Chrome and testing on the web.dev it lowers the total score, which is not the best when presenting the results to the client for something so stupid as to be an error.

Hi @michael

Thanks for sharing this. I see it as a very helpful tool. However, the Cloudflare Page Analytics has only 2 options that I know of.

  • option one: on

  • option 2: disable

If I turn it off, then nothing will show in the analytic even if I have the JS code added on the site, and if I turn it on, it will auto inject the code into the website. So all the other options, including Zarazar, are useless.

Since Cloudflare has many new features, I do suggest them to keep the products in sync. There are things you can do like Microsoft did or Apple did. One is a mess while the others keep features connected to one another for really easy use. Anyone who can pass on this feedback and issue will be greatly appreciated.

The current analytic is a mess. I don’t like the auto injection of the snippet. Add an extra step after activation, ask the user to add the snippet automatically. Use via zarazar or here is the script. Add it as you like. I believe the fix is really simple. Cloudflare just need a little time and effort to make it better. @WalshyMVP

Hi @i40west

Cloudflare pages are going to be a big thing in the future, and it would have been better if Cloudflare could cater to this need and provide apropriate pricing. I’ve never really used Cloudflare, but I’m using it a lot with Cloudflare pages and also moving the DNS, but static sites aren’t worth paying $20 or $200 per site because they’re static.I hope they will improve this sometime in the future, but if it was improved faster, we would be able to better use it now instead of looking for alternatives like netlify.

I thank everyone for taking the time to contribute.

@kepona2732

Then maybe the best option is ATM: not going with Pages integration of “Analytics” but with Cloudflares default one.
Please try as following:

  1. setup Pages (probably already done)
  2. don’t use Pages Analytics, or even disable it and rebuild so it is removed from the page.
  3. setup analytics by your own for your domain (eg. domain.tld not the *.pages.dev)
  4. disable auto-setup and enjoy the advanced options.
  5. inject the script however you want.

like this the script is just injected at your real domain, not the *.pages.dev one, but you can use it as you want. This does not solve the “versions” problem, but is a workaround for your request.
Short: try to set it up through Cloudflare Analytics, not through Pages.

As you see here, it should work:


These sites are not connected to each other, but both are the same and basically build with a SSG. The first one gets served by my server, the *.pages.dev one from Pages. And both have a different Analytics setup.

I will remove it soon, as I don’t need to track anyone.

Please report back, once you have tried it.

2 Likes

Hi @michael

I am sorry but you are wrong zaraz do not use nonce i do not know from where you get this idea have you actually tried zaraz with CSP?

I added google analytics 4 tag to test but it didnt run and show this error:
EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive:

Zaraz is expecting for site to allow 'unsafe-eval' no nonce is being added. can you please clarify how you was able to come to the conclution that Cloudflare use nonce with zaraz?

thanks