I’m having an issue about CSP rules on my netlify app.
I’m trying to use the CDN from tailwind on my website, and on development it works fine, but when I deploy to netlify, it says the cdn has been blocked by CSP policy.
I already have the CDN URL on the _headers file, but it didin’t make any difference at all.
this is how i did the setup my _headers file:
/*
Strict-Transport-Security: max-age=63072000; includeSubdomains; preload
Content-Security-Policy: default-src https: 'self' *.netlify.app; connect-src 'self' 'unsafe-inline' https://accounts.google.com/gsi/* https://google.com/pagead/* https://google.com/ccm/* https:// bat.bing.com/* https://google.com/* https://app-cdn.clickup.com/* https://forms.clickup.com/* *.clarity.ms *.googleadservices.com *.bing.com connect.facebook.net *.facebook.net snap.licdn.com *.ads.linkedin.com *.adsymptotic.com https://cdn.tailwindcss.com/cdn.linkedin.oribi.io * .facebook.com analytics.google.com *.google-analytics.com *.analytics.google.com *.googletagmanager.com *.g.doubleclick.net *.google.com *.google.com.br gap: ws :* *.fontawesome.com *.w3.org cdnjs.cloudflare.com *.cloudfront.net *.amazonaws.com *.ampproject.org bat.bing.com; font-src 'self' fonts.gstatic.com cdnjs.cloudflare.com *.cloudflare.com; frame-src https://accounts.google.com/gsi/ *.google.com *.facebook.com *.bing.com *.youtube.com *.instagram.com; img-src 'self' data: blob: *.facebook.com *.clarity.ms *.linkedin.com *.bing.com snap.licdn.com *. ads.linkedin.com *.adsymptotic.com *.amazonaws.com *.w3.org *.cloudfront.net i.ytimg.com *.google-analytics.com *.analytics.google. with *.googletagmanager.com *.g.doubleclick.net *.google.com *.google.com.br; script-src https://accounts.google.com/gsi/client https://bat.bing.com/ https://google.com/pagead https://google.com/ccm https: 'self' ' unsafe-inline' 'unsafe-eval' *.google.com google.com *.cloudfront.net snap.licdn.com analytics.google.com *.bing.com 'unsafe-inline ' https://www.googletagmanager.com; style-src https://accounts.google.com/gsi/style https://cdn.tailwindcss.com/ https: 'self' 'unsafe-inline' frame-ancestors 'self';
Permissions-Policy: accelerometer=(), autoplay=(), camera=(), encrypted-media=(), fullscreen=(self), geolocation=*, gyroscope=(), magnetometer=(), microphone=() , midi=(), payment=(), picture-in-picture=(), sync-xhr=(), usb=()
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Set-Cookie: HttpOnly; Secure; SameSite=Strict;
And the error is:
Refused to connect to 'https://cdn.tailwindcss.com/' because it violates the following Content Security Policy directive: "connect-src 'self' 'unsafe-inline' ...
I resolve the issue...
its there no problem with the _headers file and the CSP config. There was a issue with my service-worker, he was caching my csp , consequently, he was not updating when i edit the file.
I fix removing the caching from the service worker.