๐ก๏ธ CSP Header Builder
Enabled directives are joined as "directive-name value; " separated by semicolons.
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'
Build a Content-Security-Policy (CSP) header โ which restricts the sources a browser is allowed to load scripts, styles, and other resources from โ by enabling directives (default-src, script-src, etc.) and entering allowed sources for each.
How to use
- Check the box for each directive you want to configure.
- Enter the allowed sources for it (e.g. 'self' https://example.com).
- The assembled CSP header string is shown automatically.
FAQ
What is Content-Security-Policy?
It's an HTTP response header that mitigates attacks like cross-site scripting (XSS) by restricting which sources the browser may load scripts, images, and other resources from.
What does 'self' mean?
It's a keyword that allows loading resources only from the same origin (scheme, host, and port) as the current site. CSP keyword values must always be wrapped in single quotes.
How do I use the generated header?
Set the displayed string as your web server or application's `Content-Security-Policy` response header. It's a good idea to test it first in report-only mode (Content-Security-Policy-Report-Only).