How to Build a Content Security Policy Header
Step-by-step guide to constructing a Content-Security-Policy header using the CSP Builder tool.
Tool Used
CSP Builder
Enable the directives you need
At minimum enable default-src and script-src. Each directive you toggle on adds a corresponding clause to the generated header value.
Add sources with quick-add buttons
For each directive, use the quick-add buttons to insert common sources: 'self' for same-origin resources, specific domains for CDNs like cdn.jsdelivr.net.
Avoid unsafe-inline and unsafe-eval
These keywords allow inline scripts and dynamic code execution, which defeats most XSS protections. Refactor inline scripts to external files and use nonces or hashes if inline styles are unavoidable.
Enable upgrade-insecure-requests
Toggle this option to add the upgrade-insecure-requests directive, which instructs browsers to load all resources over HTTPS even if they are referenced with http:// URLs.
Copy and deploy
Copy the header value to add to your server config (Nginx, Apache, or CDN), or copy the meta tag equivalent to embed directly in your HTML's <head> element.
All done!
You are ready to use CSP Builder like a pro.