CSP Generator
Build a Content-Security-Policy (CSP) header by picking common directives and allowed sources, with the final header assembled instantly.
'self', 'none', 'unsafe-inline', or a full origin like https://cdn.example.com. Only directives you fill in are included.Content-Security-Policy Header
How to Use the CSP Generator
A Content-Security-Policy (CSP) is an HTTP response header that tells the browser which sources of content — scripts, styles, images, fonts, and more — are allowed to load on your page, which helps prevent cross-site scripting (XSS) and other injection attacks. Fill in a space-separated list of allowed sources for whichever directives apply to your site; only directives you actually fill in are included in the final header. default-src sets the fallback policy for any resource type not covered by a more specific directive, script-src controls which sources JavaScript can be loaded from, and img-src controls where images may load from.
Example
Setting default-src to 'self' and script-src to 'self' https://cdn.example.com produces:default-src 'self'; script-src 'self' https://cdn.example.com;
Common Use Cases
- Building a starting CSP header for a new web application.
- Restricting which external domains can load scripts, styles, or images on a page.
- Documenting an existing security policy in a readable, editable format.
FAQs
- What does 'self' mean? It restricts loading to the same origin (scheme, host, and port) as the page itself, which is the most common and safest baseline value for most directives.
- What happens if I leave a directive blank? Blank directives are simply left out of the generated header entirely — the browser then falls back to whatever
default-srcspecifies for that resource type, or allows it if no default is set. - Where do I put the generated header? Set it as the value of the
Content-Security-PolicyHTTP response header from your server, or as a<meta http-equiv="Content-Security-Policy">tag in your page's<head>if you can't control response headers directly.