CSP Builder & Validator

A Content-Security-Policy (CSP) header turns expected XSS, framing and injection attacks into browser-side blocks. It is a single header value made of one or more directives — default-src, script-src, style-src, img-src, frame-ancestors, and so on — each with a list of allowed source expressions. A wrong choice (for example allowing 'unsafe-inline' on script-src) reopens the very doors CSP is designed to close, so a builder that lets you see each directive's effect side-by-side is faster than hand-tuning a one-line header.

The builder follows the W3C CSP3 directive list and exposes 15 of the most-used directives with their default source sets. Each directive has a one-line description, click-to-add common sources ('self', 'none', https: scheme, 'strict-dynamic', etc.) and a button-grid of popular hostnames (CDNs, Google Fonts, Stripe, GA, GTM) so you do not have to memorize which origins your stack needs. Sources are quoted exactly the way the header parser expects — keywords with single quotes (e.g. 'self'), schemes plain (e.g. https:).

The generated header is rendered in four formats — Standard HTTP, Nginx add_header, Apache Header always set, and a Next.js middleware snippet — plus a Report-Only mode that switches the header name and adds an optional report-uri for collecting violations without enforcing them. A live Security Score surfaces the cost of every choice: 'unsafe-inline' (-10), 'unsafe-eval' (-15), http: scheme (-20 per directive), broad https: scheme (-5 per directive). The header leaves your browser only when you copy it; nothing is uploaded.