Header or tag — which should I use?

The HTTP header is preferred. The form is convenient when you can't edit response headers (static hosts, etc.), but it can't define frame-ancestors or report-uri/report-to, so it's strictly less powerful.

Why is the wildcard a warning?

* in a source list matches any URL, defeating the policy entirely. Pin sources to specific origins or use 'self' instead — if you genuinely need third-party scripts, list them explicitly.

Content-Security-Policy Builder

Composes a Content-Security-Policy header from a directive-by-directive form. Each directive accepts a space-separated source list (keywords like 'self', 'none', 'unsafe-inline', or scheme/host sources). The tool flags policies that contain unsafe-inline, unsafe-eval, or a wildcard, omits empty directives from the output, and emits both the response header form and the equivalent <meta> tag. Switch to report-only mode while you're rolling a new policy out to production.

—

Presets

Directives

default-src — fallback for any -src directive not setscript-src — JavaScript sourcesstyle-src — CSS sourcesimg-src — image sourcesfont-src — font sourcesconnect-src — fetch / XHR / WebSocket / EventSourcemedia-src — audio / video sourcesframe-src — frame contentsworker-src — Worker / SharedWorker scriptsobject-src — <object>, <embed>, <applet> — set to 'none'base-uri — <base> tag URLsform-action — form submission endpointsframe-ancestors — who can embed this page (replaces X-Frame-Options)report-uri — violation report endpoint (legacy)

Report-only mode

Header

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'

<meta> tag

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'">

An empty directive falls through to default-src. Set default-src 'self' first, then narrow individual sources.

How to use

Start from a preset (Strict locks everything to 'self', Relaxed allows inline + wildcards, API-only blocks navigation).
Edit each directive — leave a field blank to drop it.
Turn on report-only when shipping a new policy: violations are reported but not blocked.

Frequently asked questions

Header or <meta> tag — which should I use?: The HTTP header is preferred. The <meta> form is convenient when you can't edit response headers (static hosts, etc.), but it can't define frame-ancestors or report-uri/report-to, so it's strictly less powerful.
Why is the wildcard a warning?: * in a source list matches any URL, defeating the policy entirely. Pin sources to specific origins or use 'self' instead — if you genuinely need third-party scripts, list them explicitly.

Related tools

CSP Hash Generator

Compute the sha256 / sha384 / sha512 base64 hash an inline <script> or <style> block needs to be whitelisted by a Content-Security-Policy.

Network 0 0

HSTS Header Builder

Compose a Strict-Transport-Security header — max-age, includeSubDomains, preload — with a live preload-list eligibility check.

Network 0 0

SPF Record Builder

Compose a Sender Policy Framework TXT record from mechanisms, IPs and includes — with a live DNS-lookup counter and warnings.

Network 0 0

Permissions-Policy Header Builder

Build the `Permissions-Policy` response header — toggle camera, microphone, geolocation, payment, fullscreen and 20+ other browser features by origin allowlist.

Network 0 0

Referrer-Policy Header Builder

Pick a Referrer-Policy value and see exactly what `Referer` header outbound requests will send — same-origin, cross-origin HTTPS, HTTPS→HTTP downgrade.

Network 0 0

/.well-known/* URI Reference

Searchable catalog of well-known URIs registered with IANA — `security.txt`, `openid-configuration`, `apple-app-site-association`, `acme-challenge`, and 30+ more, with RFC references and use cases.

Network 0 0