Cloudflare Worker Test

This page implements a Cloudflare Worker. A content security policy is added to the response header on the fly via Cloudflare's edge (i.e. JavaScript running on each of their 120 global edge nodes). The policy only specifies "default-src 'self'" so has caused a number of errors to appear in the console. The policy is only scoped to the route at GHOST_URL/cloudflare-worker-test/ so it does not apply to any other pages on the site.

Because troyhunt.com already has a CSP via meta tag, most content still loads fine, it's just the assets loaded before the meta tag that I didn't need to include in the CSP that are breaking. You wouldn't normally have both - if I roll over to the Cloudflare worker then the meta tag will go and I'll expand the CSP in the header to include the assets currently causing the errors.

The entire Cloudflare worker script is as follows:

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})
 
async function fetchAndApply(request) {
  const response = await fetch(request)
  const newHeaders = new Headers(response.headers)
  newHeaders.append('Content-Security-Policy', 'default-src \'self\'')
  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHeaders
  })
  return fetch(request)
}