🛡 CONTENT SECURITY POLICY BUILDER

// Build a Content-Security-Policy header visually with explanations for each directive

HOW TO USE

Configure each CSP directive below. The generated header updates live. Copy the value into your web server config or HTTP response headers.

default-src (fallback for all resources)

script-src (JavaScript sources)

style-src (CSS sources)

img-src (image sources)

font-src (web font sources)

connect-src (XHR, fetch, WebSocket)

frame-src (iframe sources)

media-src (audio and video)

object-src (plugins — Flash etc)

form-action (form submission targets)

base-uri (base tag restriction)

report-uri (violation reporting endpoint)

upgrade-insecure-requests block-all-mixed-content

GENERATED HEADER

Free Content Security Policy Builder — Generate CSP Headers Visually

Our free CSP builder generates a Content-Security-Policy header interactively, letting you configure each directive with explanations of what it controls. CSP is one of the most powerful defences against Cross-Site Scripting (XSS) and data injection attacks. The generated header can be copy-pasted directly into your web server configuration.

Key CSP Directives

default-src — the fallback policy for all resource types not covered by other directives
script-src — controls which JavaScript sources are trusted. Avoid 'unsafe-inline' and 'unsafe-eval' in production.
style-src — controls CSS sources. Google Fonts users need to add fonts.googleapis.com.
object-src 'none' — always set this. Prevents Flash and Java plugins loading.
upgrade-insecure-requests — upgrades all HTTP requests to HTTPS automatically.
report-uri — send violation reports to a logging endpoint for monitoring.

Testing Your CSP

Deploy your CSP in report-only mode first using the Content-Security-Policy-Report-Only header. This logs violations without blocking anything, letting you identify legitimate sources you need to whitelist before enforcing the policy.