style-srcInline execution is allowed
Consider replacing 'unsafe-inline' with nonces or hashes where possible.
Security
Build and review Content-Security-Policy headers with visual directives and security warnings.
Start from a common policy and customize each directive.
Enable the directives you need and define their allowed sources.
default-srcEnabledFallback source list for directives that are not defined explicitly.
'self'script-srcEnabledControls JavaScript and other executable script resources.
'self'style-srcEnabledControls stylesheets and inline style execution.
'self''unsafe-inline'img-srcEnabledControls images, favicons and related visual resources.
'self'data:https:connect-srcEnabledControls fetch, XHR, WebSocket and EventSource destinations.
'self'font-srcEnabledControls downloadable font resources.
'self'frame-srcDisabledControls URLs loaded inside frames and iframes.
object-srcEnabledControls plugin resources such as object and embed elements.
'none'media-srcDisabledControls audio, video and track resources.
worker-srcDisabledControls Worker, SharedWorker and Service Worker scripts.
manifest-srcDisabledControls web app manifest resources.
base-uriEnabledRestricts URLs that may appear in a document base element.
'self'form-actionEnabledRestricts destinations used by HTML form submissions.
'self'frame-ancestorsEnabledControls which sites may embed the current page.
'none'Enable additional CSP directives that do not accept source lists.
Review combinations that may weaken or invalidate the policy.
style-srcConsider replacing 'unsafe-inline' with nonces or hashes where possible.
Copy the CSP value, a complete HTTP header or an HTML meta tag.
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-requestsContent-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<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
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
Frequently asked questions
Content Security Policy is a browser security mechanism that restricts which resources a page may load or execute.
It allows inline scripts or styles and weakens CSP protections. Nonces or hashes are usually safer alternatives.
It determines which sites may embed the current page in a frame or iframe.
Some CSP directives can be delivered through a meta tag, but an HTTP header is generally preferred and supports the complete policy more reliably.
Yes. Use Content-Security-Policy-Report-Only first to detect blocked resources before enforcing a production policy.
No. It builds and analyzes the policy locally but does not crawl or execute your website.
Related tools