← Back to Dev Tools

CSP Rules Designer

Build a bulletproof Content-Security-Policy header. Whitelist domains per directive, catch dangerous patterns, copy ready-to-deploy code.

Directives

Select a directive →
Click any directive on the left to configure it.

Security Score

Score
0 / 100

Generated CSP

Configure directives above to generate your CSP →

What is a Content Security Policy?

A CSP is an HTTP response header that tells browsers which resources (scripts, styles, images, fonts, frames) are allowed to load on your page. It's the most effective defence against Cross-Site Scripting (XSS) and data injection attacks.

Why avoid 'unsafe-inline'?

It allows any inline <script> or <style> tag to run — including ones injected by attackers. Use nonces or hashes instead. This tool warns you when it's enabled.

301 vs CSP — what's the priority?

default-src is the fallback for all unset directives. Always configure it first; then tighten per-resource with script-src, style-src, etc.

Report-Only mode

Deploy with Content-Security-Policy-Report-Only first. Violations are logged, not blocked — safe way to test before enforcing.

Frames & iframes

Use frame-ancestors (not X-Frame-Options) to control who can embed your page. Set 'none' to block all embedding and prevent clickjacking.

Cloudflare / CDN users

Add your CDN domain to script-src and style-src. If you use Cloudflare Rocket Loader, add ajax.cloudflare.com to script-src.

Google Fonts & Analytics

Fonts: add fonts.googleapis.com to style-src and fonts.gstatic.com to font-src. Analytics: add *.google-analytics.com and *.googletagmanager.com to script-src.