Developer Tools

CSP Header Generator

Build a Content-Security-Policy header in your browser. Pick directives, add sources, generate nonces, validate against typos and unsafe combinations.

Quick presets

Policy mode and delivery

Header

Delivery

Fetch directives

default-src

Fallback for every fetch directive (script-src, style-src, etc.) that is not set explicitly.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

script-src

Sources allowed for JavaScript: scripts, workers, eval, inline handlers.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

Replace nonces and hashes per response on the server.

script-src-elem

Sources for <script> elements only. Falls back to script-src.

script-src-attr

Sources for inline event handlers (onclick, onerror, etc.).

style-src

Sources for stylesheets and inline <style> blocks.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

Replace nonces and hashes per response on the server.

style-src-elem

Sources for <style> and <link rel=stylesheet> only.

style-src-attr

Sources for inline style= attributes on elements.

img-src

Sources for images including <img>, <picture>, favicon, and CSS background-image.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

font-src

Sources for @font-face and <link rel=preload as=font>.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

connect-src

Sources for fetch, XHR, WebSocket, EventSource, and Beacon.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

media-src

Sources for <audio>, <video>, and <track>.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

object-src

Sources for <object>, <embed>, and <applet>. Set to 'none' on modern apps.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

frame-src

Sources for <iframe> and <frame>. Used to allow embedding third-party widgets.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

child-src

Sources for nested browsing contexts (iframes) and workers.

worker-src

Sources for Worker, SharedWorker, and ServiceWorker scripts.

manifest-src

Sources for <link rel=manifest> web app manifests.

prefetch-src

Sources for <link rel=prefetch> and <link rel=prerender>.

Document directives

base-uri

Restricts the URLs <base> elements can set as the document base. Often set to 'self' or 'none'.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

sandboxHeader only

Applies an iframe-style sandbox to the document. Pick which capabilities to allow back in.

Navigation directives

form-action

Restricts where <form action=...> may submit to.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

frame-ancestorsHeader only

Restricts who may embed this page in <iframe>, <frame>, <object>. Replaces X-Frame-Options.

Keyword sources

Common schemes

Sources (one per line, space, or comma separated)

navigate-to

Restricts where the document may navigate to. Limited browser support.

Reporting directives

report-uri

Legacy reporting endpoint. Browsers POST violation reports here. Superseded by report-to.

report-to

Group name from a Reporting-Endpoints (or older Report-To) HTTP header. Modern reporting.

Other directives

upgrade-insecure-requestsFlag

Auto-upgrades every http:// subresource on the page to https://. No value, just present.

This directive has no value. Enabling it appends upgrade-insecure-requests to the policy.

block-all-mixed-contentFlag

Blocks every mixed-content (http) subresource. Deprecated: use upgrade-insecure-requests.

require-trusted-types-for

Forces use of Trusted Types for sinks like innerHTML. Use the value 'script'.

trusted-types

Whitelist of named Trusted Type policies your scripts may create. Append 'allow-duplicates' to permit duplicates.

Generated policy

13 directives|293 chars

default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https:; media-src 'self'; object-src 'none'; frame-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; upgrade-insecure-requests

HTTP header

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https:; media-src 'self'; object-src 'none'; frame-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; upgrade-insecure-requests

HTML <meta> tag

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https:; media-src 'self'; object-src 'none'; frame-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; upgrade-insecure-requests" />

Validation

0 errors|1 warning|0 info

Warnstyle-src: 'unsafe-inline' allows any inline style. Consider switching to nonces, hashes, or 'strict-dynamic'.

Source expression cheat sheet

'self' Same scheme, host, and port as the page.
'none' Match nothing. Must be the only source.
https://example.com A specific origin. Optional path is allowed.
*.example.com Any subdomain of example.com.
data:, blob:, https: Bare schemes match every URL with that scheme.
'nonce-XYZ' Inline script or style with nonce="XYZ". Use a fresh value per response.
'sha256-...' Inline script or style whose body hashes to this value.
'strict-dynamic' Trusts every script that a nonce-allowed or hash-allowed script loads. Pair with a nonce.

How to use

Pick a preset on the top (Lockdown, Modern web app, CSP3 strict-dynamic, Google Analytics + Fonts, or Report-Only audit) to start from a sensible baseline, or click Reset all to build from scratch.
Toggle directives on or off in the panels below. For each enabled directive, click keyword chips like 'self', 'none', or 'strict-dynamic', and add custom hosts in the sources textarea.
Use the Generate nonce button under script-src or style-src to insert a fresh base64 nonce. Replace it on the server per response.
Choose Enforce or Report-Only mode and pick HTTP header or <meta> tag delivery. Warnings appear if the chosen delivery does not support an enabled directive.
Read the validation panel for any errors or warnings, then copy the policy value, the full header line, or the meta tag and paste it into your server config or HTML.

About this tool

CSP Header Generator turns the Content-Security-Policy HTTP header into something you can build directive by directive instead of guessing at quoted source-expression syntax. Every standard CSP Level 3 directive is supported: the fetch directives (default-src, script-src, script-src-elem, script-src-attr, style-src, style-src-elem, style-src-attr, img-src, font-src, connect-src, media-src, object-src, frame-src, child-src, worker-src, manifest-src, prefetch-src), the document and navigation directives (base-uri, form-action, frame-ancestors, navigate-to, sandbox), the reporting directives (report-uri, report-to), the standalone flags (upgrade-insecure-requests, block-all-mixed-content), and the Trusted Types directives (require-trusted-types-for, trusted-types). Each directive has a chip picker for the keyword sources that the spec allows for it (so you cannot accidentally put 'unsafe-eval' on img-src, or 'unsafe-inline' on connect-src), plus a free-text source list where you can paste your CDN, analytics, font, or websocket origins. A Generate nonce button produces a fresh CSP-spec-compliant base64 nonce using the browser's Web Crypto API and inserts it into script-src or style-src. Sandbox is rendered as a token picker with all eleven allow-* tokens. Validation runs on every keystroke and flags the things that quietly break a policy in production: 'none' mixed with another source, missing default-src fallback, schemes used as the only source (over-permissive), 'unsafe-inline' shadowed by a nonce or 'strict-dynamic' (which silently disables it), 'strict-dynamic' without a nonce or hash to bootstrap from, frame-ancestors or sandbox set on a meta tag (where browsers ignore them), invalid host syntax (bad wildcards, invalid ports), unknown require-trusted-types-for sinks, and missing report-uri / report-to in Report-Only mode. Five presets cover the situations most teams actually hit: a Lockdown baseline that allows only same-origin, a Modern web app starter that mirrors what large production sites ship, a CSP3 strict-dynamic policy with a nonce placeholder, a Google Analytics + Fonts policy with the right hosts already filled in, and a Report-Only audit policy with a reporting endpoint pre-configured. Output is delivered three ways: the raw policy value (paste straight into a server config or framework helper), the full Content-Security-Policy: header line (paste into nginx, Apache, IIS, or a CDN edge function), and an HTML <meta http-equiv> tag with HTML-escaped content (drop into the <head> of a static page where you cannot set headers). All processing happens in your browser, which matters because in-progress policies often reference internal hostnames, staging domains, and reporting endpoints you do not want to leak.

Free to use. Works in your browser. No signup, no login.

Related tools

CSP Header Generator

How to use

About this tool

You may also like

HTTP Headers Parser

Robots.txt Generator

Schema Markup Generator

JWT Decoder

URL Parser