Developer tool

CSP Header Generator

Generate a Content-Security-Policy header from practical resource controls.

Runs in your browser

CSP Header Generatorworks locally

Operation

Allowed origins — one per line

Result

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

Test in Content-Security-Policy-Report-Only first. Frameworks, analytics, payments, embeds, workers, and inline scripts may require narrower additional sources or nonces.

How to use this csp header generator

Choose a policy preset, add the origins your site loads resources from, and review every directive before using the header.
Review the generated options. Check syntax, escaping, and edge cases against the source before using the result in a live project.
Check the output against the source, then copy or download the finished result.

About this csp header generator

The CSP Header Generator lets you generate a Content-Security-Policy header from practical resource controls. The controls cover only the inputs needed for the result.

You can also use it to change the controls to produce a different result.

Example

Start with a self-only policy, then add the exact CDN or font origins the page needs rather than allowing every source.

Common uses

→ generate a Content-Security-Policy header from practical resource controls
→ change the controls to produce a different result
→ copy a useful result into the project it belongs to