CSP Generator
How do I write a Content Security Policy?
A Content Security Policy is the header that decides which scripts a browser will run, and its syntax differs between a Next.js config, a vercel.json, a netlify.toml, and a Cloudflare _headers file. Pick where you deploy and what you want enabled, and copy the policy out with the rest of your security headers.
// next.config.ts - applies to every route.
const securityHeaders = [
{ key: "Content-Security-Policy", value: "default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; form-action 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https:" },
{ key: "Strict-Transport-Security", value: "max-age=31536000; includeSubDomains" },
{ key: "X-Frame-Options", value: "DENY" },
{ key: "X-Content-Type-Options", value: "nosniff" },
{ key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
{ key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
];
const nextConfig = {
async headers() {
return [{ source: "/(.*)", headers: securityHeaders }];
},
};
export default nextConfig;Built in your browser, nothing sent anywhere. Deploy it, then re-run the checker - a Content-Security-Policy in particular tends to need one or two passes before it is both strict and unbroken.
What this CSP generator produces
Content-Security-Policy
A working default policy that permits inline scripts and styles, plus a strict mode that removes unsafe-inline once you are ready to adopt nonces.
Strict-Transport-Security
A one-year max-age with includeSubDomains, and preload as a separate opt-in because preload is genuinely hard to undo.
Frame and MIME protection
X-Frame-Options: DENY to block clickjacking, and X-Content-Type-Options: nosniff to stop MIME-type sniffing.
Referrer-Policy and Permissions-Policy
strict-origin-when-cross-origin so full URLs stop leaking outward, and camera, microphone, and geolocation switched off by default.
Four platform formats
next.config.ts, vercel.json, netlify.toml, or a Cloudflare Pages _headers file - the same header set in whichever syntax your host expects.
Grounded in what we run
The values mirror the headers Ubserve itself serves in production, not a textbook sample nobody has deployed.
Read more →How the CSP Generator works
- Step 1
Pick your platform
Next.js, Vercel, Netlify, or Cloudflare Pages. The header values stay the same; only the file format changes.
- Step 2
Choose what to enable
Everything is on by default except HSTS preload and strict CSP, the two that can cause real trouble if switched on before you are ready. Each toggle explains its trade-off.
- Step 3
Copy it out and verify
Paste the config into the named file, deploy, then run the checker against your URL to confirm the headers are actually being sent. A CSP usually takes a pass or two to get both strict and unbroken.
Frequently asked questions
How do I add a Content Security Policy to my app?
You set them wherever your host lets you define response headers, which depends on the platform: an async headers() function in next.config.ts, a headers array in vercel.json, a [[headers]] block in netlify.toml, or a public/_headers file on Cloudflare Pages. The header names and values are identical across all four - only the file and its syntax differ, which is exactly the friction this generator removes.
What is a Content-Security-Policy?
A Content-Security-Policy is a header listing where a browser may load resources from - scripts, styles, images, fonts, and network connections - and it refuses anything not on that list. It is the strongest header you can set and the one most often missing, because it is the only one that can break a working site if written carelessly. Start with the default policy here, which allows inline code, and move to strict mode once you have moved inline scripts out or adopted nonces.
Should I turn on HSTS preload?
Not immediately. Preload submits your domain to a list baked into browsers, after which every request to your domain and its subdomains is forced to HTTPS whether or not your server is ready. That is exactly what you want on a settled domain, and painful on one where a subdomain still serves plain HTTP. Ship HSTS without preload first, confirm every subdomain is HTTPS, and add preload once you are sure - removal takes months.
Is it free? Do I need to sign in?
It is completely free and there is no account, no sign-in, and no limit on how many times you use it. Ubserve makes money from the paid security report, not from this page. The scanner it pairs with is free to run too - you get a grade, an issue count, and up to two findings in full before anything is asked of you.
Does anything I type here get sent to Ubserve?
Nothing leaves your browser. This generator is plain string assembly running on your own machine: the table name, column name, or header options you choose are never sent to Ubserve or anywhere else, and there is nothing for us to store. You can confirm it by opening DevTools and watching the Network tab while you use it - no request is made.
How do I know the headers actually shipped?
Deploy, then check the response rather than the config. Open DevTools, go to the Network tab, reload, click the document request, and read the Response Headers panel - what is listed there is what browsers receive. A config file can be correct and still not apply, most often because a CDN or proxy sits in front and strips or overrides headers. Running our checker against the deployed URL is the same test from outside.
What founders say
5.0 out of 5 - Ubserve, from 3 reviews
“Helped me find a critical database issue that would've done real damage. I recommend it for every founder.”
“Caught a critical CSP issue on my frontend within minutes. Don't ship without a scan.”
“The free scan took under 60 seconds to find real issues in my project.”
Other free tools
See all tools →Security Headers Checker
Reads the response headers your site actually sends and grades what is missing, weak, or leaking your stack.
Open tool →CSP Evaluator
Paste a Content Security Policy or enter a URL to find unsafe-inline, wildcard and bypassable sources, and missing directives.
Open tool →Website Vulnerability Scanner
The full public scan: bundles, headers, TLS, CORS, endpoints, DNS, and database exposure in a single pass.
Open tool →Keep reading
- Vulnerabilities we catchWhat else a public scan finds beyond headers.
- Pre-deploy security checklist for vibe-coded appsThe last pass before you ship.
- How to secure a vibe-coded app before productionOrder of operations for a launch week.
- Next.js Server Action securityHeaders help; they are not access control.
- Why vibe-coded apps keep getting hackedWhere missing headers show up in real incidents.
Check what your live app serves
Anything you check here only covers what you hand it. What an attacker sees is what your deployed app serves, so paste your URL and check that too.