Content Security Policy Generator

What the CSP Generator Does

The Content Security Policy Generator builds a Content-Security-Policy response header visually. Instead of hand writing a long, error prone string, you toggle the directives you need, add sources such as 'self', https:, or your CDN hostname, and the tool assembles a valid policy in real time. When the policy looks right, copy it as an HTTP header or as an HTML meta tag and drop it into your server configuration or page template.

Content Security Policy is the browser's main defense against cross site scripting and unwanted resource loading. A well tuned policy tells the browser exactly which scripts, styles, images, fonts, and connections a page may use, and blocks everything else. This generator keeps the syntax side of that job out of your way so you can focus on the hardening decisions themselves.

How to Use the CSP Generator

1. Start with default-src, the fallback for every resource type.
2. Enable the directives your site needs, such as script-src, style-src, and img-src.
3. Add sources to each directive from the common list or type custom hosts and schemes.
4. Optionally generate a nonce and add it to script-src or style-src for inline blocks.
5. Choose the HTTP Header or HTML Meta Tag output and copy the generated code.

Understanding the Common Directives

• default-src: the fallback policy for any fetch directive you do not set explicitly. Keeping it restrictive, for example 'self', gives you a safe baseline.
• script-src: which scripts may execute. This is the most important directive for XSS protection.
• style-src: which stylesheets may load. Inline style attributes often force 'unsafe-inline' here.
• img-src, font-src, media-src: restrict images, fonts, and audio or video to trusted origins.
• connect-src: limits fetch, XMLHttpRequest, and WebSocket destinations, which controls where your page can send data.
• frame-ancestors: who may embed your page. This replaces the older X-Frame-Options header and is ignored when delivered in a meta tag.
• base-uri and form-action: close common bypasses by pinning the base element and form submission targets.
• upgrade-insecure-requests: rewrites HTTP subresource requests to HTTPS, useful during a migration.

Header or Meta Tag?

The HTTP header is the preferred delivery method. It applies to every resource type, is set before the page is parsed, and supports directives like frame-ancestors that browsers ignore in meta tags. Use the header from your web server or application framework, for example in Nginx, Apache, or a middleware layer.

The meta tag is a fallback for static hosts where you cannot set response headers. It must appear in the <head> before any resource loads, and it cannot report violations the same way the header can. If you can set headers, prefer them.

Nonces and Hashes

A nonce is a random, single use value that allows one specific inline script or style. Generate a nonce in this tool, add it to script-src or style-src, and mark the matching tags in your HTML with the same value, for example <script nonce="...">. Nonces must be unique for every response and generated on the server, never hard coded.

Hashes work for static inline scripts that never change. Add 'sha256-...' as a custom source after computing the hash of the exact inline content. Where nonces are not practical, hashes avoid the need for 'unsafe-inline'.

Rolling a Policy Out Safely

• Start restrictive, then loosen only where something breaks.
• Watch the browser console during testing. CSP violations are logged there with the blocked resource.
• Avoid 'unsafe-inline' and 'unsafe-eval' in script-src unless there is no alternative.
• Test on staging first, since a strict policy can silently break third party widgets.
• Keep reporting endpoints in mind if you want visibility into violations in production.

Inspecting the headers of existing sites is a good way to learn. Paste a captured response into the API Header Parser to see every header explained, generate simple auth headers with the Basic Auth Generator, and decode tokens with the JWT Decoder & Verifier.