How to Improve the Security of Your Netlify Site

Written by spekulatius | Published 2019/12/10
Tech Story Tags: netlify | how-to-make-a-static-website | website-security | website-development | software-development | http-headers | cybersecurity | web-monetization

TLDR Netlify allows you to set additional headers in a file called "_headers" This file should live in your "Publish directory" This is often called "public/", "dist/" or "site" If you are unsure you can check it in the Netlifying admin panel of your site under "Build & Deploy". The headers file allows you. to define headers for different URLs (for example. contact) or URL segments (for. example /*" for all URLs) of your page.via the TL;DR App

Recently I've rebuilt my blog, peterthaleikis.com, using Eleventy and Netlify. Being an engineer, I like to enhance and improve my websites. Sometimes I submit my websites to services that check them to identify new areas of improvement. These services are for example broken link crawlers to find links which aren't working anymore or securityheaders.com, a service to check the HTTP headers for potential security enhancements/issues.

The initial security assessment of my Netlify site

As with many times before, I entered one of my websites for the check of the security-relevant HTTP headers on securityheaders.com. The result came back quickly and showed there is a potential to improve the headers. Only Grade D according to Scott Helme's site:

Easy to improve with Netlify's _headers file

The outstanding Netlify developer experience makes it very easy to tweak the headers. Netlify allows you to set additional headers in a file called "_headers". This file should live in your "Publish directory". This is often called "public/", "dist/" or "_site". If you are unsure you can check it in the Netlify admin panel of your site under "Build & Deploy".
The headers file allows you to define headers for different URLs (for example "/contact") or URL segments (for example "/*" for all URLs) of your page. In my case it's very simple as I want to apply the headers to all pages (URLs):
/*
 X-Frame-Options: DENY
 X-XSS-Protection: 1; mode=block
 Referrer-Policy: no-referrer
 X-Content-Type-Options: nosniff
`_headers`-file example used on peterthaleikis.com
With these headers I get a significantly improved result and a "Grade A":
Securityheaders result of my website after tweaking _headers
Adding the header file to your git, pushing it up and deploying shouldn't take more than five minutes and improves the security of your website. I would think these are well invested minutes 🙏️

About the Author

Hey, I’m Peter Thaleikis - a nomad developer turned indie hacker. I’m running a small dev-shop called bring your own ideas. If I’m not deep diving into client code I’m building side-projects such as the SEO Tool Extension and Startup Name Check. I’m always happy to hear from you: Twitter or via my contact form.

Written by spekulatius | Building side-projects and learning new stuff every day.
Published by HackerNoon on 2019/12/10