Skip to main content
L
Loopaloo
Buy Us a Coffee
All ToolsImage ProcessingAudio ProcessingVideo ProcessingDocument & TextPDF ToolsCSV & Data AnalysisConverters & EncodersWeb ToolsMath & ScienceGames
Guides & BlogAboutContact
Buy Us a Coffee
L
Loopaloo

Free online tools for developers, designers, and content creators. All processing happens entirely in your browser - your files never leave your device. No uploads, no accounts, complete privacy.

support@loopaloo.com

Tool Categories

  • Image Tools
  • Audio Tools
  • Video Tools
  • Document & Text
  • PDF Tools
  • CSV & Data
  • Converters
  • Web Tools
  • Math & Science
  • Games

Company

  • About Us
  • Contact
  • Blog
  • FAQ

Legal

  • Privacy Policy
  • Terms of Service
  • Disclaimer

Support

Buy Us a Coffee

© 2026 Loopaloo. All rights reserved. Built with privacy in mind.

Privacy|Terms|Disclaimer
  1. Home
  2. Web Tools
  3. CSP Builder
Add to favorites

Loading tool...

You might also like

SRI Hash Generator

Generate Subresource Integrity (SRI) hashes for scripts and stylesheets. Protect against CDN compromise and tampering

HTTP Status Codes Reference

Complete HTTP status code reference with descriptions. Search all 1xx, 2xx, 3xx, 4xx, and 5xx status codes with explanations

Certificate Decoder

Decode and analyze PEM-encoded X.509 SSL/TLS certificates. View subject, issuer, validity, extensions, and fingerprints

Build CSP headers without the headache

Content Security Policy headers are powerful but notoriously tricky to get right. One wrong directive and your site breaks; one missing directive and you're open to XSS. This visual builder lets you construct a CSP directive by directive, test it against your use cases, and export the finished header.

Getting Started

  1. 1Start with a preset policy (strict, moderate, or permissive) or build from scratch.
  2. 2Configure each directive: script-src, style-src, img-src, font-src, connect-src, etc.
  3. 3Add sources ('self', specific domains, nonces, hashes) to each directive.
  4. 4Review warnings about insecure choices like 'unsafe-eval'.
  5. 5Copy the complete Content-Security-Policy header value.

What You Get

  • Visual directive-by-directive builder
  • Preset templates (strict, moderate, permissive)
  • Security warnings for risky sources
  • Report-only mode toggle
  • Nonce and hash source support
  • Human-readable policy summary
  • Copy-ready header value
  • Directive documentation inline

The Details

CSP works by whitelisting which sources can provide scripts, styles, images, fonts, frames, and other resources. Each directive (script-src, style-src, img-src, etc.) controls a specific resource type. This builder walks you through each directive, explains what it controls, and lets you add sources like 'self', specific domains, 'nonce-…', and 'unsafe-inline' with clear warnings about the security implications of each choice.

Perfect For

  • Hardening a production site

    Build a strict CSP that blocks inline scripts and unauthorized resource loading to prevent XSS attacks.

  • Migrating to CSP gradually

    Start with report-only mode to identify violations before enforcing the policy.

  • Third-party widget integration

    Configure frame-src and script-src to allow specific embedded widgets while blocking everything else.

  • Compliance requirements

    Generate CSP headers that satisfy security standards like PCI DSS or SOC 2.

  • Developer onboarding

    Help team members understand what each CSP directive does using the inline documentation.

Examples

  • Lock down a static site

    Set default-src to 'self', add your CDN domain to script-src and style-src, and block everything else.

  • Allow Google Analytics

    Add *.google-analytics.com and *.googletagmanager.com to script-src and connect-src.

Frequently Asked Questions

What does 'unsafe-inline' do and why is it bad?

It allows inline <script> and <style> tags to execute, which largely defeats the purpose of CSP since injected scripts would also run. Use nonces or hashes instead.

What's report-only mode?

Content-Security-Policy-Report-Only logs violations without blocking anything, letting you test a policy in production before enforcing it.

How do I use nonces with CSP?

Generate a unique nonce per page load, add it to both the CSP header ('nonce-abc123') and the script tag (nonce="abc123"). Each page load needs a fresh nonce.

Will CSP break my existing site?

Likely, if you start strict. Use report-only mode first to identify what your site loads and from where, then build the allow list accordingly.

Privacy First

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