CSP Header Builder

Compose a Content-Security-Policy directive by directive, get live validation warnings, and copy ready-to-use snippets for your server config.

Directives

Toggle a directive on, then click the chips you want as sources. Wildcards (*.example.com) and custom URLs go through the per-row input.

default-src

Fallback for every fetch directive you don't set

script-src

JavaScript

style-src

Stylesheets and inline styles

img-src

Images and favicons

font-src

Web fonts (@font-face)

connect-src

fetch(), XHR, WebSocket, EventSource

media-src

Audio and video

frame-src

Nested browsing contexts (iframes)

object-src

base-uri

The <base> element — restrict to 'self' or a URL

form-action

Where forms may submit to

frame-ancestors

Who may embed this page (response header only)

upgrade-insecure-requests no sources

Ask browsers to rewrite http:// subresource requests to https://

default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; upgrade-insecure-requests

Express + helmet: pass the same sources as a directives object — helmet.contentSecurityPolicy({ directives: { "default-src": ["'self'"], ... } })

Recommended companions to your CSP. Send HSTS only over HTTPS.

Strict-Transport-Security

max-age includeSubDomains preload


              max-age=31536000; includeSubDomains

X-Content-Type-Options

Send nosniff


              nosniff

X-Frame-Options


              DENY

Prefer the CSP frame-ancestors directive — X-Frame-Options is its legacy predecessor.

Referrer-Policy


              strict-origin-when-cross-origin

Permissions-Policy


              camera=(), microphone=(), geolocation=()