Add to favorites
Loading tool...

About CSP Builder

Build Content Security Policy (CSP) headers visually with an intuitive interface. Select directives, configure allowed sources, and generate ready-to-use policy headers for HTTP, meta tags, Nginx, and Apache. Protect your website against XSS attacks, clickjacking, and code injection vulnerabilities.

How to Use

  1. 1Choose a preset policy (Strict, Moderate, or Permissive)
  2. 2Toggle individual directives on/off
  3. 3Select common sources like self, https:, data:
  4. 4Add custom sources (domains, URLs)
  5. 5Copy the generated policy in your preferred format
  6. 6Test in browser console and adjust as needed

Key Features

  • Visual directive builder with toggle switches
  • Quick presets for common security levels
  • 15+ CSP directives supported
  • Common source value suggestions
  • Custom source URLs support
  • Multiple output formats (HTTP header, meta tag, Nginx, Apache)
  • One-click copy to clipboard
  • Real-time policy preview

Common Use Cases

Securing web applications against XSSImplementing browser security headersRestricting resource loading sourcesPreventing clickjacking attacksConfiguring strict content policiesTesting CSP before deployment

Frequently Asked Questions

What is CSP and why do I need it?

Content Security Policy is an HTTP header that tells browsers which sources of content to trust. It prevents XSS attacks by blocking inline scripts and unauthorized external resources.

Which preset should I start with?

Start with Strict for new projects and relax as needed. For existing sites, start with Permissive and tighten gradually while monitoring the browser console for blocked resources.

Why are my scripts blocked?

CSP blocks inline scripts by default. Either move scripts to external files and whitelist the source, or use nonces/hashes for inline scripts (not recommended).

Privacy First

All processing happens directly in your browser. Your files never leave your device and are never uploaded to any server.