What is the name of the domain?
rvenvy.com
What is the error message?
Refused to apply inline style because it violates the following Content Security Policy directive: “default-src ‘none’”.
What is the issue you’re encountering
Assets aren’t loading after enabling Cloudflare proxying
What steps have you taken to resolve the issue?
I recently enabled proxying on my site using Cloudflare using Full (Strict). My site is a Next.js site hosted with Vercel.
After enabling, I’m getting Content-Security-Policy errors for assets (like SVGs, PNGs). They are locally-hosted (not loading from a 3rd party domain). The files are creating 400 errors and they output malformed URL when trying to load them.
You can see the errors in action here: Fifth wheel trailers with bath and a half - RV Envy
Note: I’m not an expert when it comes to setting headers, so apologies if this is a n00b question! But I’ve tried a number of different things like:
- Setting a header in
next.config.mjs - Setting a header in
vercel.json - Using a Modify Response Header rule in Cloudflare
- Adding a nonce to specific SVG files in conjunction with setting header in
next.config.mjs
It’s unclear to me whether I should be setting this on the Cloudflare side or the Vercel side – and how the two work together. Here’s an example of how I’ve tried to set the CSP in two different ways (at different times):
next.config.mjs
{
source: "/(.*\\.png)",
headers: [
{
key: "Content-Security-Policy",
value: "default-src 'self'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline' 'unsafe-hashes'; script-src 'self' 'unsafe-inline' 'unsafe-eval';"
}
]
}
vercel.json
{
"source": "/(.*\\.png)",
"headers": [
{
"key": "Content-Security-Policy",
"value": "default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline';"
}
]
}
Also, I’m assuming the paths are supposed to be what the client sees (eg: don’t use the paths on disk like /public/images).
I know handling SVGs may be a different ballgame, so figured I’d try to work through PNGs by themselves first. I also tried turning on Development Mode in Cloudflare but it didn’t make a difference.
What is the current SSL/TLS setting?
Full (strict)
What are the steps to reproduce the issue?
Visit this page and see the CSP errors when clicking through to a blocked resource (SVGs and PNGs).
