Configure Security Headers Netlify

On WebPageTest, this site was scoring very poorly on the Security Score. So I decided to fix that. Since this site is deployed on Netlify, based on their documentation, all I needed to do was add the required headers to my netlify.toml file (at the end).

1
2
3
4
5
6
7

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self';font-src 'self' fonts.gstatic.com;style-src 'self' fonts.googleapis.com"
    X-Content-Type-Options = "nosniff"
    X-Frame-Options = "SAMEORIGIN"
    X-XSS-Protection = "1; mode=block"

Your value for the Content-Security-Policy header may vary based on the resources you use. MDN has some great examples on its CSP page.

And voila! The rating shot to an A+!!!