Roll out CSP without guessing
Inventory resource origins, start with observations, then enforce a policy your application can actually satisfy.
Start from the application’s real resources
Content Security Policy tells a browser which resource sources and execution behaviors a document allows. A strict preset is a starting point, not a drop-in security guarantee. List where scripts, styles, fonts, images, frames and connections actually come from before adding permissions.
default-src supplies fallback restrictions for many fetch directives, but it does not replace base-uri, form-action or frame-ancestors. object-src none and frame-ancestors none are useful explicit restrictions when your application does not require plugins or embedding.
Observe before enforcing
Content-Security-Policy-Report-Only can surface violations without blocking resources. This builder generates that header by default. Reporting delivery still requires your own reporting endpoint and browser-compatible configuration; the builder does not host a report collector.
Use browser developer tools and your own reports to identify intended resources, then reduce permissions. A wildcard, data: source or unsafe-eval grants a different kind of trust than a specific origin. Avoid broadening a policy solely to make warnings disappear.
Content-Security-Policy-Report-Only: default-src 'self'; object-src 'none'; base-uri 'self'
Integrate nonces and hashes correctly
A nonce must be unpredictable, freshly generated for each response and attached to the authorized elements and matching header. Reusing a static nonce from a generator defeats the purpose. This builder rejects pasted nonce values rather than presenting a reusable secret.
A hash must match the exact inline bytes. Whitespace changes can invalidate it. Test your final production build and framework behavior after each policy change, including copy controls, downloads and local previews.
Start with a report-only policy
Observe browser violations before enforcing resource restrictions on an existing application.
Input
default-src 'self' object-src 'none' base-uri 'self'
Expected output
Content-Security-Policy-Report-Only: default-src 'self'; object-src 'none'; base-uri 'self'
Use the report-only header while inventorying required origins, then test enforcement. The builder does not host a report endpoint. Nonces must be generated freshly per response; copying a static nonce or adding unsafe-inline broadly is not a substitute.
Keep the references close
Primary documentation supports the technical details above. Check it alongside the behavior of your own runtime and deployment.
Open CSP headers →