Netlify CSP Integration

Add CSP headers to your Netlify site using _headers file or netlify.toml.

Prerequisites

• Netlify site deployed
• Access to project configuration files

Option 1: _headers File (Recommended)

Create _headers in your publish directory (usually public/ or build output):

/*
  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

Option 2: netlify.toml

Add to netlify.toml in your project root:

[[headers]]
  for = "/*"
  [headers.values]
    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"

Per-Path Policies

Using _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

Using netlify.toml

[[headers]]
  for = "/admin/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; script-src 'self'"

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy-Report-Only = "default-src 'self'; script-src 'self' 'unsafe-inline'; report-uri https://ingest.headerhawk.com/csp/YOUR_SITE_ID"

Edge Functions (Dynamic)

For dynamic policies, use Netlify Edge Functions.

Create netlify/edge-functions/csp.ts:

import type { Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  const response = await context.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;
};

export const config = { path: "/*" };

Multiple Security Headers

Combine CSP with other security headers:

/*
  Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; report-uri https://ingest.headerhawk.com/csp/YOUR_SITE_ID
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  Referrer-Policy: strict-origin-when-cross-origin

Troubleshooting

Headers Not Appearing

1. Check _headers file is in the publish directory
2. Verify file name is exactly _headers (no extension)
3. Redeploy after adding the file
4. Check Netlify deploy logs for header processing

Syntax Issues

• No quotes needed around header values in _headers
• Ensure proper indentation (2 spaces for header values)
• Check for invisible characters if copy-pasting

Conflicting Headers

If using both _headers and netlify.toml, netlify.toml takes precedence.

Verification

After deployment:

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

Or check in Netlify dashboard under Site settings > Headers.

Next Steps

• CSP Directive Reference
• Troubleshooting Guide