Security Headers Generator — Configure HTTP Security Headers Visually

Security Headers Generator is a free, browser-based tool that lets developers configure HTTP security headers through a visual UI and export the result as ready-to-paste Nginx, Apache, or Next.js config. No docs diving. No guessing. Just toggle, configure, and copy.

The Problem

Most developers know they should set security headers. Few have them configured correctly.

Content-Security-Policy has a dozen directives. HSTS has a preload option that permanently commits your domain. Permissions-Policy replaced Feature-Policy with a completely different syntax. Getting any of these wrong either leaves you exposed or breaks your site.

The usual workflow: look up the header on MDN, find a blog post from 2019, copy a snippet, and hope it's still correct. That costs 30 minutes per header and produces configs that are generic rather than tuned to your app.

How It Works

1. Configure with Toggles and Dropdowns

Each security header has a toggle to enable or disable it. When enabled, header-specific options appear inline:

• Strict-Transport-Security — choose max-age (30 days to 2 years), add includeSubDomains, opt into preload
• X-Frame-Options — DENY or SAMEORIGIN
• Referrer-Policy — full dropdown of all 8 valid values with the recommended option marked
• Content-Security-Policy — individual fields for every directive (default-src, script-src, style-src, img-src, font-src, connect-src, frame-ancestors)
• Permissions-Policy — checkboxes to allow or block camera, microphone, geolocation, payment, USB, and fullscreen
• Cross-Origin-Opener-Policy — dropdown with the 3 valid values
• Cross-Origin-Resource-Policy — same-site, same-origin, or cross-origin

2. Real-Time Security Score

A score bar at the top shows your overall security posture as a percentage. Enable more headers, the score goes up. It's a fast signal — not a guarantee — but useful for spotting what's missing.

3. Copy Output in 3 Formats

Switch between output tabs:

| Format | Output | |--------|--------| | Nginx | add_header directives, ready for nginx.conf | | Apache | Header always set inside IfModule mod_headers.c | | Next.js | A complete headers() function for next.config.ts | | Raw | Plain Header-Name: value lines |

Click Copy and paste directly. No editing required.

4. Active Headers Summary

A summary panel lists every enabled header with its full value. Useful for reviewing what's active before copying.

Key Features

• 8 security headers — HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, CSP, Permissions-Policy, COOP, CORP
• 3 server output formats — Nginx, Apache, Next.js (plus raw)
• Real-time security score — Weak / Moderate / Strong indicator
• Sticky output panel — output stays visible while you scroll through config options
• Reset to defaults — one click to restore sensible starting values
• 100% client-side — no data is sent to any server

Technical Implementation

Stack

• Next.js 16 with App Router
• TypeScript in strict mode
• Tailwind CSS v4 with OKLCH color tokens
• framer-motion for animations
• shadcn/ui components (new-york style)

Architecture

All header generation logic is pure client-side TypeScript. The buildHeaders() function reads the current state and produces a Record<string, string> map. Four separate formatter functions (toNginx, toApache, toNextjs, toRaw) transform that map into the appropriate output format. No API calls. No server round-trips.

State is managed with useState and useMemo — the output updates synchronously as you change any option.

Use Cases

Setting Up a New Project

You've deployed a Next.js app. You know you need security headers. Open the generator, enable everything, tune the CSP directives to your actual origins, switch to the Next.js tab, and paste into next.config.ts. Done in under 5 minutes.

Auditing an Existing Site

Run a security header scan (securityheaders.com, Mozilla Observatory). You're missing COOP and CORP. Open the generator, find those headers, enable them, copy the two-line Nginx output, and add it to your config. No documentation tab required.

Teaching and Onboarding

Walk a junior developer through each header using the explanations inline. The interactive toggles make it immediately clear what each option does and how the values change.

CSP Iteration

Start with default-src 'self', add your CDN to script-src, adjust style-src after seeing console errors. The generator makes it fast to iterate on CSP without manually editing long directive strings.

Why Security Headers Generator?

vs. securityheaders.com

securityheaders.com scans an existing site and grades it. Security Headers Generator helps you build the config before you deploy. They're complementary — use this to configure, use that to verify.

vs. Copy-Pasting from Blog Posts

Blog posts go stale. Feature-Policy was replaced by Permissions-Policy. The correct CORP values changed. This tool is maintained and reflects current best practices.

vs. Writing It by Hand

You still need to understand each header — this tool doesn't remove that requirement. But it removes the syntax errors, the typos in directive names, and the back-and-forth between MDN tabs and your editor.

---

Try it now: security-headers-generator.tools.jagodana.com