Create _headers in your publish directory

Create a file named _headers (no extension) in your publish directory:

# Security headers for all pages
/*
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=(), interest-cohort=()
  Strict-Transport-Security: max-age=31536000; includeSubDomains
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https:; frame-ancestors 'none'; base-uri 'self'; form-action 'self';

Add route-specific headers

# Default headers for all pages
/*
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  Referrer-Policy: strict-origin-when-cross-origin
  Strict-Transport-Security: max-age=31536000; includeSubDomains

# API routes - no caching, strict headers
/api/*
  Cache-Control: no-store, max-age=0
  X-Content-Type-Options: nosniff
  Content-Type: application/json

# Allow embedding for widget
/widget
  X-Frame-Options: SAMEORIGIN
  Content-Security-Policy: frame-ancestors 'self' https://trusted-domain.com;

# Static assets - long cache
/assets/*
  Cache-Control: public, max-age=31536000, immutable

# Admin area - strictest CSP
/admin/*
  Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; frame-ancestors 'none';

Ensure _headers is in the right location

The file must end up in your publish directory after build. Common locations:

Create or update netlify.toml in project root

# Build configuration
[build]
  publish = "dist"
  command = "npm run build"

# Security headers for all routes
[[headers]]
  for = "/*"
  [headers.values]
    X-Content-Type-Options = "nosniff"
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Permissions-Policy = "camera=(), microphone=(), geolocation=()"
    Strict-Transport-Security = "max-age=31536000; includeSubDomains"
    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self' https:; frame-ancestors 'none';"

Add route-specific headers

# Default security headers
[[headers]]
  for = "/*"
  [headers.values]
    X-Content-Type-Options = "nosniff"
    X-Frame-Options = "DENY"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Strict-Transport-Security = "max-age=31536000; includeSubDomains"

# API routes
[[headers]]
  for = "/api/*"
  [headers.values]
    Cache-Control = "no-store, max-age=0"
    X-Content-Type-Options = "nosniff"

# Static assets with long cache
[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

# Admin with strict CSP
[[headers]]
  for = "/admin/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; script-src 'self'; style-src 'self'; frame-ancestors 'none';"

Use environment-specific headers (advanced)

# Production headers
[context.production]
  [[context.production.headers]]
    for = "/*"
    [context.production.headers.values]
      Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
      Content-Security-Policy = "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';"

# Deploy preview headers (less strict for testing)
[context.deploy-preview]
  [[context.deploy-preview.headers]]
    for = "/*"
    [context.deploy-preview.headers.values]
      Content-Security-Policy = "default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data: https:;"

Create Edge Function

Create netlify/edge-functions/security-headers.ts:

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

export default async function handler(request: Request, context: Context) {
  // Get the response from the origin
  const response = await context.next();

  // Generate a unique nonce for CSP
  const nonce = crypto.randomUUID().replace(/-/g, '');

  // Build CSP with nonce
  const csp = [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
    `style-src 'self' 'nonce-${nonce}'`,
    "img-src 'self' blob: data: https:",
    "font-src 'self'",
    "object-src 'none'",
    "base-uri 'self'",
    "form-action 'self'",
    "frame-ancestors 'none'",
    "upgrade-insecure-requests"
  ].join('; ');

  // Clone headers and add security headers
  const headers = new Headers(response.headers);
  headers.set('Content-Security-Policy', csp);
  headers.set('X-Content-Type-Options', 'nosniff');
  headers.set('X-Frame-Options', 'DENY');
  headers.set('X-XSS-Protection', '1; mode=block');
  headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
  headers.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
  headers.set('X-Nonce', nonce);

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers
  });
}

export const config = {
  path: "/*",
  excludedPath: ["/api/*", "/_next/*", "/assets/*"]
};

Configure Edge Function in netlify.toml

[[edge_functions]]
  function = "security-headers"
  path = "/*"

Access nonce in your HTML (optional)

For server-rendered pages, you can read the nonce from the X-Nonce header:

// In your server-side code or build process
export async function getServerSideProps({ req }) {
  const nonce = req.headers['x-nonce'] || '';

  return {
    props: { nonce }
  };
}

// In your component
function MyPage({ nonce }) {
  return (
    <html>
      <head>
        <script nonce={nonce}>
          console.log('Inline script with nonce');
        </script>
      </head>
      <body>...</body>
    </html>
  );
}