How to Add Security Headers Using Cloudflare

I have often relied on Cloudflare Workers to enhance the security of my websites by adding crucial HTTP security headers. However, I must admit that the process can be a bit cumbersome, especially for beginners.

But recently, I stumbled upon a simple Cloudflare setting that allows you to add HTTP response headers with ease without tinkering with Cloudflare Worker.

Adding security headers using Cloudflare is particularly beneficial for those utilizing managed web services like Ghost(Pro), Squarespace, Shopify, and others, where direct server access is restricted, but you have control over the domain.

In this blog post, I will guide you through the steps of adding security headers using Cloudflare, making the process much simpler and hassle-free, without even touching a single line of code on your web server.

Let’s dive in!

Setup HTTP Security Header Using Cloudflare

1. Make sure you have added your domain to Cloudflare and have activated the orange cloud.

2. From your domain dashboard, go to Rules and navigate to Transform Rules.
3. On the Transform Rules page, select Modify Response Header.
4. Click the Create rule button to create a new rule.

5. Give the rule a name; here, I will name mine “Security Header”.
6. Since I need to apply this rule to All incoming requests to my website, I select the first option for the If… section.

7. In the Then… section, I will use Set static to set up security headers for my site. Here, I will add 5 recommended security headers:

Header name	Value
x-content-type-options	nosniff
x-frame-options	SAMEORIGIN
x-xss-protection	1; mode=block
strict-transport-security	max-age=31536000; includeSubDomains; preload
referrer-policy	no-referrer-when-downgrade

To further strengthen the security of my website, I will also set the Content Security Policy (CSP) header. While there are multiple values available for CSP, I will opt for a less restrictive one.

Header name	Value
content-security-policy	upgrade-insecure-requests; block-all-mixed-content

Since my blog is a simple website that works well without the need to access powerful browser features, I will deny access to those features by adding a permission policy header.

Header name	Value
permissions-policy	accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=()

Here’s how the header setup looks when it’s all added up:

8. Click Deploy to add the security header to your site.

Go to securityheaders.com to check the result. Here is mine:

It’s important to note that not every web service is compatible with Cloudflare’s orange cloud. Before implementing it, please contact your service provider to ensure compatibility.

While some headers are straightforward to set up with recommended values, configuring the Content Security Policy (CSP) requires a deeper understanding of the resources loaded on your website. If you are not familiar with it, I recommend consulting with a developer or, if you are developing your site yourself, taking the time to configure it correctly to maximize its effectiveness and avoid any potential issues.

I am someone who appreciates applying web security best practices, but please note that I am not a security expert. If you would like to learn more about security headers, I recommend reading the Security Headers Quick Reference and the HTTP Headers Reference from MDN Web Docs. These resources provide valuable information to further enhance your understanding and implementation of security headers.

Closing

By leveraging Cloudflare, you can add an extra layer of security to your website, protecting it from various threats. Not only does Cloudflare enhance security, but it also optimizes web performance and provides insightful web analytics. Cloudflare is an invaluable asset for website owners, offering a comprehensive suite of features, all available for free.