Help combining two workers scripts

Hello everyone

I’ve used CloudFlare workers to set some security headers that couldn’t be done at the origin, since… CloudFlare. This was my first usage of workers and I just followed a tutorial for the most part.

let securityHeaders = {
	"Content-Security-Policy" : "upgrade-insecure-requests",
	"Strict-Transport-Security" : "max-age=2592000",
	"X-Xss-Protection" : "1; mode=block",
	"Feature-Policy" : "geolocation 'self'",
	"X-Frame-Options" : "DENY",
	"X-Content-Type-Options" : "nosniff",
	"Referrer-Policy" : "strict-origin-when-cross-origin",
}

let sanitiseHeaders = {
	"Server" : "cloudflare",
}

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
	})
}

Today I was looking at some cPanel accounts and realized we have one that is just displaying two sentences. A waste of a cPanel account on a host that doesn’t allow overselling/overallocating. Turns out you can host static content with a worker:

const html = `<!DOCTYPE html>
<body>
  <p>This site is currently out of stock of all products. 
  We hope to serve you again in the future.</p>
</body>`

async function handleRequest(request) {
  return new Response(html, {
    headers: {
      "content-type": "text/html;charset=UTF-8",
    },
  })
}

addEventListener("fetch", event => {
  return event.respondWith(handleRequest(event.request))
})

But I could not combine the two. I tried a few things like trying to take the constant of html, and adding it to the existing response function of the security headers. It didn’t work.

If someone could help me combine these two, I will be able to serve a static 2 sentences while providing some security headers (which I plan to update).

To add security headers to the worker below you could add them manually to the response.


async function handleRequest(request) {
  return new Response(html, {
    headers: {
		"content-type": "text/html;charset=UTF-8",
		"Content-Security-Policy" : "upgrade-insecure-requests",
		"Strict-Transport-Security" : "max-age=2592000",
		"X-Xss-Protection" : "1; mode=block",
		"Feature-Policy" : "geolocation 'self'",
		"X-Frame-Options" : "DENY",
		"X-Content-Type-Options" : "nosniff",
		"Referrer-Policy" : "strict-origin-when-cross-origin",
},
  })
}
1 Like

That worked, thank you!

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.