CSP Generator

Build a Content-Security-Policy header by configuring directives, sources, and nonces. Export for any server or framework.

Quick Presets
Directives
Nonces

Add nonce values to allow specific inline scripts or styles. They will be appended to script-src and style-src.

Additional Options
report-uri (optional)

CSP Output

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'
Raw Policy Value

default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'

About the CSP Generator

A Content Security Policy (CSP) is an HTTP response header that tells the browser which content sources are trusted. It is one of the most effective defenses against Cross-Site Scripting (XSS) and data injection attacks. This free CSP generator lets you configure all directives visually and export the result for any server environment.

  • Configure 15+ fetch directives including script-src, style-src, img-src, and more
  • Append source values with one click using the quick-insert preset buttons
  • Add nonce values for allowlisting specific inline scripts or styles
  • Toggle upgrade-insecure-requests and block-all-mixed-content
  • Set a report-uri endpoint to receive CSP violation reports
  • Export as a raw header, HTML meta tag, Nginx config, Apache directive, Node.js snippet, or PHP statement
  • Switch to Report-Only mode to test your policy without blocking anything

How to Generate a CSP Header

  1. 1

    Choose a preset

    Pick Strict, Moderate, or Permissive to load sensible defaults, or enable directives manually.

  2. 2

    Configure each directive

    Check the box to enable a directive, then type or click source keywords to build the value. Use the quick-insert buttons for common tokens like 'self', 'none', https:, etc.

  3. 3

    Add nonces (optional)

    If you use inline scripts or styles with a nonce attribute, add the nonce values here. They will be automatically inserted into script-src and style-src.

  4. 4

    Select an output format

    Choose from Raw Header, HTML Meta Tag, Nginx, Apache, Node.js, or PHP. The output updates instantly.

  5. 5

    Copy or Download

    Click Copy to copy the snippet to your clipboard, or Download to save it as a text file. Paste it into your server configuration or codebase.

Tip: Start with Report-Only mode to observe violations without breaking your site. Once you are confident your policy is correct, switch to enforcement mode by removing the Report-Only toggle.

Common Use Cases

Preventing XSS Attacks

  • • Restrict script-src to 'self' to block injected scripts
  • • Remove 'unsafe-inline' and 'unsafe-eval' from all directives
  • • Use nonces to allow only trusted inline scripts

Controlling Third-Party Resources

  • • Allow Google Fonts via font-src 'self' fonts.gstatic.com
  • • Permit a CDN domain in script-src and style-src
  • • Restrict connect-src to your API domain only

Blocking Clickjacking

  • • Set frame-ancestors 'none' to prevent embedding in iframes
  • • Use frame-ancestors 'self' to allow same-origin frames only
  • • Combine with X-Frame-Options for older browser coverage

Enforcing HTTPS

  • • Enable upgrade-insecure-requests to rewrite HTTP URLs to HTTPS
  • • Add block-all-mixed-content to block HTTP resources on HTTPS pages
  • • Combine with HSTS for full transport security

CSP for SPAs (React, Vue, Svelte)

  • • Use script-src 'self' when all JS is bundled and served from the same origin
  • • Avoid 'unsafe-eval' — most modern bundlers do not need it
  • • Add your API base URL to connect-src for fetch requests

Testing Without Breaking Production

  • • Enable Report-Only to log violations without enforcing the policy
  • • Set a report-uri to an endpoint like report-uri.com or your own collector
  • • Analyze reports and adjust directives before switching to enforcement

Frequently Asked Questions

What is a Content Security Policy?

A Content Security Policy (CSP) is an HTTP response header that instructs the browser to only load resources from trusted sources. It significantly reduces the risk of XSS, clickjacking, and data injection attacks by declaring exactly which origins are allowed for scripts, styles, images, and other resource types.

What does 'self' mean in a CSP?

'self' refers to the origin of the document — the same scheme, host, and port. For example, if your page is served from https://example.com, then 'self' allows resources from https://example.com only, not from subdomains or other origins.

Should I use 'unsafe-inline'?

Avoid it if possible. 'unsafe-inline' allows inline scripts and styles, which are a common XSS vector. Instead, move inline code to external files, or use nonces ('nonce-xyz') to explicitly allowlist specific inline blocks. Nonces must be unique per request and generated server-side.

What is Content-Security-Policy-Report-Only?

This header sends the same policy as Content-Security-Policy but does not enforce it — the browser only reports violations to the report-uri endpoint without blocking anything. It is the safest way to test a new policy in production without risking site breakage.

Can I set a CSP via an HTML meta tag?

Yes, for most directives. Add <meta http-equiv="Content-Security-Policy" content="..."> inside your <head>. However, some directives like frame-ancestors and report-uri are not supported via meta tags — they only work as HTTP headers.

What is default-src used for?

default-src is the fallback directive for all fetch-type directives (script-src, style-src, img-src, etc.) that are not explicitly set. Setting default-src 'self' is a safe starting point that restricts all resources to the same origin unless overridden by a more specific directive.

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

No data leaves your browser. All CSP generation happens entirely client-side using JavaScript. Your configuration and generated output are never uploaded, stored, or transmitted anywhere.