[Bug] This project does not play well with CSP

[stoic-hugo]

Hi! Very nice project you have here!

I added the CF Pages URL with the tracker JS to the script in content security policy, but then other elements also get blocked, like some inline images and styles. I would have to disable my CSP entirely to get this project to work. (Also had to set unsafe-inline due to the inline items)

[benvinegar]

Hey @ka259 – thanks for highlighting this.

I haven't verified yet, but I'll take your word for it because I'd hadn't accounted for CSP at any point during this project (super ambarrassing, especially given I once gave a talk on CSP).

Will definitely be prioritizing.

[stoic-hugo]

Thanks for the reply and self-awareness. I will be waiting for that update with grace.

Here's some error messages to go by from my test using Hugo's server config (A really handy feature). The errors are mostly from the tracker.js file

Content-Security-Policy: The page’s settings blocked a script (script-src-elem) at https://counterscale-{site}.pages.dev/tracker.js from being executed because it violates the following directive: “script-src http://localhost:1313”

This one I am aware of, so nothing is needed from your side. I added https://counterscale-{site}.pages.dev/ to my headers file. (But perhaps this can be documented in the readme file.)

Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at https://counterscale-{site}.pages.dev/collect?p=%2F&h=http%3A%2F%2Flocalhost&r=&sid={siteID} because it violates the following directive: “img-src http://localhost:1313”

This code img.src = url + stringifyObject(d); in the tracker.js file was singled out by the browser.

Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src http://localhost:1313”

img.setAttribute("style", "position:absolute"); and document.body.appendChild(img); in tracker.js singled out. I had to add unsafe-inline to this attribute.

I also added the counterscale URL to the connect-src coz I am not sure if it is needed, but I tested Goatcounter (another analytics project) and adding the /collect endpoint was required.

cc @benvinegar. Hope that helps