I built a visual CSP header generator (no more hand-editing Content-Security-Policy)

#security #webdev #tools #javascript

What I built

Added CSP Generator to devnestio — a browser-only tool for building Content Security Policy headers visually.

👉 https://csp-generator.pages.dev

The problem with hand-writing CSP

Content Security Policy strings look like this:

Content-Security-Policy: default-src 'none'; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https:; object-src 'none'; frame-ancestors 'none'; upgrade-insecure-requests

One typo — a missing quote around 'self', a wrong directive name — and your site breaks (or worse, the CSP silently does nothing). Getting the right combination of directives and sources for your specific use case requires knowing what each directive does.

Features

16 directives covered: default-src, script-src, style-src, img-src, font-src, connect-src, frame-src, media-src, object-src, frame-ancestors, form-action, base-uri, upgrade-insecure-requests, block-all-mixed-content, report-uri, report-to
Toggle each directive on/off
Click to add preset keyword values ('self', 'none', 'unsafe-inline', 'strict-dynamic') and common hosts (CDNs, Google Fonts, YouTube, etc.)
Custom source input — add any URL or source expression
Unsafe warning — highlights when 'unsafe-inline' or 'unsafe-eval' is present
4 quick presets: Strict, Moderate, SPA/CDN, API Only
Syntax-highlighted output with one-click copy (full header or value only)
Usage examples — HTTP header format and HTML meta tag format
Zero dependencies, single HTML file

Presets

Strict — default-src 'none' with explicit allowlists per resource type. No unsafe-inline anywhere. Good baseline for new projects.

Moderate — default-src 'self' with unsafe-inline in script-src and style-src (for legacy code). More permissive but still blocks third-party scripts by default.

SPA / CDN — Allows jsdelivr, unpkg, Google Fonts. Good starting point for apps that use CDN-hosted libraries.

API Only — Locks down everything except connect-src. For pure API endpoints that serve no HTML.