Skip to tool

CSP Builder

Build Content-Security-Policy headers for your website.

Output will appear here…

How to Use This Tool

  1. Fill in Default Src, Script Src, Style Src, Image Src, Font Src, and Connect Src. Each control is labeled; you do not need to paste a JSON blob.
  2. Click "Run" to run the tool in your browser.
  3. Read the result below the form and copy it if you need it in another app.

Learn More About CSP Builder

About CSP Builder

Build Content-Security-Policy headers. Configure directives for scripts, styles, images, and connections.

About

Build Content-Security-Policy headers. Configure directives for scripts, styles, images, and connections.
Build Content-Security-Policy headers. Configure directives for scripts, styles, images, and connections.
Runs in browser
Yes
No signup required
Yes

Examples

Strict policy: self only

Strict policy: self only
Input
{
  "defaultSrc": "'self'",
  "scriptSrc": "'self'",
  "styleSrc": "'self'",
  "imgSrc": "'self'",
  "fontSrc": "'self'",
  "connectSrc": "'self'"
}
Output
── Content-Security-Policy Header ──
default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'

── HTML meta tag ──
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'">

── Nginx ──
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'" always;

Permissive with CDN

Permissive with CDN
Input
{
  "defaultSrc": "'self'",
  "scriptSrc": "'self' cdn.jsdelivr.net cdn.example.com",
  "styleSrc": "'self' 'unsafe-inline'",
  "imgSrc": "'self' data: https:",
  "fontSrc": "'self' fonts.gstatic.com"
}
Output
── Content-Security-Policy Header ──
default-src 'self'; script-src 'self' cdn.jsdelivr.net cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' fonts.gstatic.com

── HTML meta tag ──
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' cdn.jsdelivr.net cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' fonts.gstatic.com">

── Nginx ──
add_header Content-Security-Policy "default-src 'self'; script-src 'self' cdn.jsdelivr.net cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' fonts.gstatic.com" always;

Minimal

Minimal
Input
{
  "defaultSrc": "'self'"
}
Output
── Content-Security-Policy Header ──
default-src 'self'

── HTML meta tag ──
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

── Nginx ──
add_header Content-Security-Policy "default-src 'self'" always;

Use Cases

  • Check csp builder values while you draft a page, spreadsheet, or config.
  • Fill Default Src, Script Src, Style Src and compare the result to a second source.
  • Keep sensitive inputs on-device — this page runs the calculation in the browser.

Frequently Asked Questions

Related Tools

Related tools: