March 15, 2026·Updated May 2, 2026|11 min read|Anay Pandya|Web Security

Content Security Policy (CSP): A Practical Guide with Examples

Content Security Policy is the most powerful browser security mechanism available — and the most commonly misconfigured. This guide walks through every directive with real-world examples, shows you how to build a CSP that doesn't break your site, and explains how to use report-uri to catch violations before they become problems.

#content-security-policy #csp-header #csp-directives #xss-protection #web-security

Anay Pandya

1,742 words

AP

Anay Pandya

Founder of ZeriFlow · 10 years fullstack engineering · About the author

Key Takeaways

Content Security Policy is the most powerful browser security mechanism available — and the most commonly misconfigured. This guide walks through every directive with real-world examples, shows you how to build a CSP that doesn't break your site, and explains how to use report-uri to catch violations before they become problems.
Includes copy-paste code examples and step-by-step instructions.
Free automated scan available to verify your implementation.

Content Security Policy (CSP): A Practical Guide with Examples

Content Security Policy is arguably the most powerful browser security mechanism available to web developers. A well-configured CSP can neutralise XSS attacks even when your application code contains injection vulnerabilities — because even if an attacker injects a <script> tag, the browser will refuse to execute it unless the source is explicitly whitelisted.

The reason CSP is so commonly misconfigured (or absent) is that getting it right requires understanding your site''s resource loading patterns in detail. This guide gives you the mental model, the directive reference, and the practical workflow to deploy CSP without breaking your site.

Related articles

Keep reading

May 12, 2026

The 7 Most Common Security Mistakes in Vibe-Coded Apps (2026)

May 1, 2026

What's the Average Website Security Score in 2026? (And How to Beat It)

Content Security Policy (CSP): Practical Guide with Examples | ZeriFlow

javascript

app.post(''/csp-reports'', express.json({ type: ''application/csp-report'' }), (req, res) => {
  const report = req.body[''csp-report''];
  console.log(''CSP Violation:'', {
    directive: report[''violated-directive''],
    blockedUri: report[''blocked-uri''],
    documentUri: report[''document-uri''],
  });
  res.status(204).end();
});

http

# Strict — only same origin
script-src ''self''

# Allow a specific CDN
script-src ''self'' https://cdn.jsdelivr.net

# Allow inline scripts (AVOID if possible — defeats XSS protection)
script-src ''self'' ''unsafe-inline''

# Allow dynamic evaluation like eval() (AVOID — very permissive)
script-src ''self'' ''unsafe-eval''

# Best practice: use nonces
script-src ''self'' ''nonce-{RANDOM_NONCE}''

http

# Inline styles are extremely common in frameworks — this is usually necessary
style-src ''self'' ''unsafe-inline''

# Or allow Google Fonts
style-src ''self'' ''unsafe-inline'' https://fonts.googleapis.com

http

# Prevent all framing (equivalent to X-Frame-Options: DENY)
frame-ancestors ''none''

# Allow framing only by same origin (equivalent to X-Frame-Options: SAMEORIGIN)
frame-ancestors ''self''

# Allow a specific origin
frame-ancestors ''self'' https://trusted-partner.com

Value	Meaning
`''self''`	Same origin (scheme + host + port)
`''none''`	No sources allowed
`https:`	Any HTTPS URL
`https://cdn.example.com`	Specific origin
`https://cdn.example.com/scripts/`	Specific path prefix
`''unsafe-inline''`	Inline scripts/styles (avoid for scripts)
`''unsafe-eval''`	eval() and similar (avoid)
`''nonce-RANDOM''`	Specific inline script with matching nonce
`''sha256-HASH''`	Inline script/style matching this hash
`''strict-dynamic''`	Trust scripts loaded by trusted scripts

javascript

import crypto from ''crypto'';
import express from ''express'';

const app = express();

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString(''base64'');
  res.setHeader(
    ''Content-Security-Policy'',
    `script-src ''self'' ''nonce-${res.locals.nonce}''; style-src ''self'' ''unsafe-inline''`
  );
  next();
});

app.get(''/'', (req, res) => {
  res.send(`
    <html>
      <body>
        <script nonce="${res.locals.nonce}">
          console.log(''This inline script is allowed by CSP'');
        </script>
        <script>
          // This script has no nonce — the browser will block it
          console.log(''blocked'');
        </script>
      </body>
    </html>
  `);
});

http

Content-Security-Policy: 
  default-src ''self'';
  script-src ''self'' https://js.stripe.com https://www.googletagmanager.com ''nonce-{RANDOM}'';
  style-src ''self'' ''unsafe-inline'' https://fonts.googleapis.com;
  img-src ''self'' data: https://www.google-analytics.com https://www.googletagmanager.com;
  font-src ''self'' https://fonts.gstatic.com;
  connect-src ''self'' https://api.stripe.com https://www.google-analytics.com https://api.yourdomain.com;
  frame-src https://js.stripe.com;
  frame-ancestors ''none'';
  object-src ''none'';
  base-uri ''self'';
  form-action ''self''

javascript

// middleware.ts
import { NextResponse } from ''next/server'';
import { NextRequest } from ''next/server'';
import crypto from ''crypto'';

export function middleware(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString(''base64'');
  const csp = `
    default-src ''self'';
    script-src ''self'' ''nonce-${nonce}'' ''strict-dynamic'';
    style-src ''self'' ''unsafe-inline'';
    img-src ''self'' blob: data:;
    font-src ''self'';
    object-src ''none'';
    base-uri ''self'';
    form-action ''self'';
    frame-ancestors ''none'';
    upgrade-insecure-requests;
  `.replace(/\\s{2,}/g, '' '').trim();

  const response = NextResponse.next();
  response.headers.set(''Content-Security-Policy'', csp);
  response.headers.set(''x-nonce'', nonce);
  return response;
}