Security

Content Security Policy Builder

Build and review Content-Security-Policy headers with visual directives and security warnings.

Policy templates

Start from a common policy and customize each directive.

Directives

Enable the directives you need and define their allowed sources.

default-srcEnabled

Fallback source list for directives that are not defined explicitly.

'self'
script-srcEnabled

Controls JavaScript and other executable script resources.

'self'
style-srcEnabled

Controls stylesheets and inline style execution.

'self''unsafe-inline'
img-srcEnabled

Controls images, favicons and related visual resources.

'self'data:https:
connect-srcEnabled

Controls fetch, XHR, WebSocket and EventSource destinations.

'self'
font-srcEnabled

Controls downloadable font resources.

'self'
frame-srcDisabled

Controls URLs loaded inside frames and iframes.

object-srcEnabled

Controls plugin resources such as object and embed elements.

'none'
media-srcDisabled

Controls audio, video and track resources.

worker-srcDisabled

Controls Worker, SharedWorker and Service Worker scripts.

manifest-srcDisabled

Controls web app manifest resources.

base-uriEnabled

Restricts URLs that may appear in a document base element.

'self'
form-actionEnabled

Restricts destinations used by HTML form submissions.

'self'
frame-ancestorsEnabled

Controls which sites may embed the current page.

'none'

Policy options

Enable additional CSP directives that do not accept source lists.

Policy analysis

Review combinations that may weaken or invalidate the policy.

warningstyle-src

Inline execution is allowed

Consider replacing 'unsafe-inline' with nonces or hashes where possible.

Generated policy

Copy the CSP value, a complete HTTP header or an HTML meta tag.

Header value
default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self'; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests
HTTP header
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self'; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests
HTML meta tag
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self'; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests">

CSP generation and validation run locally inside your browser. Test the generated policy in report-only mode before enforcing it on a production site.

About this tool

What is Content Security Policy Builder?

Content Security Policy Builder helps create and review CSP headers through a visual directive editor. Add allowed sources, nonces and hashes, generate HTTP and meta-tag output and identify combinations that may weaken the policy.

Features

Built for fast developer workflows

  • Enable and disable common CSP directives.
  • Configure sources for scripts, styles, images, connections and frames.
  • Add custom origins, schemes, nonces and hashes.
  • Detect invalid combinations involving 'none'.
  • Warn about 'unsafe-inline', 'unsafe-eval' and wildcard sources.
  • Validate basic nonce and hash syntax.
  • Generate a complete Content-Security-Policy header.
  • Generate an HTML meta tag.
  • Enable upgrade-insecure-requests and block-all-mixed-content.
  • Load common CSP templates.
  • Copy generated policy values.
  • Build and analyze policies locally in your browser.

Frequently asked questions

Questions about Content Security Policy Builder

What is Content Security Policy?

Content Security Policy is a browser security mechanism that restricts which resources a page may load or execute.

Why is 'unsafe-inline' discouraged?

It allows inline scripts or styles and weakens CSP protections. Nonces or hashes are usually safer alternatives.

What does frame-ancestors control?

It determines which sites may embed the current page in a frame or iframe.

Can I use a meta tag instead of an HTTP header?

Some CSP directives can be delivered through a meta tag, but an HTTP header is generally preferred and supports the complete policy more reliably.

Should I test a policy before enforcing it?

Yes. Use Content-Security-Policy-Report-Only first to detect blocked resources before enforcing a production policy.

Does this tool test the policy against my website?

No. It builds and analyzes the policy locally but does not crawl or execute your website.

Related tools