Reference Guide

CSP Header Examples by Platform

Copy and adapt Content Security Policy deployment syntax for HTTP responses, nginx, Apache, Netlify, Vercel, Cloudflare Pages, Next.js, Remix, Express, and Fastify.

Generate Header

Deploy

What is a CSP header?

Use these examples to place a generated CSP in the right deployment format. For policy strategy by site type, use CSP examples. For staged rollout, use report-only CSP.

Caveat

Meta tags are limited

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 do I create a CSP header?

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
    });
  }
};

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.

Directive Glossary

Compact CSP directive glossary

These are the directives most often involved when you create a CSP, validate a generated policy, or read browser violation reports.

default-src Fallback policy for resource types that do not have a more specific directive.

script-src Controls JavaScript sources, inline script hashes, nonces, and risky values like 'unsafe-eval'.

style-src Controls stylesheets and inline style allowances, including hashes or nonces when used.

img-src Controls image sources, including common allowances such as same-origin CDNs or carefully reviewed data: images.

connect-src Controls fetch, XHR, WebSocket, EventSource, and API endpoints.

font-src Controls web font sources such as local assets, Google Fonts, or a private asset CDN.

frame-src Controls iframes and embedded content loaded by your page.

frame-ancestors Controls which parent pages may embed your page and helps prevent clickjacking.

object-src Controls legacy plugin content. Most modern policies set this to 'none'.

base-uri Restricts which URLs can be used in a document <base> element.

form-action Controls where forms can submit data.

report-to Names a Reporting API endpoint for CSP violation reports.

CSP Header Examples 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