Secure Web Headers by Cloudflare Workers

The HTTP response headers that allow us to configure and deploy security features on our site. There are headers like Content Security Policy, Strict Transport Security, Referrer Policy and several more. Each of them serve a specific function and allow you as a website operator to ensure a safer browsing experience for your visitors.

It’s been pain to set security headers when you use certain hosted solutions or you don’t have the access/capability to change the web server configurations directly. All of that is about to change and you can now quickly and easily deploy any security header of your choosing and the best part, it might not even cost you anything.

Cloudflare Workers allow you to deploy and run code at Cloudflare’s edge to apply custom processing to requests and responses to your site. We use Workers to help sites deploy security headers. There’s no need to touch server side configuration, only a few settings on Cloudflare Workers.

Just create a new Workers script in Cloudflare Workers and copy paste below codes.

let securityHeaders = {
	"Content-Security-Policy" : "upgrade-insecure-requests",
	"Strict-Transport-Security" : "max-age=15552000", #this can also be configured from CloudFlare edge certificate HSTS settings. 
	"X-Xss-Protection" : "1; mode=block",
	"X-Frame-Options" : "SAMEORIGIN",
	"X-Content-Type-Options" : "nosniff",
	"Referrer-Policy" : "strict-origin-when-cross-origin",
}

let sanitiseHeaders = {
	"Server" : "My New Server Header!!!",
}

let removeHeaders = [
	"Public-Key-Pins",
	"X-Powered-By",
	"X-AspNet-Version",
]

addEventListener('fetch', event => {
	event.respondWith(addHeaders(event.request))
})

async function addHeaders(req) {
	let response = await fetch(req)
	let newHdrs = new Headers(response.headers)

	if (newHdrs.has("Content-Type") && !newHdrs.get("Content-Type").includes("text/html")) {
        return new Response(response.body , {
            status: response.status,
            statusText: response.statusText,
            headers: newHdrs
        })
	}

	Object.keys(securityHeaders).map(function(name, index) {
		newHdrs.set(name, securityHeaders[name]);
	})

	Object.keys(sanitiseHeaders).map(function(name, index) {
		newHdrs.set(name, sanitiseHeaders[name]);
	})

	removeHeaders.forEach(function(name){
		newHdrs.delete(name)
	})

	return new Response(response.body , {
		status: response.status,
		statusText: response.statusText,
		headers: newHdrs
	})
}

Then create a route under Workers tab to apply the codes. For example, your website is https://www.example.com/, you can create a route rule as *example.com/ to use created Workers.

You are all set now. You can scan/test your site’s security header from https://securityheaders.io/ to see whether the configuration is applied properly. Just pay attention, some security headers settings may break functions / display of your site. Please do search and understand what these security headers mean to your site before applying this changes.

Free Cloudflare plan has 100,000 free requests per day, should be enough for a personal website.