Cloudflare CSP Integration

Add CSP headers using Cloudflare Workers or Cloudflare Pages.

Prerequisites

• Cloudflare account
• Domain configured with Cloudflare

Cloudflare Pages

Using _headers File

Create _headers in your public or output directory:

/*
  Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; report-uri https://ingest.headerhawk.com/csp/YOUR_SITE_ID

Using Functions (Dynamic)

Create functions/_middleware.ts:

export const onRequest: PagesFunction = async ({ next }) => {
  const response = await next();

  response.headers.set(
    "Content-Security-Policy-Report-Only",
    "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; report-uri https://ingest.headerhawk.com/csp/YOUR_SITE_ID"
  );

  return response;
};

Cloudflare Workers

Basic Worker

export default {
  async fetch(request: Request): Promise<Response> {
    const response = await fetch(request);
    const newResponse = new Response(response.body, response);

    newResponse.headers.set(
      "Content-Security-Policy-Report-Only",
      "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; report-uri https://ingest.headerhawk.com/csp/YOUR_SITE_ID"
    );

    return newResponse;
  },
};

With Nonces

export default {
  async fetch(request: Request): Promise<Response> {
    const nonce = crypto.randomUUID().replace(/-/g, "");
    const response = await fetch(request);

    // Clone response to modify
    const newResponse = new Response(response.body, response);

    newResponse.headers.set(
      "Content-Security-Policy-Report-Only",
      `default-src 'self'; script-src 'self' 'nonce-${nonce}'; report-uri https://ingest.headerhawk.com/csp/YOUR_SITE_ID`
    );

    return newResponse;
  },
};

Transform Rules (No Code)

For simple headers without code, use Transform Rules:

1. Go to Rules > Transform Rules
2. Create a new Modify Response Header rule
3. Set:
   • When: All incoming requests (or a specific path)
   • Header name: Content-Security-Policy-Report-Only
   • Value: Your CSP policy string

Per-Path Policies

In _headers:

/admin/*
  Content-Security-Policy: default-src 'self'; script-src 'self'

/*
  Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline'; report-uri https://ingest.headerhawk.com/csp/YOUR_SITE_ID

Troubleshooting

Headers Not Appearing

1. Redeploy after adding _headers file
2. Check file is in the correct directory (usually public/ or build output)
3. Verify syntax (no trailing commas or extra quotes)

Worker Not Running

1. Check worker route matches your domain
2. Verify worker is deployed and active
3. Check worker logs in Cloudflare dashboard

Verification

curl -I https://your-site.com | grep -i content-security-policy

Next Steps

• CSP Directive Reference
• Troubleshooting Guide