Content Security Policy (CSP) Builder & Validator

Visually build, audit, and generate bulletproof CSP HTTP response headers to protect against XSS and clickjacking.

Add SaaS Whitelist:
Generated HTTP Header
Content-Security-Policy: upgrade-insecure-requests; default-src 'self' https:; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' https: data: blob:; connect-src 'self' https:; font-src 'self' data: https://fonts.gstatic.com; frame-ancestors 'self'; object-src 'none'; base-uri 'self'; form-action 'self'
default-srcFallback for other fetch directives
script-srcValid sources for JavaScript execution
style-srcValid sources for stylesheets and inline CSS
img-srcValid sources of images and favicons
connect-srcRestricts URLs loaded using fetch, XHR, WebSocket
font-srcValid sources for web fonts
frame-ancestorsWho can embed this page in iframe/frame (Clickjacking defense)
object-srcRestricts Flash, Java and legacy plugins
base-uriRestricts URLs for <base> tags
form-actionRestricts valid endpoints for <form> submissions

What is a Content Security Policy (CSP)?

Content Security Policy (CSP) is an HTTP response security header that restricts the resources (JavaScript, CSS, Images, Frames, WebSockets) a browser is allowed to load for a given web page. By declaring approved sources, CSP serves as the primary defense against Cross-Site Scripting (XSS), data injection, and clickjacking attacks.

Core CSP Directives Explained

  • default-src: Acts as the baseline fallback for all fetch directives if a specific directive (like script-src or connect-src) is not declared.
  • script-src: Governs where JavaScript files can be downloaded from and whether inline <script> tags are permitted. Avoid 'unsafe-inline' and 'unsafe-eval' in production.
  • frame-ancestors: Modern replacement for the legacy X-Frame-Options header, restricting which external domains are allowed to embed your page inside an <iframe>.
  • upgrade-insecure-requests: Automatically rewrites all legacy http:// URLs on the page to secure https:// before initiating network requests.

Testing with Report-Only Mode

When first rolling out a CSP in production, deploy with the Content-Security-Policy-Report-Only header. This logs policy violations to your reporting endpoint without breaking site functionality for legitimate users.