Reference Guide

What Is a CSP Header? Examples by Platform

A CSP header is an HTTP response header that tells the browser which scripts and other resources a page may use. Copy and adapt the examples below for your server, host, or framework.

Generate Header

Deploy

Where to set a CSP header

Set Content-Security-Policy on the HTTP response that serves the page. Use the matching example below for deployment syntax; use CSP policy examples for policy design and CSP Report-Only for staged testing.

Caveat

When to use a CSP meta tag

HTTP response headers are preferred for a production Content Security Policy header. A meta CSP can help in narrow cases, but it cannot support every directive and should not be treated as a full replacement for server headers.

Workflow

How to deploy a CSP header example

Generate a policy from scan evidence, choose the deployment format for your host or framework, test with report-only CSP, then ship the enforced Content-Security-Policy header when the policy is stable.

HTTP

Plain HTTP CSP header

Content-Security-Policy: default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;

Meta tag caveat

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; object-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:">

nginx

nginx CSP header

add_header Content-Security-Policy "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;" always;

Apache

Apache CSP header

Header always set Content-Security-Policy "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;"

Netlify

Netlify CSP `_headers`

/*
  Content-Security-Policy: default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;

Vercel

Vercel CSP header config

{
  "headers": [{
    "source": "/(.*)",
    "headers": [{
      "key": "Content-Security-Policy",
      "value": "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;"
    }]
  }]
}

Cloudflare Pages

Cloudflare Pages CSP `_headers`

/*
  Content-Security-Policy: default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;

Express or Fastify

Express and Fastify CSP middleware

app.use((req, res, next) => {
  res.setHeader(
    "Content-Security-Policy",
    "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;"
  );
  next();
});

Next.js or Remix

Next.js and Remix CSP headers

const csp = "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;";

return new Response(body, {
  headers: {
    "Content-Security-Policy": csp
  }
});

Render

Render Go or Gin middleware

router.Use(func(c *gin.Context) {
  c.Writer.Header().Set(
    "Content-Security-Policy",
    "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;",
  )
  c.Next()
})

CloudFront or S3

CloudFront Function CSP header

function handler(event) {
  var response = event.response;
  response.headers["content-security-policy"] = {
    value: "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;"
  };
  return response;
}

WordPress

WordPress or Apache `.htaccess`

<IfModule mod_headers.c>
  Header always set Content-Security-Policy "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;"
</IfModule>

Rails

Rails CSP initializer

# config/initializers/content_security_policy.rb
Rails.application.config.content_security_policy do |policy|
  policy.default_src :self
  policy.object_src :none
  policy.base_uri :self
  policy.script_src :self
  policy.img_src :self, :data
  policy.frame_ancestors :none
end

Django

Django CSP middleware

class CSPMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        response["Content-Security-Policy"] = "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;"
        return response

Laravel

Laravel CSP middleware

public function handle($request, Closure $next)
{
    $response = $next($request);
    $response->headers->set(
        'Content-Security-Policy',
        "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;"
    );
    return $response;
}

Spring Security

Spring Security CSP header

http.headers(headers -> headers
  .contentSecurityPolicy(csp -> csp
    .policyDirectives("default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;")
  )
);

Helmet.js

Express CSP with Helmet.js

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    objectSrc: ["'none'"],
    baseUri: ["'self'"],
    scriptSrc: ["'self'"],
    styleSrc: ["'self'"],
    imgSrc: ["'self'", "data:"],
    frameAncestors: ["'none'"],
    upgradeInsecureRequests: []
  }
}));

Cloudflare Workers

Cloudflare Worker CSP header

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set("Content-Security-Policy", "default-src 'self'; object-src 'none'; base-uri 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; frame-ancestors 'none'; upgrade-insecure-requests;");
    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers
    });
  }
};

Framework Integration

Framework CSP deployment notes that prevent breakage

Copying the header syntax is only the transport step. Framework-generated scripts, streaming payloads, development tooling, static rendering, and caches determine whether a nonce- or hash-based policy can work.

Next.js per-request nonces Generate a fresh unpredictable nonce before rendering, place the same value in the request and response policy where the framework can read it, and expect nonce-based pages to use dynamic rendering rather than ordinary static generation or CDN caching.

Next.js development versus production Development tooling may require 'unsafe-eval'; do not carry that allowance into production merely because the development server needed it.

Remix and React Router streaming Pass the same nonce to the CSP header, document script components such as <Scripts> and <ScrollRestoration>, and the server renderer so streamed hydration scripts receive it.

Express, Fastify, and Helmet Set the policy before the response body begins. If templates contain authorized inline code, generate one nonce per response and pass it to both the header builder and the rendered elements.

Static hosts and CDNs A nonce placeholder in a static file is not a nonce strategy. Externalize inline code, use build-time hashes that match exact bytes, or add an edge/server response layer that can render a fresh nonce safely.

Hydration and third-party scripts Test production builds with analytics, consent, authentication, lazy routes, and error boundaries. Framework boot scripts and third-party loaders often appear only in those states.

See the maintained Next.js CSP guide and React Router security guidance for version-specific nonce integration details.

Warning

Common CSP header formatting errors

Splitting one CSP header across multiple conflicting headers.
Forgetting semicolons between directives.
Using curly quotes around 'self' or 'none'.
Deploying only a meta tag when the server can set an HTTP response header.
Copying a generated header without testing it in report-only mode first.

CSP Header Example FAQ

Should I deploy CSP as an HTTP header or a meta tag?

Use an HTTP response header whenever possible. Meta CSP has limitations and is best treated as a fallback for narrow cases.

Can I deploy more than one CSP header?

You can, but multiple policies can combine in surprising ways. Most teams should deploy one reviewed policy per response.

Where should I put report-only CSP?

Deploy report-only CSP with the Content-Security-Policy-Report-Only header, not the enforced Content-Security-Policy header.

Next Step

Generate a CSP header from real scan evidence

Use the CSP scanner and header generator to produce a deployment-formatted candidate, then review and adapt the matching platform syntax from this reference.

Run CSP Scanner