Skip to main content

CSP Generator

Build a Content-Security-Policy header visually

Resource directives

Fallback for all resource types

Where JavaScript can load from

Where stylesheets can load from

Where images can load from

Where fonts can load from

Where fetch/XHR/WebSocket can connect

Where iframes can load from

Where audio/video can load from

Security directives

object-src

'none'

base-uri

'self'

form-action

'self'

frame-ancestors

'none'

upgrade-insecure-requests

Report-Only mode

Log violations without blocking

Generated header

Content-Security-Policy: default-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'

Add this header in your web server, CDN, or meta tag. Test with Report-Only mode first.

About the Csp Generator

Content-Security-Policy is the most powerful security header — it tells the browser exactly which sources are allowed for scripts, styles, images, connections, and more. A well-configured CSP can stop XSS, prevent clickjacking, and block data exfiltration. But writing one from memory is error-prone.

This generator lets you configure each directive visually: toggle directives on and off, add sources with quick presets, and include security hardening directives like object-src and frame-ancestors. The header updates in real time and supports Report-Only mode for safe testing.

How to use

  1. Start with default-src as your fallback policy.
  2. Enable specific directives and add your allowed sources.
  3. Include object-src none and base-uri self for hardening.
  4. Test with Report-Only mode first, then enforce.

Frequently Asked Questions

What CSP should I start with? ▾

default-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none' — this is a strict baseline that blocks external resources. Then add directives for specific needs (fonts, CDNs, APIs).

What is Report-Only mode? ▾

Content-Security-Policy-Report-Only logs violations to your report-uri endpoint without blocking anything. This lets you test a CSP on production traffic before enforcing it.

How do I allow Google Fonts? ▾

style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com — Google Fonts requires inline styles for the loading mechanism.

Is this tool free to use? ▾

Yes! This tool is 100% free. No signup, no credit card, no limits. It's part of Formatho's privacy-first developer toolkit.

Is my data safe? Does this tool send data to a server? ▾

Absolutely. This tool runs entirely in your browser. Your data never leaves your device. Zero server-side processing, zero tracking.