Zero Snippet

CSP builder — compose Content-Security-Policy directives, copy a header, and roll out safely

This free Content Security Policy builder helps you assemble a valid Content-Security-Policy (or Content-Security-Policy-Report-Only) value without memorizing every directive name. Toggle default-src, script-src, style-src, img-src, connect-src, frame-ancestors, reporting endpoints, and common flags, then use the copy icon to grab either the raw policy string (for meta tags and some CDNs) or the full HTTP header line for nginx, Apache, Express, or edge workers. Import from file (upload icon) parses a saved policy or header line locally—nothing is uploaded to a server. Pair the result with our HTTP header checker to verify responses after deploy, and browse security and encryption tools for JWT testing, hashing, and more.

Header mode

Choose enforcing CSP or report-only while you tune violations.

Presets

Load a starting point, then enable directives and edit sources.

.txt or pasted header — parsed locally

Directives

Policy value (header body)

default-src 'self'

HTML meta (fallback only): use http-equiv="Content-Security-Policy" and a content string matching the policy above—escape embedded double quotes. Prefer sending the header from your server or CDN.

What is a Content Security Policy (CSP) header?

A Content Security Policy is an HTTP response header that tells the browser which origins may load or execute scripts, styles, images, fonts, XHR, frames, workers, and other resource types. It is one of the most effective ways to reduce the blast radius of cross-site scripting (XSS): unexpected inline script, eval, or third-party loads can be refused or reported. Searchers often look for a CSP generator, nginx Content-Security-Policy example, or CSP directive list — this page gives you a working baseline you can tighten for your stack.

How to use this CSP builder (step by step)

  1. Choose enforcing CSP or Report-Only. Use report-only in staging or production first so violations show up in logs without breaking users while you fix assets.
  2. Click a preset (Typical SPA, Stricter scripts, etc.) or enable directives manually. Edit space-separated sources such as 'self', https://cdn.example.com, data:, or nonce/hash tokens emitted by your framework.
  3. Optionally use Import from file to load an existing policy from disk. The parser recognizes a bare directive string or a line that starts with Content-Security-Policy:.
  4. Press Copy policy value when your config expects only the semicolon-separated directives, or Copy full header line when you paste directly into server or CDN configuration. Fix violations reported in the console, then switch from report-only to enforcement.

Directive guide: default-src, script-src, frame-ancestors, and reporting

default-src is the usual starting point: it applies when a more specific directive is absent. Most teams combine it with explicit script-src and style-src rules so reviews are explicit. frame-ancestors replaces many uses of X-Frame-Options for clickjacking defense—values like 'none' or a list of partner origins are common. For observability, add report-uri or report-to alongside the Reporting API headers your infrastructure supports. When you evaluate tokens and digests for inline script, the hash generator can help compute SHA-256 hashes for small static snippets in controlled setups.

Deploying CSP on nginx, Apache, CDNs, and application frameworks

After you copy the header, attach it at the edge or origin: nginx uses add_header Content-Security-Policy "..."; Apache uses Header set from mod_headers. Platforms like Vercel, Netlify, and Cloudflare Workers expose static response header maps. Frameworks such as Next.js can set headers in config; verify output with the HTTP header checker on a preview URL before promoting to production.

Keywords and topics this CSP tool supports

Teams search for CSP unsafe-inline alternative, Content-Security-Policy-Report-Only example, block mixed content CSP, and upgrade insecure requests. This builder encodes those ideas as toggles and short descriptions so you can align policy with OWASP-style guidance while staying framework-agnostic. For API tokens used in tests—not in CSP itself—see the JWT encoder and JWT decoder.

Related security utilities on this site

Explore the full security and encryption tools section, or open a focused utility below.

  • Password Strength Meter — Score password entropy, estimate crack time, and get practical hardening tips.
  • bcrypt Hash Generator — Generate bcrypt hashes with configurable cost for secure password storage testing.
  • AES Encrypt & Decrypt — Encrypt and decrypt text with AES-256 and a passphrase—runs fully in your browser.
  • RSA Key Pair Generator — Create 1024–4096 bit RSA public/private key pairs locally for demos and dev workflows.
  • Security Headers Checker — Analyze security-related HTTP headers on any URL with graded guidance to harden responses.
  • JWT Encoder — Build HS256-signed JWTs from custom header and payload for API and auth testing.
  • HMAC Generator — Create HMAC-SHA256 or HMAC-SHA512 signatures with a secret for webhook and API verification.
  • SSL Certificate Decoder — Paste PEM certificates to read subject, issuer, SANs, and validity windows.
  • .htaccess Generator — Assemble common Apache .htaccess rules for redirects, HTTPS, caching, and access control.

Frequently asked questions

What is a Content Security Policy (CSP)?
Content Security Policy is a browser security layer delivered as an HTTP header (Content-Security-Policy or Content-Security-Policy-Report-Only) or, for simpler cases, a meta tag. It tells the browser which origins are allowed for scripts, styles, images, XHR, frames, and more. Well-tuned CSP reduces cross-site scripting impact because inline script and unexpected third-party loads can be blocked or reported.
What is the difference between Content-Security-Policy and Report-Only?
Content-Security-Policy enforces rules: violations are blocked (or stripped) in the browser. Content-Security-Policy-Report-Only sends violation reports but does not block—ideal for rolling out a new policy while you fix broken assets. After logs look clean, switch to the enforcing header. This builder outputs the policy value; you choose which header name your server sends.
What does default-src do?
default-src is a fallback for fetch-related directives that you do not list explicitly. Many policies start with default-src 'self' and then add script-src, style-src, and others for finer control. If you set only default-src, it applies broadly—splitting directives is usually clearer for production reviews.
Why avoid 'unsafe-inline' for scripts?
Inline script and event handlers are a common XSS path. If script-src includes 'unsafe-inline', much of CSP's benefit for scripts is lost. Prefer nonces (per-response random tokens on script tags) or hashes (cryptographic hashes of inline script bodies) together with script-src, or move logic to external files on allowed origins.
What is frame-ancestors used for?
frame-ancestors controls which pages may embed your site in iframes. It replaces many uses of X-Frame-Options for framing policy. Typical values are 'none' (no embedding) or 'self' plus specific partner origins. It is not the same as frame-src, which controls what your page may embed.
How do I deploy this policy on my server?
Copy the policy value from this tool, then add an HTTP header: Content-Security-Policy: <value>. On nginx use add_header; on Apache mod_headers; on Node or Express use middleware; on Vercel or Netlify use headers in config. For static sites you can use a meta http-equiv tag, but HTTP headers are preferred. Always test in staging and consider Report-Only first.
Can I use CSP with Next.js or React?
Yes. Frameworks often need script-src and style-src tuned for hydration, inline styles, and third-party scripts. Next.js and other stacks may emit inline scripts—use nonces or hashes where supported, or tighten gradually. Pair this builder with your staging environment and browser devtools to resolve violations before production.
Does this tool upload my policy to a server?
No. The policy is built and copied in your browser. Optional upload only reads a text file you choose locally to pre-fill directives—nothing is transmitted to us. Avoid pasting secrets into any web form as a general habit.
How do I validate headers after deployment?
Use browser developer tools (Network tab) to confirm the header value, or run security scanners and dedicated header checkers. This site includes an HTTP header checker at /website/http-header-checker to inspect live responses for Content-Security-Policy and related headers.