๐ก๏ธ 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.
How the calculation works
Content Security Policy (CSP), a W3C specification, is an HTTP header that tells the browser which sources a page may load scripts, images and other content from. Even if a malicious script gets into the page, for example through cross-site scripting (XSS), it will not run if its source is not allowed. The header is a list of "directive value" pairs joined with "; ". This tool joins the ticked directives that have a value. Main directives default-src: fallback for types not specified by other directives script-src: JavaScript style-src: CSS img-src: images connect-src: fetch, WebSocket and other connections frame-src: pages embedded in iframes object-src: plugins ('none' is recommended) base-uri: URLs allowed in the <base> tag form-action: where forms can be submitted
Worked example
Header generated with the defaults Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' 'self' means the page's own origin (same scheme, host and port). Example with Google Fonts style-src 'self' https://fonts.googleapis.com; font-src https://fonts.gstatic.com
Things to be aware of
- Turning a policy on in production straight away can block scripts you need. Start with the Content-Security-Policy-Report-Only header to collect violation reports, and switch over once nothing breaks.
- Allowing 'unsafe-inline' or 'unsafe-eval' greatly weakens the protection against XSS.
- Keywords such as 'self' and 'none' must be in single quotes; URLs must not.
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).