Content Security Policy builder

Fill in the sources for each directive, start from a preset if you like, and copy the policy as an HTTP header or a meta tag. Keywords such as self are quoted for you, and the tool points out risky choices like unsafe-inline, wildcards and missing base-uri or object-src.

Start from

default-src

script-src

style-src

img-src

connect-src

font-src

frame-src

frame-ancestors

form-action

base-uri

object-src

Separate sources with spaces. Keywords: 'self', 'none', 'unsafe-inline', 'unsafe-eval', 'strict-dynamic', nonces ('nonce-…') and hashes ('sha256-…'). Hosts: https://cdn.example.com, *.example.com, schemes: https: data:.

upgrade-insecure-requests

report-uri

report-to (group name)

Report-Only mode (test without blocking)

Warnings

img-src allows a whole scheme (https: or http:), so any host on it is trusted.

HTTP header

Content-Security-Policy: default-src 'self'; img-src 'self' data: https:; frame-ancestors 'self'; base-uri 'self'; object-src 'none'; upgrade-insecure-requests

Meta tag

<meta http-equiv="Content-Security-Policy" content="default-src &#39;self&#39;; img-src &#39;self&#39; data: https:; base-uri &#39;self&#39;; object-src &#39;none&#39;; upgrade-insecure-requests">

A meta tag cannot carry frame-ancestors. They are left out here and work only in an HTTP header.

Runs in your browser: nothing you enter is sent anywhere.

How to use it

Pick a preset or start empty, then type the sources for each directive.
Read the warnings and fix what applies to your site.
Copy the header into your web server or application config, or the meta tag into your page’s <head>.

The directives

default-src: fallback for any fetch directive you do not set.
script-src, style-src, img-src, connect-src, font-src, frame-src: where scripts, styles, images, fetch/XHR/WebSocket connections, fonts and frames may come from.
frame-ancestors: who may embed your page in a frame. Header only.
form-action: where forms may submit. base-uri: allowed values for <base>. object-src: plugins.
upgrade-insecure-requests: asks the browser to load http resources over https.
report-uri and report-to: where violation reports are sent. Header only.

Example

The Strict preset gives default-src 'self'; script-src 'nonce-…' 'strict-dynamic'; object-src 'none'; base-uri 'none'; form-action 'self'; frame-ancestors 'none'. Scripts need the nonce attribute and scripts they load are trusted by ‘strict-dynamic’.

Tips

Test with Report-Only before enforcing.
Avoid wildcards and whole-scheme sources in script-src.
Hash a static inline script with SHA-256 and list it as 'sha256-…' instead of using unsafe-inline.

Frequently asked questions

What does a Content Security Policy do?

It tells the browser which sources a page may load scripts, styles, images, frames and other resources from. If an attacker injects a script tag, the browser refuses it unless the policy allows it.

Should I use the header or the meta tag?

Prefer the HTTP header. A meta tag works for most fetch directives, but it cannot use frame-ancestors, report-uri, report-to or sandbox, it cannot be Report-Only, and it only applies after the browser has parsed it.

What is a nonce?

A nonce is a random value you put both in the policy ('nonce-abc123') and in each allowed script tag (nonce="abc123"). It must be new for every response, otherwise attackers can reuse it.

How do I roll out a policy without breaking my site?

Start with Report-Only mode and a report-uri or report-to endpoint, watch what would be blocked, adjust, and then switch to enforcement by using the normal Content-Security-Policy header.

Why does the tool warn about unsafe-inline?

With unsafe-inline in script-src, any injected inline script runs, which removes the main benefit of a CSP. Replace inline scripts with files, or allow them with nonces or hashes.

More in Developer

All tools in this category: Developer ·Updated November 3, 2026