How To Add HSTS To Your Website

The other day, I was passing one of my webpages through webpagetest.org, and saw that they’d added a new category to their analysis categories called “security”. And to my surprise, the webpage showed up with an “F” grade in red, like this:

Naturally, I was pretty concerned at first. No one likes to think of their site as insecure! So clicking through to the details page, I saw that webpagetest.org was flagging my site for not implementing the HSTS protocol:

Once I figured out how to enable HSTS, the security warning vanished and all was well. To be clear, this wasn’t something I had to do. My website doesn’t require people to enter any details like usernames or passwords, so there was strictly no need. But HSTS protects against a certain type of man-in-the-middle attack which can prove very dangerous even for non-sensitive sites. So here’s what it is, and how to easily enable HSTS on your site.

What is HSTS?

HSTS stands for “HTTPS Strict Transport Security”, and is meant to ensure that once a client connects to your site via HTTPS, it always connects using HTTPS, and doesn’t later accept connections from a server without SSL.

There’s a kind of SSL attack called a “downgrade attack”. In this, an attacker convinces a server to serve a lower security protocol. In many systems, the provision for a lower security protocol is in place for compatibility reasons, since stricter security typically means tighter standards that can break existing interactions. Attackers who are aware of this can exploit the vulnerability to downgrade a site’s security and steal sensitive information.

The HSTS protocol is designed to prevent this. In fact, it takes a bit of a nuclear approach to the whole thing, and instructs browsers to refuse connections from a site that had previously declared itself to be HTTPS compatible.

So here’s how to enable it.

Warning: Do this AFTER You’ve Set up SSL

The biggest caveat while enabling HSTS, is that you first need to ensure that HTTPS is already working on your site, and that you have a system for automatic renewal of certificates. If you omit this step, your site might be inaccessible to some browsers for months, until you get SSL up and running. So be warned!

Enabling HSTS Through Cloudflare

The easiest way to enable HSTS is to simply have Cloudflare do it for you. As mentioned above, makes sure that your EDGE SSL certificates are properly configured, and that you have HTTPS enabled and working before you do this.

Go to the “SSL/TLS” section of Cloudflare and click on the “Edge Certificates” tab as shown here:

Scroll down until you find the HSTS option:

Click the “Change HSTS Settings” button and then accept the notice that pops up. As mentioned earlier, this is a dangerous thing to do if you don’t have SSL enabled. In the following set of options, make sure you turn HSTS on, and specify the timeout – I’ve chosen one month here as seen below:

There are a few other options, but I just let them be for now. My priority was to enable HSTS and nothing more. Once that’s done, check and see that your site is working as it should. In fact, keep checking over the course of the next few days to make sure that everyone’s working as it should!

Now when you re-run your test in webpagetest.org, you should see that that particular security warning no longer exists. There are probably others about content security policies, but those are topics for another day!