DEV3 Technologies home

Developer tool

CSP Header Generator

Build a Content-Security-Policy header with presets, source checkboxes and warnings, then copy it as an HTTP header, meta tag, nginx, Apache or Next.js config.

Free, no sign-up. Runs in your browser; nothing is uploaded.

Start from a preset

Directives

default-src
script-src
style-src
img-src
font-src
connect-src
media-src
frame-src
worker-src
object-src
base-uri
form-action
frame-ancestors

Options

Your policy

Format
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; upgrade-insecure-requests

How to use the csp header generator

Build a policy

  1. Start from a preset: strict (same origin only), a typical website, or a site with Google Analytics and YouTube.
  2. For each directive, tick the keywords you need and type any extra hosts, such as https://cdn.example.com.
  3. Read the warnings. They flag risky choices such as 'unsafe-inline', wildcards and missing directives.
  4. Pick the output you need: an HTTP header, a meta tag, an nginx or Apache line, or a Next.js headers() block.

What the main directives control

  • default-src is the fallback for any directive you do not set.
  • script-src and style-src control JavaScript and CSS. Scripts matter most.
  • img-src, font-src, media-src and connect-src control images, fonts, audio or video, and fetch, XHR and WebSocket requests.
  • frame-src controls what you embed, and frame-ancestors controls who may embed you.
  • object-src 'none' blocks old plugins, and base-uri 'self' stops injected base tags.
  • form-action restricts where forms can submit.

Rolling it out safely

  1. Deploy as report-only and browse every page type, including checkout and the admin area.
  2. Fix or allow the violations you find. Third-party widgets, fonts and analytics are the usual surprises.
  3. Switch to enforcing, keeping a short rollback plan.
  4. Re-check after adding any new third-party script.

Remember

CSP is a second line of defence. It does not replace escaping output and validating input. Test the final header with your browser's developer tools, which list each blocked request and the rule that blocked it.

Frequently asked questions

What is a Content-Security-Policy?

It is a response header that tells the browser which sources of scripts, styles, images and frames the page may use. If an attacker injects a script from an unlisted source, the browser refuses to run it.

Should I start in report-only mode?

Yes. Content-Security-Policy-Report-Only logs violations without blocking anything, so you can find what your site loads before you enforce the policy. Add a report URI to collect them.

Why avoid unsafe-inline?

It allows any inline script, including injected ones, which removes most of the protection. Use nonces or hashes for the inline scripts you need, and move styles to files where possible.

Why is frame-ancestors missing from the meta tag?

Browsers ignore frame-ancestors, report-uri and the sandbox directive when a policy is delivered through a meta tag. Use the HTTP header to get them.

Is my policy uploaded?

No. It is built in your browser.