How to Improve the Security of Your Netlify Site
Building side-projects and learning new stuff every day.
Recently I've rebuilt my blog, peterthaleikis.com
, using Eleventy
. 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-XSS-Protection: 1; mode=block
`_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
Subscribe to get your daily round-up of top tech stories!