Which preset should I start from?

Strict (nonce + strict-dynamic) is the modern recommendation for HTML apps: scripts run only if they carry a matching nonce, and strict-dynamic lets those trusted scripts load their own dependencies without you whitelisting every CDN. Basic self-only locks every resource to your own origin — simple and safe for static sites. Google Analytics and Common CDNs add the specific endpoints those services need. Locked-down API uses default-src none for endpoints that serve only JSON. The report-only starting point is permissive on purpose, so you can observe traffic before tightening.

What does the live audit check for?

It flags the weaknesses that actually break CSP in practice: 'unsafe-inline' in a script directive (which largely defeats XSS protection unless paired with a nonce or hash), 'unsafe-eval', data: in script-src, and wildcard * sources. It also warns when you are missing a default-src fallback, object-src, base-uri, or frame-ancestors, and it nudges you to add a reporting endpoint and to pair a nonce with 'strict-dynamic'. Findings are ranked critical, high, medium, and info so you fix the dangerous ones first.

How do nonces work, and why generate one here?

A nonce is a random value you put in both the CSP header (as 'nonce-...') and on each inline tag (nonce="..."); the browser only runs scripts whose nonce matches. The catch is that the value must be unique per HTTP response, generated server-side at request time. The nonce button here generates a sample so you can see the policy shape, but in production your server must emit a fresh nonce on every response and inject the same value into your tags. Treat the generated nonce as a placeholder, not a fixed secret.

What is the difference between Report-Only and enforcing mode?

Report-Only emits the policy as Content-Security-Policy-Report-Only: the browser reports what would have been blocked but does not actually block anything. That lets you deploy a strict policy to real traffic, collect violation reports via your report-to or report-uri endpoint, and fix legitimate breakage before switching to the enforcing Content-Security-Policy header. Note that Report-Only cannot be set through an HTML meta tag — it requires a real HTTP response header, which the meta export will remind you of.

Which directive controls clickjacking and iframe embedding?

frame-ancestors controls who may embed your page in an , , , or — setting it to 'none' blocks all framing and to 'self' allows only your own pages. It supersedes the older X-Frame-Options header and is the modern anti-clickjacking control. Separately, frame-src controls which origins your page may load into iframes. The audit warns if frame-ancestors is missing because leaving it unset allows any site to frame you.

Do the exported configs produce identical policies?

Yes. The policy value is identical across every target — only the surrounding syntax differs. The HTTP and meta exports give you the raw header or tag; nginx uses add_header ... always; Apache uses Header always set inside a mod_headers block; Vercel and Next.js express it as JSON or a headers() function; Netlify uses its _headers file; and Express uses res.setHeader. Pick the one matching where you terminate requests and the security outcome is the same.

CSP Generator

Build a hardened Content-Security-Policy header directive by directive. Pick a preset, add per-directive sources (keywords, hosts, nonces), see a live security audit, and export copy-paste config for HTTP headers, HTML meta, nginx, Apache, Vercel, Netlify, Next.js, or Express.

About this ToolHow it works, benefits & use cases

Content-Security-Policy is one of the strongest defenses against cross-site scripting, but its directive syntax is unforgiving and easy to get subtly wrong. This generator builds a complete policy visually: start from one of six presets — Strict (nonce + strict-dynamic), Basic self-only, Google Analytics / Tag Manager, Common CDNs, Locked-down API, or an Allow-all report-only starting point — then fine-tune every directive. You get the full standard directive set: default-src, the script-src family (script-src, script-src-elem, script-src-attr), style-src and style-src-elem, img-src, font-src, connect-src, media-src, object-src, frame-src, worker-src, manifest-src, child-src, prefetch-src, frame-ancestors, base-uri, and form-action, plus the boolean directives upgrade-insecure-requests and block-all-mixed-content and the report-to / report-uri reporting endpoints. For each directive you add keyword sources ('self', 'none', 'unsafe-inline', 'unsafe-eval', 'strict-dynamic', 'wasm-unsafe-eval', https:, http:, data:, blob:, mediastream:, *), custom hosts, or a freshly generated nonce. A live audit panel grades the policy against real-world weaknesses — 'unsafe-inline' or data: in script-src, 'unsafe-eval', wildcards, and missing object-src, base-uri, or frame-ancestors — while a plain-English summary explains what the policy allows and blocks. A Report-Only toggle emits the Content-Security-Policy-Report-Only header so you can deploy safely. Finally, export copy-paste config for eight targets: a raw HTTP header, an HTML meta tag, nginx, Apache, Vercel, Netlify, Next.js, or Express. Everything runs in your browser and the full policy is captured in the URL so you can share it.

How to Use

1Pick a preset (Strict, Basic self-only, Google Analytics, Common CDNs, Locked-down API, or Report-only start) as your starting point.
2For each directive, add keyword sources from the picker, type a custom host, or click Nonce to insert a fresh nonce into a script directive.
3Toggle the special directives (upgrade-insecure-requests, block-all-mixed-content) and add a report-to or report-uri endpoint.
4Read the live policy audit and the plain-English summary, and remove any flagged weaknesses.
5Flip Report-Only on to test the policy without blocking, then choose your export target (HTTP, meta, nginx, Apache, Vercel, Netlify, Next.js, or Express).
6Copy or download the generated config and deploy it.

Key Benefits

Six presets including a modern nonce + strict-dynamic policy and a locked-down API policy
Full directive coverage: every standard fetch directive plus document, boolean, and reporting directives
Per-directive source picker with keywords, custom hosts, and one-click nonce generation
Live weakness audit that flags unsafe-inline, unsafe-eval, wildcards, and missing object-src / base-uri / frame-ancestors
Report-Only toggle that emits Content-Security-Policy-Report-Only for safe rollout
Copy-paste export for eight targets: HTTP, HTML meta, nginx, Apache, Vercel, Netlify, Next.js, Express
Runs entirely in the browser — no policy is sent anywhere, and the full config is shareable via URL

Common Use Cases

Authoring a first CSP for an app and validating it against common pitfalls before launch
Migrating from 'unsafe-inline' scripts to a nonce-based, strict-dynamic policy
Generating a default-src none policy for a JSON API that renders no HTML
Whitelisting Google Analytics, Tag Manager, or popular CDNs without memorizing their endpoints
Deploying a policy in Report-Only mode to collect violations before enforcing it
Producing ready-to-paste header config for nginx, Apache, Vercel, Netlify, Next.js, or Express

Content-Security-Policy

default-src 'self'; script-src 'nonce-{RANDOM}' 'strict-dynamic' https:; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'self'; upgrade-insecure-requests

Allows resources from your own origin by default. Cannot be embedded in any iframe (clickjacking blocked). Upgrades insecure http:// subresource requests to https://. Inline scripts must carry the matching nonce.

Policy audit

info — No reporting endpoint — add report-to (or report-uri) to monitor violations.

Export target

HTTP header config

Drop into csp-header.txt

Content-Security-Policy: default-src 'self'; script-src 'nonce-{RANDOM}' 'strict-dynamic' https:; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'self'; upgrade-insecure-requests

Preset

Reporting

Report-Only mode (Content-Security-Policy-Report-Only)

report-to (Reporting API group)

report-uri (legacy)

Special directives

upgrade-insecure-requests

Rewrite http:// subresource requests to https://.

block-all-mixed-content

Block any mixed (http) content (deprecated).

Directives

default-src

Fallback for every other fetch directive.

'self'

script-src

Valid sources for JavaScript.

'nonce-{RANDOM}''strict-dynamic'https:

script-src-elem

Sources for <script> elements.

script-src-attr

Sources for inline event handlers.

style-src

Valid sources for stylesheets.

'self'

style-src-elem

Sources for <style>/<link> styles.

img-src

Valid sources for images and favicons.

'self'data:

font-src

Valid sources for @font-face fonts.

'self'

connect-src

Sources for fetch, XHR, WebSocket, EventSource.

'self'

media-src

Sources for <audio> and <video>.

object-src

Sources for <object>/<embed> plugins.

'none'

frame-src

Sources for nested browsing contexts (iframes).

worker-src

Sources for Worker, SharedWorker, ServiceWorker.

manifest-src

Sources for the web app manifest.

child-src

Legacy fallback for frame-src/worker-src.

prefetch-src

Sources for prefetch/prerender requests.

frame-ancestors

Who may embed this page (anti-clickjacking).

'none'

base-uri

Restricts <base> URLs.

'none'

form-action

Valid endpoints for <form> submissions.

'self'

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

CSP Generator

How to Use

Key Benefits

Common Use Cases

Preset

Reporting

Special directives

Directives

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Content Security Policy Generator