Content-Security-Policy Generator: Build a CSP Header Directive by Directive
Set where scripts, styles, images, fonts, frames and API calls are allowed to load from, and get a clean, ready-to-ship Content-Security-Policy header: with an explanation of every directive and a strictness score so you know exactly how much XSS protection you're getting.
What is the csp generator?
The CSP Generator builds a Content-Security-Policy header from a per-directive form, setting trusted sources for script-src, style-src, img-src, connect-src, font-src and frame-ancestors with correct quoting. A live strictness meter scores XSS protection and explains each directive. Free and fully local, so internal hostnames and CDN URLs never leave the tab.
The GigAI CSP Generator turns the browser's strictest, and most fiddly, security header into a form anyone can drive. Instead of hand-writing `default-src 'self'; script-src 'self' https://cdn.example.com; …` and hoping the quoting is right, you fill in each directive from its own row: pick the trusted keyword sources (self, none, unsafe-inline, unsafe-eval, strict-dynamic), add the hosts and CDNs you actually use, and flag the common extras like `upgrade-insecure-requests` and `frame-ancestors`. As you type, the tool assembles the header value with correctly quoted keyword tokens, plain host tokens left untouched, and empty directives dropped, then shows the finished `Content-Security-Policy: …` line ready to paste into Nginx, Apache, a `<meta http-equiv>` tag or your framework's headers config. A live strictness meter reads the policy back and tells you, in plain terms, why it scores the way it does, an `unsafe-inline` in `script-src` drags it down, a missing `default-src` fallback is flagged, and a wildcard `*` is called out as effectively no protection at all. Every directive comes with a one-line explanation of what it controls, so you learn the model while you build. Because the whole thing runs locally with no network calls, your internal hostnames, CDN URLs and API endpoints never leave the tab. You can safely draft a policy for a private staging environment and copy, download or reset it entirely offline.
- Difficulty:
- Easy
- Typical time:
- ~30s
- Processing:
- 100% browser processing
Last updated
How to use the csp generator
- 1
Start from a baseline
Load a starter policy (strict, self-only, or a typical app with a CDN) or begin from blank. The default-src row sets the fallback for everything you don't override.
- 2
Fill in each directive
For script-src, style-src, img-src, connect-src and the rest, toggle the keyword sources you need and add your real hostnames and CDNs, one per line. Leave a directive empty to omit it.
- 3
Add the common flags
Turn on upgrade-insecure-requests to auto-promote http references to https, set frame-ancestors to control who can iframe your page, and enable block-all-mixed-content if you need it.
- 4
Read the strictness meter
Check the score and its notes. Replace unsafe-inline with a nonce or hash where you can, and remove any wildcard * that the meter flags as effectively no protection.
- 5
Copy or download the header
Copy the finished Content-Security-Policy line into your server config or framework, or switch to the <meta> output for pages where you can't set HTTP headers. Download it as a snippet for your infra repo.
What CSP Generator includes
Per-directive form, not a text box
Each directive: default-src, script-src, style-src, img-src, connect-src, font-src, frame-src, frame-ancestors and more. Gets its own row with keyword toggles and a host list, so you build a policy without memorising the grammar.
Correct quoting, automatically
Keyword sources like 'self', 'none', 'unsafe-inline' and nonce-/sha256- tokens are single-quoted for you. Hostnames and schemes are left exactly as typed. No more policies silently broken by a missing quote.
Live strictness meter
A running score reads your finished policy back and explains it: unsafe-inline and unsafe-eval cost points, a wildcard * is called out, and a missing default-src fallback is flagged, so you see how much protection you actually have.
Every directive explained
Each row carries a one-line description of what the directive controls and which resources it governs, turning the builder into a working reference for the CSP model as you go.
Common extras as one-click flags
Toggle upgrade-insecure-requests and block-all-mixed-content, and choose whether to emit the policy as a header value or as a <meta http-equiv> tag for pages you can't set headers on.
Copy, download, reset & undo
Copy the header line, download it as a.txt snippet, load a curated starter policy, reset to blank, or step back and forth through undo/redo, all keyboard-driven and fully offline.
Why use our csp generator
Ship a real XSS defence, not a broken string
The generator emits valid, correctly-quoted CSP syntax and warns about the weak spots, so the policy you deploy actually mitigates cross-site scripting instead of being ignored by the browser as malformed.
Understand the header while you build it
Inline explanations and the strictness readout mean you leave knowing what script-src, connect-src and frame-ancestors each do. Not just with a pasted snippet you're afraid to touch.
Tighten gradually, safely
Start from a permissive baseline, watch the meter climb as you replace unsafe-inline with nonces and trim wildcards, and land on a strict policy without locking yourself out of your own assets.
Private by design
Everything runs locally in your browser, so internal hostnames, CDN URLs and staging endpoints in your policy are never uploaded, logged or seen by anyone.
Built for the way you work
From quick one-off fixes to daily workflows, see how people put this tool to use.
- Frontend / full-stack developer
Lock down a single-page app
Enumerate your API origins in connect-src, your CDN in script-src and style-src, and your image hosts in img-src, then paste the generated header into your reverse proxy or framework config in one go.
- DevOps / platform engineer
Standardise a policy across services
Build one strict baseline policy with a default-src 'self' fallback and explicit allowlists, download it, and reuse the same header value across every service behind your gateway.
- Security engineer
Audit and tighten an existing policy
Recreate a live policy in the form, watch the strictness meter explain each weakness, and drive the score up by swapping unsafe-inline for nonces and trimming wildcard sources before rollout.
- Site owner on shared hosting
Add CSP without server access
Switch to the <meta http-equiv="Content-Security-Policy"> output and drop the generated tag straight into your page head when you can't set real HTTP response headers.
Supported formats
Accepts Form fields, and produces HTTP header, CSP and Meta tag, all processed locally in your browser.
- Form fields
- HTTP header
- CSP
- Meta tag
Frequently asked questions
Recommended tools
Security Header Checker
Paste your HTTP response headers and get an instant A–F security grade with per-header pass/warn/fail verdicts and copy-ready fixes for HSTS, CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy and Permissions-Policy, 100% in your browser.
HTTP Header Checker
Paste raw HTTP response headers to parse them into a clean table and get instant notes on status, redirects, caching, compression, cookies, CORS and a graded security-header report, 100% in your browser.
Robots.txt Generator
Build a valid robots.txt with user-agent groups, allow/disallow rules, crawl-delay, sitemap and host directives, with live output, presets and lint warnings. 100% in your browser.
URL Encoder
Percent-encode text and URLs instantly: pick component mode for query values or full-URL mode to preserve structure, with a per-line batch switch. 100% in your browser, nothing uploaded.
SSL Certificate Checker
Paste a PEM/X.509 certificate to extract its SHA-1 & SHA-256 fingerprints, DNS names and identity strings, then work through a complete TLS/SSL hardening checklist: 100% in your browser, nothing uploaded.
Article Schema Generator
Generate valid Article, BlogPosting and NewsArticle JSON-LD structured data: with author, publisher, dates, images and keywords, a live SERP preview and a rich-results validity check. 100% in your browser.
Common problems, solved
Hit a snag? Here are quick fixes for the issues people run into most.
My inline scripts or styles stopped working after adding the CSP.
That's CSP doing its job. Inline <script> and style attributes are blocked unless you allow them. Either move the code into external files listed in script-src/style-src, or add a per-request nonce (script-src 'nonce-…') or a sha256- hash of the exact inline block. Using 'unsafe-inline' works but the strictness meter will (rightly) penalise it.
My fonts, images or API calls are being blocked.
Each resource type has its own directive that falls back to default-src. Add the font host to font-src, image hosts to img-src, and every API/websocket origin your page fetches to connect-src. The browser console names the blocked URL and the directive that blocked it. Add that exact origin to the matching row.
The frame-ancestors setting isn't stopping my page being framed.
frame-ancestors is only enforced when the policy is delivered as a real HTTP response header. It is ignored inside a <meta> tag. If you need clickjacking protection on a page you can't set headers for, you'll also need X-Frame-Options at the server. Otherwise switch to header output.
The meta-tag version behaves differently from the header.
A <meta http-equiv> CSP applies only to the document it's in, must appear early in <head> before any resource it governs, and can't use the report-only mode or frame-ancestors/sandbox directives. For a full-strength policy, deliver it as a response header wherever you can.
Get the most out of it
Always set a default-src, it's the fallback every fetch directive inherits from, so 'default-src 'self'' quietly protects resource types you forgot to list.
Prefer a per-request nonce or a sha256- hash over 'unsafe-inline' for scripts. It's the single biggest jump in real XSS protection and the strictness meter rewards it.
Use frame-ancestors 'none' (or 'self') as the modern replacement for X-Frame-Options to control who can iframe your page.
Add upgrade-insecure-requests so any lingering http:// references are fetched over https:// without you rewriting every URL.
Roll out with Content-Security-Policy-Report-Only first to collect violations without breaking anything, then flip to the enforcing header once the reports are clean.
What's new
Recent updates and improvements to the csp generator.
Initial release, per-directive CSP builder for default/script/style/img/connect/font/frame/frame-ancestors, auto-quoted keyword sources, header output, copy/download/reset and undo/redo.
Added the live strictness meter with plain-English notes (unsafe-inline, unsafe-eval, wildcard * and missing default-src detection) plus per-directive explanations.
Added upgrade-insecure-requests / block-all-mixed-content flags, a <meta http-equiv> output mode, and curated starter policies (strict, self-only, app-with-CDN).
Keep exploring
Related tools
Problems we solve
From the blog
- HTTP Security Headers Explained: CSP, HSTS, and the Rest
- Title Tag Optimization: How to Write Titles That Rank and Get Clicked
- What Is a Canonical URL? A Plain-English Guide to Fixing Duplicate Content
- Does llms.txt Do Anything? An Honest Answer
- How to Preview Your Google Search Result Before You Publish
Explore categories
Common tasks
Your privacy is built in
Every part of your Content-Security-Policy is assembled locally in your browser: nothing you type is uploaded, stored or logged. Internal hostnames, CDN URLs, API endpoints and staging origins stay on your device, so you can safely draft a policy for a private or unreleased environment, and closing the tab erases it completely.
- Runs in your browser
- No uploads
- Nothing stored
Ready to try the csp generator?
Free, private and instant. CSP Generator runs right in your browser.