When running one of my pages that contains images through Lighthouse, https://web.dev, I’m getting a warning with a high severity:
Ensure CSP is effective against XSS attacks
No CSP found in enforcement mode
Is there a way around this? My site is served via Netlify, but the Wordpress admin is hosted on Digital Ocean. Therefore, the images originate from the subdomain, portal.ariatap.com.
ariatap.com (Netlify)
portal.ariatap.com (Digital Ocean)
You’d have to add a CSP header by using custom headers Custom headers | Netlify Docs. There you can specify images allowed from that domain.
I added this to my netlify.toml file which seemed to make matters worse:
[[headers]]
for = "/*"
[headers.values]
Content-Security-Policy = "img-src 'self' portal.ariatap.com;"
Now I see this error in devtools:
Refused to load the image 'data:,' because it violates the following Content Security Policy directive: "img-src 'self' portal.ariatap.com".
So, I removed the headers rules for now.
Am I not apply the the Content-Security-Policy values correctly?
portal.ariatap.com is where the images originate from. I also tried *.ariatap.com
The error exists because you might be loading some images from data: scheme:
You’ve not specified that in CSP, thus it gets blocked. Read here: CSP: img-src - HTTP | MDN.
However, I ran a Lighthouse test on your home page:
I don’t see the error you mention. Where exactly are you getting it?
Only the single post pages have images. For example: https://www.ariatap.com/quia-minus-quo-molestiae-non-modi-iure/
I use Lighthouse via https://web.dev. The CSP issue is listed under Performance.
Currently I removed Netlify’s headers because they were only promoting errors instead of helping.
I’m not sure why Lighthouse on the web is flagging that and if it even needs to be fixed. The library is not agreeing with itself as it shows different results in Chrome and on the website.
I’d like to have more clarification on what that error really means before I can suggest anything more.
