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
- Make sure you have added your domain to Cloudflare and have activated the orange cloud.
- From your domain dashboard, go to Rules and navigate to Transform Rules.
- On the Transform Rules page, select Modify Response Header.
- Click the Create rule button to create a new rule.
- Give the rule a name; here, I will name mine “Security Header”.
- Since I need to apply this rule to All incoming requests to my website, I select the first option for the If… section.
- 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:
- 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.
Thank you for the well explained article. I was able to implement the same and got the expected result. However, if I uncheck unfollow Redirect checkbox It gives me rating R (which is fare as i have setup for the http to https redirect) but all the headers apart from HSTS and CSP shows missing. Was not able to find enough on the same, if you could help with same, it will be a big help. Thank you.
Best,
Mohit
Thank you so much. It works man
“By leveraging Cloudflare, you can add an extra layer of security to your website, protecting it from various threats.”
To be clear, most of these will protect your visitors more than the site itself.
Thanks for the great guide.
Thanks Great Information. Kindly Provide More valuable Insight on Cloudflare features that enhance website security and performance.
Thanks
It works great for my blog!
Thank you so much, i really appreciate it.
worked great. thank u so much
Nice article! Thanks!
Thank you very helpful. I managed to replace all the rules added by a leading security headers plugin using this. They are below for others reference
Header set Access-Control-Allow-Methods “GET,POST”
Header set Access-Control-Allow-Headers “Content-Type, Authorization”
Header set Content-Security-Policy “upgrade-insecure-requests;”
Header set Cross-Origin-Embedder-Policy “unsafe-none; report-to=’default'”
Header set Cross-Origin-Embedder-Policy-Report-Only “unsafe-none; report-to=’default'”
Header set Cross-Origin-Opener-Policy “unsafe-none”
Header set Cross-Origin-Opener-Policy-Report-Only “unsafe-none; report-to=’default'”
Header set Cross-Origin-Resource-Policy “cross-origin”
Header set Permissions-Policy “accelerometer=(), autoplay=(), camera=(), cross-origin-isolated=(), display-capture=(self), encrypted-media=(), fullscreen=*, geolocation=(self), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), payment=*, picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), xr-spatial-tracking=(), gamepad=(), serial=()”
Header set Referrer-Policy “strict-origin-when-cross-origin”
Header set Strict-Transport-Security “max-age=63072000; includeSubDomains; preload”
Header set X-Content-Security-Policy “default-src ‘self’; img-src *; media-src * data:;”
Header set X-Content-Type-Options “nosniff”
Header set X-Frame-Options “SAMEORIGIN”
Header set X-Permitted-Cross-Domain-Policies “none”
I have added 3 rules in Cloudflare Transform Rules:
Strict-Transport-Security “max-age=63072000; includeSubDomains; preload”
X-Content-Type-Options “nosniff”
X-Frame-Options “SAMEORIGIN”
and after clearing cache when i hit the domain name from google chrome it shows me error in console
“X-Frame-Options may only be set via an HTTP header sent along with a document. It may not be set inside”
Why is it so?
ah… this working… thx you dude