CSP Generator

Content Security Policy (CSP) is a security standard that helps prevent cross-site scripting (XSS), clickjacking, and other code injection attacks. It works by specifying which sources of content (scripts, styles, images, fonts, etc.) are allowed to load on your web page. Browsers enforce these rules and block any content that violates the policy.

CSP is implemented as an HTTP response header (Content-Security-Policy) or a <meta> tag. It uses directives like script-src, style-src, and img-src to control where each type of resource can be loaded from. A well-configured CSP is one of the most effective defenses against XSS attacks, which remain one of the top web application vulnerabilities.

This CSP generator lets you build Content Security Policy headers interactively. Configure each directive with predefined sources, CDN domains, and custom values. The tool provides real-time security warnings, multiple output formats (HTTP header, meta tag, nginx, Apache, Express.js), and presets for common security levels. All configuration happens in your browser.

1. Start with a preset — Choose from "Strict (recommended)", "Moderate", "Permissive", or "API Only" presets to get a baseline policy. Strict is recommended for new applications.
2. Configure directives — Enable the directives your application needs (default-src, script-src, style-src, img-src, etc.) and add allowed sources for each. Click source badges to add them, or type custom domains.
3. Review security warnings — The tool warns you about unsafe configurations like 'unsafe-inline', 'unsafe-eval', or wildcard sources that weaken your policy.
4. Set additional options — Enable upgrade-insecure-requests to force HTTPS, block-all-mixed-content to block HTTP resources on HTTPS pages, and configure a report-uri endpoint.
5. Copy the output — Switch between output formats (HTTP header, meta tag, nginx, Apache, Express.js) and copy the configuration for your server or framework.

• 15 CSP directives — Configure default-src, script-src, style-src, img-src, font-src, connect-src, media-src, object-src, frame-src, child-src, worker-src, form-action, frame-ancestors, base-uri, and manifest-src.
• Security warnings — Real-time alerts when you use unsafe sources like 'unsafe-inline', 'unsafe-eval', or wildcard (*) that weaken your CSP protection.
• Multiple output formats — Generate CSP as an HTTP header, HTML meta tag, nginx directive, Apache header, or Express.js middleware — ready to paste into your configuration.
• Quick presets — Four security level presets (Strict, Moderate, Permissive, API Only) with sensible defaults for different use cases.
• Common CDN sources — One-click addition of popular CDN domains (cdnjs, jsDelivr, Google Fonts, unpkg, Google Analytics, GTM) to any directive.
• 100% client-side — Your CSP configuration is built entirely in your browser. No server communication, no data collection.

• XSS protection — Restrict script sources to prevent injected malicious scripts from executing, even if an attacker finds an injection point in your application.
• Compliance requirements — Meet security compliance standards (PCI DSS, SOC 2, OWASP) that require Content Security Policy headers as part of web application hardening.
• Third-party script control — Explicitly whitelist which third-party scripts (analytics, ads, widgets) can run on your pages, preventing unauthorized script loading.
• Clickjacking prevention — Use frame-ancestors to control which sites can embed your pages in iframes, replacing the deprecated X-Frame-Options header.
• Mixed content migration — Use upgrade-insecure-requests to automatically upgrade HTTP resource URLs to HTTPS during an HTTPS migration.