How I Increased the Security of My Netlify Hosted Website With This One Small Trick! Hackers HATE It!

The title is okay because its ironic and self aware, like Deadpool

Security is kind of a big deal. Being instantly accessible from the internet is a double-edged sword, and Web applications are some of the most vulnerable programs because of this.

Sidebar: I have a tendency of instantly purchasing domain names when I think of a project after a late night, which is ultimately how this story comes about.

During a recent burst of motivation, I decided to create a small website with the goal of helping people get registered to vote (https://registertovote.how). I quickly wrote a prototype layout and basic functionality, but I needed a host and did not want to go through the work of setting up a DigitalOcean server (my usual hosting goto). So I turned to Netlify, my new fave for hosting anything frontend.

Everything went great! I setup my custom domains from Google Domains to point to Netlify’s DNS, added the github repo for my project to setup auto deployment, and we were off to the races! But wait, what is this?

The orange and red coloring make this page look very scary

I got a “D” rating for security?! Wow, way to take me back to my college days, https://securityheaders.com. Lets fix this, shall we?

First, lets dive into what exactly security headers are. OWASP defines them as:

“ The OWASP Secure Headers Project describes HTTP response headers that your application can use to increase the security of your application. Once set, these HTTP response headers can restrict modern browsers from running into easily preventable vulnerabilities. The OWASP Secure Headers Project intends to raise awareness and use of these headers.”

Awesome, so these are simple HTTP response headers that we can set which will increase our website’s security. That same https://securityheaders.com site that fired a jab at my ego also provides some recommended default values for a few of these common headers. Use these recommended values (they are usually the most secure) unless you have a specific use case preventing you from doing so. Those recommended defaults are as follows:

X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Referrer-Policy: no-referrer
X-Content-Type-Options: nosniff

So now we have some secure, sane default values for the headers, but how do we deploy them to Netlify? After a bit of searching I found out that Netlify allows you to add security headers by adding a _headers file to the root of your website’s deployed folder. If you are using a static site, this file should go right next to your index.html file. If you are using a framework like Vue.js, the file should go in the /public folder.

Paste the following code into the _headers file:

/*
 X-Frame-Options: DENY
 X-XSS-Protection: 1; mode=block
 Referrer-Policy: no-referrer
 X-Content-Type-Options: nosniff

The /* at the top tells Netlify to apply these headers to all possible pages/routes of your site. If you need different pages to have different security headers, you can define multiple paths in the file. You can find more information on Netlify’s headers page here.

Note: If for any reason you cannot place a _headers file in your root web directory, you can instead create a netlify.toml file in the root of your github repository. The contents of that file will need to be slightly different than above:

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "no-referrer"
    X-Content-Type-Options = "nosniff"

Now that we have the headers in place, lets go test our sites security again!

The green coloring makes the page much less threatening

Woot! An “A”, Now that’s more like it!

I hope you enjoyed this article, don’t forget to like, comment, and subscribe! I mean upvote. Wait, that’s the wrong one too. Clap! Yes, please clap if you enjoyed this article.