How to harden your website security with HTTP security headers

In one of our last articles, we saw how to secure WordPress websites with HTTP security headers. In this one, we will take a look at how we can do the same for websites that use Apache or Cloudflare servers. We will be going to the implementation directly as we have already taken a good look at these headers before. If you want to read more about what these headers mean and why they need to be present, please check out our previous article here.

Implementing HTTP security headers in Apache

All the headers in Apache can be implemented by editing the httpd.conf file.

For the X-Frame-Options header, you need to add the following line.

Header always append X-Frame-Options DENY

For the X-Content-Type-Options header, you need to add the following line.

Header set X-Content-Type-Options nosniff

For the X-XSS-Protection header, you need to add the following line.

Header always set X-XSS-Protection "1;  mode=block"

For the Content-Security-Policy header, you need to add the following line.

Header set Content-Security-Policy “default-src ‘self’;”

For the HTTP Strict Transport Security header, you need to add the following line.

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

For the Referrer Policy header, you need to add the following line.

Header set Referrer-Policy "no-referrer"

Implementing HTTP security headers in Cloudflare

If you are using Cloudflare, the implementation approach is slightly different although the end result is the same. Cloudflare provides serverless functions known as Cloudflare Workers. A Worker is executed each time before a response is loaded onto the browser. This is where we need to add, edit or delete headers from. The Worker functions are written in JavaScript and an example of that is given below.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
  const response = await fetch(request)
  //Cloning response to make it mutable
  const newResponse = new Response(response.body, response)
  //Adding custom headers
  newResponse.headers.append("Strict-Transport-Security", "max-age=2592000; includeSubDomains; preload")
  newResponse.headers.append("X-Xss-Protection", "1; mode=block")
  newResponse.headers.append("X-Frame-Options", "DENY")
  newResponse.headers.append("X-Content-Type-Options", "nosniff")
  newResponse.headers.append("Content-Security-Policy", "upgrade-insecure-requests")
  newResponse.headers.append("Referrer-Policy", "no-referrer")

  return newResponse
}

Once this has been added, you can scan your website to see if all of the security headers are present. You can read more about adding custom headers using Cloudflare Workers from their official documentation.

---