How to Implement Secure Headers using Cloudflare Workers?

A step-by-step information to implementing safe HTTP headers on web sites powered by Cloudflare utilizing Cloudflare Employees.

There are various methods to implement HTTP response headers to safe websites in opposition to widespread vulnerabilities corresponding to XSS, Clickjacking, MIMI sniffing, cross-site injection, and lots of extra. Usually accepted apply and really useful by OWASP.

Earlier I wrote about implementing headers in an online server like Apache, Nginx and IIS. Nonetheless, for those who use Cloudflare to guard and improve your websites, you should utilize Cloudflare Employees to govern the HTTP response headers.

Cloudflare Employees is a serverless platform the place you possibly can run JavaScript, C, C++, and Rust code. It’s deployed in each Cloudflare knowledge heart, there are greater than 200 worldwide.

The implementation could be very easy and versatile. It offers you the pliability to use the headers to the entire web site together with the subdomain or particular URI with an identical sample utilizing Regex.

For this demonstration, I am utilizing Scott Helme’s code.

Let’s get began… 👨‍💻

Click on Create a employee

Copy the employee.js code from GitHub and paste it into the script editor

const securityHeaders = {
        "Content material-Safety-Coverage": "upgrade-insecure-requests",
        "Strict-Transport-Safety": "max-age=1000",
        "X-Xss-Safety": "1; mode=block",
        "X-Body-Choices": "DENY",
        "X-Content material-Sort-Choices": "nosniff",
        "Referrer-Coverage": "strict-origin-when-cross-origin"
    },
    sanitiseHeaders = {
        Server: ""
    },
    removeHeaders = [
        "Public-Key-Pins",
        "X-Powered-By",
        "X-AspNet-Version"
    ];

async operate addHeaders(req) {
    const response = await fetch(req),
        newHeaders = new Headers(response.headers),
        setHeaders = Object.assign({}, securityHeaders, sanitiseHeaders);

    if (newHeaders.has("Content material-Sort") && !newHeaders.get("Content material-Sort").contains("textual content/html")) {
        return new Response(response.physique, {
            standing: response.standing,
            statusText: response.statusText,
            headers: newHeaders
        });
    }

    Object.keys(setHeaders).forEach(identify => newHeaders.set(identify, setHeaders[name]));

    removeHeaders.forEach(identify => newHeaders.delete(identify));

    return new Response(response.physique, {
        standing: response.standing,
        statusText: response.statusText,
        headers: newHeaders
    });
}

addEventListener("fetch", occasion => occasion.respondWith(addHeaders(occasion.request)));

Do not save but; chances are you’ll wish to customise the next headers to satisfy the requirement.

Content material Safety Coverage – if it’s essential apply your request coverage, you are able to do so right here.

For instance, if it’s essential supply content material by means of iFrame on a number of URLs, you possibly can reap the benefits of body ancestors just like the one beneath.

"Content material-Safety-Coverage" : "frame-ancestors 'self' gf.dev geekflare.com",

The above permits the content material to be loaded from gf.dev, geekflare.comand personal web site.

X-Body choices – you possibly can swap to SAMEORIGIN for those who plan to show your web site content material on a web page inside the similar web site utilizing iframe.

"X-Body-Choices": "SAMEORIGIN",

Server – you possibly can clear the server header right here. Put no matter you need.

"Server" : "Geekflare Server",

Take away headers – do it’s essential take away some headers to cover the variations to cut back the vulnerability to data leakage?

You are able to do it right here.

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

Add new headers – if it’s essential cross some customized headers to your functions, you possibly can add them beneath securityHeaders part as beneath.

let securityHeaders = {
	"Content material-Safety-Coverage" : "frame-ancestors 'self' gf.dev geekflare.com",
	"Strict-Transport-Safety" : "max-age=1000",
	"X-Xss-Safety" : "1; mode=block",
	"X-Body-Choices" : "SAMEORIGIN",
	"X-Content material-Sort-Choices" : "nosniff",
	"Referrer-Coverage" : "strict-origin-when-cross-origin",
        "Customized-Header"  : "Success",
}

When you may have completed customizing all the required headers, give the worker a reputation and click on Save and Deploy.

Superior! the employee is prepared after which we have to add it to the location the place you wish to apply the headers. I’ll apply this to my lab web site.

Go to Cloudflare house/dashboard and choose the location.
Navigate to the Workers tab >> Add route.
Enter the URL in Route; you possibly can apply the Regex right here.
Choose the newly created staff and save

That is all; in a second you’ll discover that every one headers are carried out on the location.

Here is what it appears like from Chrome Dev Instruments. You can even take a look at the header by means of an HTTP header instrument.

I do not know why the Server header isn’t mirrored. I believe Cloudflare overrides this.

You see, the general deployment takes ~quarter-hour and no downtime or restart is required like Apache or Nginx. If you happen to plan to use this to a manufacturing web site, I like to recommend testing on a decrease atmosphere first, or utilizing a route you possibly can log into the take a look at pages to confirm the outcomes. Whenever you’re glad, push to wherever you need.

That is wonderful!

Due to Scott for the code.

Leave a Comment Cancel reply