New Chrome breaks Netlify web sites deployed with an active CSP policy


The new Google Chome update breaks various deployments served with CSP configured. Seems this is very oriented to Gatsby / React websites that are using web workers.for various tasks.

Console error messages since the last update.

Why this could be a Netlify issue related?

Netlify should provide a barebone CSP policy as an example to be used and enhanced by anyone deploying websites here. Also, the Netlify analytics feature might not work properly to some extent.

Also, be advised Chrome displayed a working now for the Netlify cookies set without the SameSite flag, but in the very near future, they will block them, possibly breaking some other things too.

Example deployment:

My current CSP policy:

font-src 'self' data:; manifest-src 'self'; img-src 'self' 'unsafe-inline' data:; script-src 'unsafe-eval' 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-ancestors 'none'; base-uri 'self'; prefetch-src 'self'; require-trusted-types-for 'script'; object-src 'none'; report-uri https://[site]; worker-src 'self'

The policy can be checked here for inconsistencies:

Additional references

Down to the bottom, please, do you have any idea how to fix the new errors from the console?


Hey @Obitron,
Thanks for your patience on this. Where would you like to see that kind of barebones CSP policy? In a blog post, in a post here in Community, in one of our repos? That will help me direct the request to the right place :slight_smile:

As for additional errors in the console, I don’t think I’m seeing those when I visit your site in Chrome (Version 83.0.4103.97 (Official Build) (64-bit)):

Do you mean the 404 errors there?

Hi @jen

Thank you for your answer. I did some changes meanwhile and that’s why you don’t see those errors anymore.

It would be really great if you can post a blog post regards the barebone CSP policy. In fact, I would say this is completely up to the “business” decision, in the end, is all about the community to have something official, and take that foundation, everyone can adapt it per his needs.

PS: On the other hand, the site I have you is a dev one. Would you consider, at some point, to refactor the requirement of providing the Netlify instance name to something else, in a much private way? To be fair, I am not very comfortable giving to the large internet my prod instance name, tho I can change it after but it still a risk imho. :slight_smile:

Thank you!

Hi, @Obitron, thank you for suggesting we write a guide on this. Someone here might do so but I cannot promise that.

(I could also be wrong and there is someone at Netlify working on a blog post about this right now but, if so, I’ve not heard about it.)

A CSP policy is custom site code which is typically outside the scope of our support. We don’t enforce a CSP policy. Our service does allow defining one using headers rules.

I do agree there is value to defining a “best practice”, minimalist CSP policy. However, this topic is more general that our service. Our support team does try to limit our answers to things which are specific to Netlify. CSP policies can apply to any site, regardless of where they are hosted. To summarize, our support team likely won’t have the time to answer this question.

Regarding best practices for a minimalist policy, I invite you to write up your experience with what you find works best for you. Feel free to post this either as a follow-up here or as a new topic. This might start a discussion about what works well for other people and your experience (and CSP policy) could then help other people with similar requirements.

If there are questions about this which are Netlify specific (for example, questions about how the headers rule work) or if you disagree that this question is not Netlify specific, please reply here any time and we’ll do our best to answer.

@luke Hi, Following your suggestion I am posting a pretty much unsafe version of a CSP policy example.

Content-Security-Policy = "default-src 'self'; object-src 'none'; font-src 'self' data:; manifest-src 'self'; img-src 'self' 'unsafe-inline' data:; script-src 'unsafe-eval' 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; prefetch-src 'self'; require-trusted-types-for 'default'; worker-src 'self'; report-uri https://[your-domain];"

Any community ideas from CSP gurus how to make it better would be appreciated.