skills.rest
harperaa
harperaaCOMMUNITY
Explore all skills by this author →
GitHub

security-headers

Configure Next.js middleware to apply security headers with dynamic CSP.

15|1|Updated Oct 20, 2025
Search Tags:#security headers#XSS#CSP#HSTS#MIME confusion#middleware#clickjacking#browser security
One-click install
npx skills add https://github.com/harperaa/secure-claude-skills --skill security-headers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: security-headers
Source: https://github.com/harperaa/secure-claude-skills/tree/main/security-headers
Command: npx skills add https://github.com/harperaa/secure-claude-skills --skill security-headers

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solves? This Skill explains and implements critical security headers that protect your application from common browser-based attacks like clickjacking, XSS amplification, MIME confusion, and SSL stripping. It ensures your browser enforces robust security policies, even if other defenses are bypassed.

Core Features & Use Cases

  • Content-Security-Policy (CSP): Controls resource loading, preventing unauthorized scripts and data exfiltration.
  • X-Frame-Options: DENY: Stops clickjacking attacks by preventing your site from being embedded in iframes.
  • X-Content-Type-Options: nosniff: Prevents MIME confusion, ensuring browsers don't execute images as scripts.
  • Strict-Transport-Security (HSTS): Forces HTTPS connections, protecting against SSL stripping (production only).
  • Use Case: Automatically apply a dynamic CSP in your middleware.ts to restrict script and connection sources, preventing malicious injected scripts from communicating with attacker-controlled domains.

Quick Start

Example: Check applied security headers

(Headers are automatically applied via middleware.ts)

curl -I http://localhost:3000

Expected headers in response:

X-Frame-Options: DENY

X-Content-Type-Options: nosniff

Content-Security-Policy: default-src 'self'; ...

(HSTS only in production)

Frequently Asked Questions about security-headers

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I protect my Next.js app from XSS and clickjacking attacks?▼

Security headers like Content-Security-Policy, X-Frame-Options, and X-Content-Type-Options defend against XSS, clickjacking, and MIME confusion by controlling resource loading and preventing unauthorized script execution. This Skill configures these headers automatically via middleware to block malicious injected scripts and iframe embedding.

What security headers should I add to my web application?▼

Essential security headers include Content-Security-Policy (controls resource loading), X-Frame-Options: DENY (stops clickjacking), X-Content-Type-Options: nosniff (prevents MIME confusion), and Strict-Transport-Security (forces HTTPS in production). This Skill applies all of them dynamically based on your environment.

Can I use dynamic Content-Security-Policy with environment variables?▼

Yes. This Skill derives CSP policies from environment variables to support dev, staging, and production configurations separately. It integrates with Clerk, Stripe, and Convex, automatically resolving permitted domains without hardcoding secrets into your code.

How do I apply security headers on every request in Next.js?▼

Configure headers in middleware.ts to apply Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, and HSTS on every incoming request. This Skill automates header application, ensuring consistent protection across your application without manual per-route setup.

What's the difference between X-Frame-Options and Content-Security-Policy?▼

X-Frame-Options: DENY prevents your site from being embedded in iframes, stopping clickjacking. Content-Security-Policy is broader, controlling all resource loading (scripts, styles, images) to prevent XSS and data exfiltration. Both are essential; this Skill implements both.

Do security headers prevent SSL stripping attacks?▼

Yes. Strict-Transport-Security (HSTS) forces HTTPS connections and prevents SSL stripping by instructing browsers to always use encrypted connections. This Skill enables HSTS in production environments to protect against downgrade attacks.

Related Skills

Explore More Software Engineering Skills→
pattarapoljpattarapolj

clerk-setup

Configure Clerk authentication for web applications using the clerk CLI.

Community
Intermediate
Camilo8902Camilo8902

secure-headers-csp-builder

Implement security headers and a report-only CSP for Express.js applications.

Community
Advanced
harperaaharperaa
15

payment-security-clerk-billing-stripe

Integrate Clerk Billing with Stripe Checkout for secure subscription payments.

Community
Intermediate
engineers-hub-ltd-in-house-projectengineers-hub-ltd-in-house-project

security-headers

Implement HTTP security headers with TypeScript middleware for web applications.

Official
Intermediate