We use cookies to understand how the site is used and to display ads. Analytics and advertising only run after you accept. You can change your choice anytime via the footer link or your browser settings. Privacy policy

Skip to content
>_devvkit

CSP Header Builder

Build Content-Security-Policy headers with guided directive and source selection.

default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests; report-uri /__csp_report_
default-src'self'

Fallback for every directive that is not set explicitly.

script-src'self'

Where scripts may load from. strict-dynamic ignores most other sources.

style-src'self'

Stylesheets and <style> blocks. Inline styles need unsafe-inline.

img-src'self'

Images, favicons and data: URIs.

font-src

Web fonts. Google Fonts requires fonts.gstatic.com.

connect-src'self'

fetch, XHR, WebSocket, EventSource, beacons.

object-src'none'

<object>, <embed>, <applet>. Prefer none.

frame-src

<iframe> embeds (YouTube, Vimeo, …).

media-src

<audio> and <video>.

worker-src

Web Workers and service workers.

base-uri'self'

Limits <base> tag — prevents base-uri injection.

form-action'self'

Where forms may submit.

frame-ancestors

Who may frame this page. Cannot be set in a meta tag. Falls back to X-Frame-Options.

Build a Content-Security-Policy header. Nonce sources are generated at request time server-side — the policy below is a template. Note: frame-ancestors cannot be set via a <meta> tag, and a <meta> CSP must include every policy you want (it cannot extend an HTTP header policy).

//Share this tool
//Related tools
JSON Formatter
Format, validate, minify, and prettify JSON data instantly.
JWT Decoder
Decode and inspect JWT tokens: header, payload, signature, expiration.
Base64 Encoder/Decoder
Encode text or files to Base64 and decode back. UTF-8 safe.
Regex Tester
Test regular expressions in real-time with match highlighting and groups.

Build a Content-Security-Policy header with guided directive and source selection, live policy preview, and conflict validation for unsafe-inline, nonces, and strict-dynamic. Copy the final header into your config.

[x]Features
  • -13 directives with per-type source suggestions
  • -Live policy string preview with copy
  • -Nonce and strict-dynamic support
  • -unsafe-inline / nonce conflict detection
  • -upgrade-insecure-requests toggle
  • -Report-only mode with report-uri/report-to
>Use Cases
  • >Adding a CSP to a new Next.js or static site
  • >Migrating from a permissive CSP to strict-dynamic
  • >Debugging blocked resources with report-only mode
  • >Generating a policy snippet for CDN headers

Frequently Asked Questions

>What is a Content-Security-Policy??
A security header that tells the browser which sources of content (scripts, styles, images, connections) are allowed to load, limiting the damage from XSS and injection attacks.
>Why is unsafe-inline flagged??
unsafe-inline allows inline scripts/styles, which largely defeats the purpose of a CSP. Browsers ignore it when a nonce or strict-dynamic is present, so it should be removed then.
>How do I use a nonce??
Generate a random value per HTTP response, add it to the CSP and to each inline <script nonce="..."> tag. Without a fresh nonce per request, the policy is bypassable.