CSP Generator

Generate secure Content Security Policy headers for your Next.js application. Protect against XSS attacks with smart presets for popular services.

Generate CSPLearn More

Configure Your Security Policy

Select presets for common services or customize individual directives to generate your CSP header configuration.

Quick Config

Choose a security level to automatically configure all directives.
🔒Strict (Production)
Maximum security. Block everything except same-origin.
⚖️Recommended (Balanced)
Good balance between security and functionality.
🔓Permissive (Development)
Relaxed policy for development. Not recommended for production.
✏️Custom
Start fresh or keep your current configuration.

Smart Defaults

Automatically append trusted domains for common services.
Google Analytics 4
Allows Google Tag Manager and GA4 scripts.
Vercel Analytics
Required for Vercel Web Vitals tracking.
Stripe JS
For Stripe Elements and payment processing.
Google Fonts
Allows loading fonts from Google Fonts.
Cloudflare CDN
Common CDN for libraries and assets.
YouTube Embeds
Allows embedding YouTube videos.

Directives Configuration

default-src
script-src
style-src
img-src
connect-src
font-src
frame-src
object-src
base-uri
frame-ancestors

Policy Preview

default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'; font-src 'self'; frame-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none';

Understanding Content Security Policy

Key concepts for protecting your application

XSS Protection

CSP prevents Cross-Site Scripting attacks by controlling which scripts can execute on your pages, blocking malicious code injection.

Directive Control

Control sources for scripts, styles, images, fonts, and more through specific directives like script-src, style-src, and img-src.

Smart Presets

Our generator includes presets for Google Analytics, Vercel, Stripe, and other common services to get you started quickly.

Frequently Asked Questions

Common questions about Content Security Policy

What is Content Security Policy?

Content Security Policy (CSP) is a security header that helps prevent XSS attacks by controlling which resources can be loaded and executed on your website.

How do I implement CSP headers?

You can implement CSP headers through HTTP response headers, meta tags, or in Next.js through next.config.js. Our generator provides the code for Next.js implementation.

Will CSP break my application?

If configured incorrectly, CSP can block legitimate resources. Start with report-only mode to test your policy before enforcing it. Our generator includes common presets for popular services.

What are CSP nonces?

Nonces are unique, random strings that allow specific inline scripts and styles to execute while blocking others. They are regenerated on each page load for security.