Issues trying to implement simple analytics on screwfast

[brandatastudio]

Hello! i'm having some trouble with the content security policy when implementing simple analytics into my screwfast website.

My current astrowebsite is hosted and deployed in vercel, you can see it at this domain: mathforbusiness.com

I get currently the following error:

I tried modifying the vercel.json file by adding the following lines, as suggested by simple analytics documentation https://docs.simpleanalytics.com/csp

Content-Security-Policy: script-src 'self' 'unsafe-inline' https://scripts.simpleanalyticscdn.com; connect-src 'self' https://queue.simpleanalyticscdn.com; img-src 'self' https://queue.simpleanalyticscdn.com https://simpleanalyticsbadges.com;

But i still get the same error, possibly because lines already in the json file are the ones causing the issue.

It's my first time deploying a website on astro , and have very litle experience developing front end in general, i'm concerned of modifying further the content security policy and making my website vulnerable. Is there an elegant way to solve this issue? Is there any tested way anyone has implemented simple analytics on a screwfast template website?

Here is my vercel.json file wit the content security policy, in case anyone has any ideas.
vercel.json

[mearashadowfax]

Hi @brandatastudio! Your current Content-Security-Policy header in vercel.json has multiple overlapping script-src, connect-src, and img-src directives, which can create conflicts and lead to the error you're seeing. I've updated your vercel.json file to fix this issue. Please replace the contents of your file with the following and let me know if you encounter any further issues with CSP:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; base-uri 'self'; form-action 'self'; frame-src 'self'; frame-ancestors 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://scripts.simpleanalyticscdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://images.unsplash.com https://queue.simpleanalyticscdn.com https://simpleanalyticsbadges.com; connect-src 'self' https://queue.simpleanalyticscdn.com; object-src 'none'; upgrade-insecure-requests; block-all-mixed-content;"
        },
        {
          "key": "Permissions-Policy",
          "value": "interest-cohort=()"
        },
        {
          "key": "Referrer-Policy",
          "value": "no-referrer-when-downgrade"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "SAMEORIGIN"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        },
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=31536000; includeSubDomains; preload"
        }
      ]
    }
  ]
}

P.S: You may also remove https://images.unsplash.com from the CSP if you're not using any images from Unsplash. I'm using them for avatars and reviews in the template, so that's why I've included it.

[brandatastudio]

this did the trick, thank you so much for your help.