Security headers - what they are and how to use them 🔒

I was recently tasked with improving the security rating on one of our websites. This involved a couple of things but the thing I want to focus on in this post is security headers. We scanned the site here and were initially given a rating of 'E'. Not good. So one of the recommendations was to add security headers which are headers contained in the HTTP response and can provide various different security benefits, such as only allowing iFrame's from specified sites to be embedded on your site or ensuring your browser is only accessed via HTTPS. By adding some of these headers, we were able to raise the security rating to an 'A'.

There are various ways you can add these headers depending on your server setup but the most straightforward is adding them in a ".htaccess" file:

# Security Headers
<IfModule mod_headers.c>
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains"
</IfModule>

In this example, we're adding the "Strict-Transport-Security" header which, as mentioned previously, ensures your site can only be accessed via HTTPS.

Here are some specific examples:

X-Content-Type-Options
Prevents the browser from doing what's known as MIME-type sniffing, which is when the browser tries to figure out the content type by looking at the content of a resource, rather than looking at the Content-Type header. nosniff is the only possible value that this header can be set to.

X-Frame-Options
Specifies whether or not your site can be embedded inside an iFrame on other sites. Examples of possible values:

• DENY -> Ensures the site can't be displayed in an iFrame
• SAMEORIGIN -> The site can be displayed in an iFrame if all ancestor frames are from the same origin of the site

Referrer-Policy
Specifies how much information should be contained in the Referrer header (e.g. do we want the entire path of the referrer to be shown?). Examples of possible values:

• origin -> Only the origin is shown in the Referrer header (e.g. if the referrer is https://example.com/test-page then only https://example.com is shown in the Referrer header)
• same-origin -> Only show the referrer for same-origin requests (when we're being referred from the same site).

Strict-Transport-Security
Ensures your website can only be served over HTTPS. Examples of possible values:

• max-age=<expire-time> -> How long in seconds that the browser remembers to serve the site over HTTPS
• includeSubDomains -> Whether this header should also apply to subdomains (e.g. https://subdomain.example.com)

Content-Security-Policy

• A list of rules (known as a policy) that apply to specified domains to protect against certain types of attacks (e.g. Cross-Site Scripting). For example, you can set script-src https://www.example.com which will ensure that only scripts from https://www.example.com can be run on your site. There's a lot you can do here which you can find out about here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

If you've done everything correctly then you should be able to see your header by viewing the network tab in your browser of choice:

Hopefully you found that useful and if so, feel free to drop a comment below and find me on Twitter - https://twitter.com/MylesB93