Security focused headers for netlify sites - best practices

If you’ll enter into the Mozilla Observatory any Netlify website to scan, you’ll see that you’ll only get D+.

The only recommendations I got were to include some headers which can be manually set: Are you looking for anything specific that can help?

Just for reference, this is what I got:

Hi, @avi12. What @hrishikesh said is correct. The rating is due to missing headers. You can create those headers using header rules:

You can create those if you want them but doing that is the site owner’s responsibility. You must create rules for those headers if you want them.

If you are looking for example header rules to put in your netlify.toml file, here you go:

The only rule you will probably need to change is Content-Security-Policy, because that is very site-specific. These header rules will give you an A+ from Mozilla Observatory.


Thanks a lot!
I wonder why doesn’t Netlify include such headers by default to make websites/Web apps secure out of the box

I think when we’re talking about static websites hosting, a minimal security with SSL is more than enough because to ‘hack’ such a website, one would have to change files on the server and that has nothing to do with these headers. So, addition of these headers would just make sense to people to get 100% results in such benchmarks like the one that was linked above. That’s just what I feel and is not backed by any strong research and proofs, so I might as well be highly wrong.

@avi12 My guess is that the reasoning is two-fold:

First, static sites are by their very nature more secure than dynamic sites. The security of a static site is one of the reasons to consider JAMStack sites and Netlify hosting in the first place.

Second, implementing any such policy, especially a one-size-fits-all policy, would cause problems with many, many more sites that does a technical insecurity from not having such a policy. For example, a blanket policy might prevent users from creating working sites that use CDNJS or other CDN sources for common libraries (think Bootstrap), without them having to explicitly over-write or nullify the defaults. The way Netlify is set up now, if your files are where they are supposed to be, your site loads. I can’t even imagine the chaos that might ensue from having any type of restrictive security header built in. With a million sites (or is it users?) currently hosted on Netlify, even causing a problem with one percent of them would mean thousands of calls to tech support, many of them from free-tier users.

That’s a very good point.
Though, I wish Netlify would either enforce secured headers in future projects or at least recommend users to do this.

Yeah that seema fair. I guess there can be a toggle or something in the UI that can add these headers in one click. However, this might not get priority easily.

@avi12 Yeah, I would think that a small section on the headers page could cover most use cases.

this is a great discussion, everyone! thank you. i’m going to get some :eyes: on the suggestion to add more information to the headers page.