Appending Content-Security-Policy-Report-Only Header to All Responses

I'm looking for some troubleshooting help/guidance regarding attempts to add a Content Security Policy (CSP) header to all responses.

To level-set:
- Transform Rules are not an option because we use Pages
- I'm not able to use

_headers

_headers

because our CSP exceeds the 2,000 character limit imposed by Cloudflare

My latest attempt at appending the CSP header is through deploying a worker that looks like this:

import { minifiedContentSecurityPolicy } from "./content-security-policy";

export default {
  async fetch(request: Request) {
    const response = await fetch(request);

    // Clone the response so that it's no longer immutable
    const newResponse = new Response(response.body, response);

    if (!newResponse.headers.has("Content-Security-Policy-Report-Only")) {
      newResponse.headers.append(
        "Content-Security-Policy-Report-Only",
        minifiedContentSecurityPolicy,
      );
    }

    return newResponse;
  },
};

import { minifiedContentSecurityPolicy } from "./content-security-policy";

export default {
  async fetch(request: Request) {
    const response = await fetch(request);

    // Clone the response so that it's no longer immutable
    const newResponse = new Response(response.body, response);

    if (!newResponse.headers.has("Content-Security-Policy-Report-Only")) {
      newResponse.headers.append(
        "Content-Security-Policy-Report-Only",
        minifiedContentSecurityPolicy,
      );
    }

    return newResponse;
  },
};

I added a

Routes

Routes

trigger that targets the route

https://domain.com/*

https://domain.com/*

and zone

domain.com

domain.com

, but the script has registered 0 events. And in the "Edit Code" console, the "Send" button is disabled.

With that as background:
- Am I on the right track with respect to using Workers to add the CSP?
- Why is my worker not registering events?

Happy to provide additional context, as requested.

Cloudflare Developers•2y ago

arclight

Appending Content-Security-Policy-Report-Only Header to All Responses

_headers

_headers

because our CSP exceeds the 2,000 character limit imposed by Cloudflare

My latest attempt at appending the CSP header is through deploying a worker that looks like this:

import { minifiedContentSecurityPolicy } from "./content-security-policy";

export default {
  async fetch(request: Request) {
    const response = await fetch(request);

    // Clone the response so that it's no longer immutable
    const newResponse = new Response(response.body, response);

    if (!newResponse.headers.has("Content-Security-Policy-Report-Only")) {
      newResponse.headers.append(
        "Content-Security-Policy-Report-Only",
        minifiedContentSecurityPolicy,
      );
    }

    return newResponse;
  },
};

import { minifiedContentSecurityPolicy } from "./content-security-policy";

export default {
  async fetch(request: Request) {
    const response = await fetch(request);

    // Clone the response so that it's no longer immutable
    const newResponse = new Response(response.body, response);

    if (!newResponse.headers.has("Content-Security-Policy-Report-Only")) {
      newResponse.headers.append(
        "Content-Security-Policy-Report-Only",
        minifiedContentSecurityPolicy,
      );
    }

    return newResponse;
  },
};

I added a

Routes

Routes

trigger that targets the route

https://domain.com/*

https://domain.com/*

and zone

domain.com

domain.com

Appending Content-Security-Policy-Report-Only Header to All Responses

Similar Threads

Appending Content-Security-Policy-Report-Only Header to All Responses

Similar Threads

Similar Threads

Similar Threads