Setting Security Headers With Netlify

There are a basic set of standard security headers that every website should set to help make your website more secure. Here is how you set these headers in Netlify.

Common Security Headers

First, lets take a look at the common security headers that most websites should set.

1. X-Frame-Options - this sets whether you want your website to be in a frame or not. Most of the time you don’t, as it can open up a website to clickjacking.
2. X-XSS-Protection - in older browsers and mainly Safari, this stops pages loading when they detect reflected cross-site scripting attacks.
3. Referrer-Policy - this controls how much referrer information is included with requests.
4. X-Content-Type-Options - used to stop browser from sniffing and changing MIME content type
5. Permissions-Policy - this used to be called Feature Policy and is mainly only support by Chrome browsers. It’s used to control what browser APIs can be used.
6. Content-Security-Policy - helps protect your website from cross-site scripting attacks by providing a list of approved content.

Netlify Example Security Headers

There are two ways of setting headers using Netlify, adding to the Netlify configuration file or by adding a separate _headers file.

Netlify configuration file

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "no-referrer"
    X-Content-Type-Options = "nosniff"  
    Permissions-Policy = "accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=(), interest-cohort=()"

Netlify _headers file

/*
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  Referrer-Policy: no-referrer
  X-Content-Type-Options: nosniff
  Permissions-Policy: accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=(), interest-cohort=()

Setting these should give you a score of A on websites like securityheaders.com and keep any security testers complaining about your website headers.

Setting the content security policy is a bit more dependent on the individual website, for example if you use Google Analytics or other third party scripts, so I haven’t included it in this guide. When adding a content security policy you should do a thorough test of your website to check that all third party resources still work.