Enable HTTP Strict Transport Security (HSTS) on WordPress | Cloudflare

I’ve been on a mission to improve security as well as speed on my site. As part of my changes, I updated my URL from http://www.beyondmyfrontdoor.com/ to https://www.beyondmydoor.com/ both to get on HTTPS while also finally completing my site rebranding (to shorten and align with my social accounts).

As part of the changes I completed redirects for all non-TLS to TLS pages on my site. And as part of that most of us are familiar that we need to use HTTPS be it for good security or Google ranking. But what else do I need to do, what is HSTS ,and why is it Important?

What is HTTP Strict Transport Security (HSTS)

HSTS sends a header to any agents (e.g., browsers such as Chrome, Firefox) to strictly use HTTPS for all communication.

HSTS communicates via the HTTP response header Strict-Transport-Security, that HTTPS is strictly enforced and then a time-out period. Following this the site will only accept HTTPS connections from any browser/user-agent.

Why was HSTS created and what Protection does it provide?

There was an issue discovered over a decade ago related to how servers responded to HTTPS requests. A server that is potentially compromised or a man-in-middle could convert a HTTPS connection to an insecure HTTP connection.

While the user could potentially see that the connection is insecure, it would be difficult for the user to “know” if the connection is supposed to be secure.

HSTS headers would tell the browser that the site only accepts HTTPS connect which would alert the browser that the connection should be secure.

HTTP Strict Transport Security helps to protect against these type of man-in-the-middle attacks by limiting protocol downgrade and cookie hijacking attacks.

However, it is important to know that the browser will need to connect to the site at least once before the protection takes effect, since it is the first communication that sends the HTTPS header. But we can do some pre-loading later to help.

Which Browsers Support HSTS

Most modern Browsers like Firefox or Chrome support HSTS. Actually, support has been around for a long time even if not every site has adopted HSTS.

• Chromium and Google Chrome version 4.0.211.0
• Firefox version 4
• Opera version 12
• Safari OS X Mavericks
• Microsoft Edge and Internet Explorer 11 (Windows 10)
• Internet Explorer 11 on Windows 8.1 and Windows 7 (July 2015)

Pre-Requisites for HSTS

Before you enable HSTS and the various, it is important that you set up a few things.

First: Your entire site needs to be Setup for HTTPS. This means you need to get your SSL/TLS certificate issued and installed on your site. How you do this is a bit different for each webhost. So check with yours before you proceed. You should also notice the padlock when you visit your site.

How to Implement HSTS in WordPress

If you need to setup HSTS on your site, I’m going to dive into how to do it. There are also other ways such as using .htaccess or within Cloudflare (or some other service). Editing WordPress is not my favorite way to do it, since theme files can change. Be sure to validate if you need to update a child theme for your particular setup.

Cloudflare is the easiest as you don’t need to edit files. But you do need to turn-off Cloudflare before you remove HTTPS from your site (although why would you do that?)

Read the Cloudflare HSTS section or .htaccess HSTS section to learn how to do it other ways.

Modifying in WordPress is pretty straight forward. You need to edit your functions.php file for your theme. This you can access via a file editor, ssh, or any other way on your webserver. Be sure you have the right PHP version as well.

Let’s break down below what is going on.

First you are making a function as seen in the “enable_hsts_wordpress()” this is defining what you will send as part of the header. The green item is necessary. The other items / values are necessary for our instance if you want preloading.

1. Strict-Transport-Security – this is the HSTS Header
2. max-age=31536000 – This sets the age of the header to use 1 year (needed for preloading)
3. includeSubDomains – this says to also enforce on subdomains as well (needed for preloading)
4. preload – required to allow preloading.

//* Enable HTTP Strict Transfer Protocol for WordPress
function enable_hsts_wordpress() {
	header('Strict-Transport-Security:max-age=31536000; includeSubDomains; preload')
}
add_action('send_headers', 'enable_hsts_wordpress' );

From here, skip ahead to the Testing and Submitting for Preload.

How to Implement HSTS in Cloudflare

If you have Cloudflare set up on your site (and you should, or at least an alternative), the service makes it fairly easy to setup HSTS for any of your site (including WordPress). You only need to use one of the methods for setup.

First you need to navigate to your security. After selecting your website. Select SSL/TLS and Edge Certificates from the Menu on the left.

Clicking on that you’ll see two different things, displayed. Be sure Always Use HTTPS is selected for your site.

Next Select for it to do Automatic HTTPS Rewrites. You need to have everything setup in pre-requisites before doing this. So be sure everything is set for HTTPS.

Then we’ll change HSTS Settings in the below box. You’ll first get a warning box that you must disable HSTS and wait time out period if you disable HTTPS on your site. You really shouldn’t disable HTTPS on your site. However, if you are ok with that, click I Understand and Next

For the next screen. Select the following.

Be sure to set the Max Age of the Header to 12 months. This is what is needed for preloading.

How to Implement HSTS in .htaccess

You can also set it for your site, or your subfolder on your server (if you have multiple sites, and not all are https you might want to use it for your subfolder) with your .htaccess file. I still prefer doing it via Cloudflare personally and you can also do it via WordPress if you prefer.

This is pretty straight forward as Apache offers simple directives for this.

Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

Again. there are a of of ways to screw things up editing your .htaccess file. These values are all necessary if you want preloading.

1. Strict-Transport-Security – this is the HSTS Header
2. max-age=31536000 – This sets the age of the header to use 1 year (needed for preloading)
3. includeSubDomains – this says to also enforce on subdomains as well (needed for preloading)
4. preload – required to allow preloading.

Submit for Preloading and Testing

After you have configured HSTS. There is site HSTS Preload which can be used to support preloading. This protects against the issue of attacks before the first time a user-agent visits your site.

In order to be accepted to the HSTS preload list through this form, your site must satisfy the following set of requirements. If you have been following the guide you’ll be ok.

1. Serve a valid SSL/TLS certificate.
2. Redirect from HTTP to HTTPS on the same host, if you are listening on port 80.
3. Serve all subdomains over HTTPS.
   • In particular, you must support HTTPS for the www subdomain if a DNS record for that subdomain exists.
4. Serve an HSTS header on the base domain for HTTPS requests:
   • The max-age must be at least 31536000 seconds (1 year).
   • The includeSubDomains directive must be specified.
   • The preload directive must be specified.
   • If you are serving an additional redirect from your HTTPS site, that redirect must still have the HSTS header (rather than the page it redirects to).

Use the box at the top of the site to submit/check your site.

This will give you either success or an error. You can submit your page (if you have not done so) after you pass all the above tests. For me I passed, but still waiting for submission to preload list.

And that’s it!

Let me know how you get along if you try to do it as well. Feel free to ask additional questions if necessary.