Security headers - what they are and how to use them 🔒
Tags: security, http, beginners, webdev
Published: 2023-06-06 14:26:25

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](https://securityheaders.com/) 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"](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_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:

**<u>X-Content-Type-Options</u>**
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. 

**<u>X-Frame-Options</u>**
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

**<u>Referrer-Policy</u>**
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). 

**<u>Strict-Transport-Security</u>**
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)

**<u>Content-Security-Policy</u>**
- 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](https://developer.mozilla.org/en-US/docs/Glossary/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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47d871st2jfqhshym7hn.png)

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