Adding HTTP security headers to Worker

Hello All,

I’ve been searching high and low to try and figure out away to add HTTP security headers to my static site hosted on Cloudflare workers.

Specifically the following headers
Content-Security-Policy
X-Frame-Options
Referrer-Policy
Feature-Policy

Any help would be great

Many thanks
Josh

1 Like

Scott Helme’s done this:

https://scotthelme.co.uk/security-headers-cloudflare-worker/

3 Likes

Hey sdayman,

I’m a bit confused where that’s mean to go, Since I tried the online script editor and it had no effect.
I know we was protecting a site that wan’t on cloudflare workers with that though so a slightly different situation.

Sorry, I missed that part about it being a workers site. Good question. There are no Headers lines in your Worker code?

Hey Sdayman,

Nope, none that i’ve added, it’s just the standard site template with my site in it.

Many thanks
Josh

I’m trying to do the same thing, as I’ve published a site using Wrangler CLI and want to add the header content-type: text/html; charset=utf8

There’s an example Worker that includes it, but when I add it to the .toml file it won’t register it, even though the syntax seems okay for the .toml.

You can see from the example where it says ‘content-type…’ just add more lines there with your headers. It does work.

It’s just that it’s adding a favicon and I don’t want it to that’s why I need a seperate solution.

1 Like

Hey David,

Looking at the sample you sent, What’s the point in having the HTML in the script and and not an index file on the worker?

async function handleRequest(request) {
const init = {
headers: {
‘X-XSS-Protection’: ‘1; mode=block’,
‘X-Frame-Options’: ‘SAMEORIGIN’,
‘Referrer-Policy’: ‘same-origin’,
},
}
return new Response(URL, init)
}
addEventListener(‘fetch’, event => {
return event.respondwith(handleRequest(event.request))
})
const URL = ‘(SITE URL GOES HERE)’

I think that looks right?

Many thanks
Josh

UPDATE

definitely doesn’t like something

All you changed was the headers: section?

Smart quotes sometimes mess me up if i did a cut and paste. So then I go back and manually re-type all the single quotes.

I changed the “someHTML” part since there’s no html in my script for it. I’ve tried one for one, as well.

Hi Josh,

I’ve got it sorted now. Sorry, the last example wasn’t very clear, but my index file is on the minified line. So my HTML is included in the worker.

It’s just for a simple page I’m making for a project.

This definitely works.

You can place your minified HTML/Index file between the back ticks and add your headers same as on line 4.

If you want to link to a file. There are some examples in the template gallery that you should be able to mix and match with this.

Hope this at least answers your original question - how to add headers.

2 Likes

Josh, you are probably best off trying this script:

The one I used was:

Good luck!

2 Likes

Hey David,

Thanks for that, I’ll give it a go tomorrow and let you know :slight_smile:.
I would say, that’s a lot of effort for HTTP headers for cloudflare standards.

Many thanks
Josh

1 Like

Hi Josh,

I suppose it gives you more granular control. You can set workers up for individual tasks and the headers themselves are a lot smaller, which all contributes to the page speed.

Also it’s like anything, even if you’re a pro coder - I’m not by the way - you still need to learn new tools.

Cheers!

David

Hey David,

So are you suggesting having a single worker for pagespeed and another for loading the site? I agree with you about learning new tools, hence why I dropped my nginx and vps for workers.

Many thanks
Josh

You can’t assign two workers to the same route. I wish it could be modular, but that would slow down requests. You’d have to bundle it altogether in one worker.

1 Like