Security Headers

Sets up the full suite of browser security headers through Next.js middleware: CSP with dynamic Clerk/Convex/Stripe origins, X-Frame-Options to block clickjacking, X-Content-Type-Options to prevent MIME sniffing attacks, and HSTS for production HTTPS enforcement. The approach here is environment-aware CSP that pulls domains from env vars rather than hardcoding them, which is cleaner for multi-environment setups. It includes unsafe-inline and unsafe-eval for Next.js compatibility, which is a practical tradeoff most apps make. Use this when you need defense-in-depth headers configured correctly from the start, especially if you're integrating third-party auth or payments and want to whitelist only what's necessary.

skills.sh installs: 203
GitHub stars: 18
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add harperaa/secure-claude-skills --skill security-headers --agent claude-code

Installs into .claude/skills of the current project.

Files

Security Headers - Defense Against Multiple Attack Types

Why Security Headers Are Critical

Think of security headers as the walls and moat around your castle. Even if attackers get past the gate (your authentication), the walls (headers) prevent them from moving freely or exfiltrating data.

The Browser Security Model

Modern browsers have built-in security features, but they're opt-in. Without the right headers, browsers allow:

Your site to be embedded in malicious iframes (clickjacking)
Scripts from any origin (XSS amplification)
Insecure HTTP connections (man-in-the-middle attacks)
MIME type confusion (executing images as scripts)

Security headers tell the browser: "Enable all your security features for my site."

Real-World Consequences of Missing Headers

According to a 2023 security audit of top 10,000 websites by Scott Helme, only 2.8% properly implement all recommended security headers. The remaining 97.2% are vulnerable to attacks that headers would prevent.

SKILL.md on GitHub