← Back to Tools

🧱 CSP Generator

Build a Content-Security-Policy header interactively. Toggle directives on/off, specify allowed sources, then copy the finished header or meta tag directly into your application.

Content-Security-Policy header value:


            default-src 'self';

Custom directive name

Sources (space-separated)

Presets

What is Content-Security-Policy?

CSP is an HTTP response header that tells browsers which resources are allowed to load on your page. It is one of the most effective defenses against Cross-Site Scripting (XSS) attacks.

Add it to your server response headers: Content-Security-Policy: <policy>

Or use a <meta http-equiv> tag in your HTML head (note: this cannot set some directives like frame-ancestors).

How to use this tool

1 Toggle on the resource types your site uses: scripts, styles, images, fonts, frames.

2 Add the specific domains your site loads resources from for each type.

3 The tool builds the CSP header value as you configure it.

4 Copy the generated header value and add it to your server configuration.

Frequently asked questions

Where do I add the generated CSP?

Add it as an HTTP response header named Content-Security-Policy in your server config, or as a meta tag in your HTML head (though the header method is more secure).

What is report-only mode?

Content-Security-Policy-Report-Only sends violation reports without actually blocking anything. Use it to test a new CSP before enforcing it.

Should I include unsafe-inline for scripts?

Avoid it if possible. Instead, move inline scripts to external files or use nonces. unsafe-inline negates much of the XSS protection CSP provides.

What is a nonce?

A nonce is a random value added to the CSP header (nonce-{random}) and to each allowed inline script tag. It lets specific inline scripts run while blocking injected ones.