nextjs-proxy-csp-hardening

Configures a Next.js proxy.ts with strict CSP and per-request nonce.

1|Updated May 7, 2026

Search Tags:#nextjs #csp #proxy #security-headers #middleware-migration #nonce

Ready to run

npx skills add https://github.com/ChristopherAlphonse/calphonse-skills --skill nextjs-proxy-csp-hardening

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-proxy-csp-hardening
Source: https://github.com/ChristopherAlphonse/calphonse-skills/tree/main/nextjs-proxy-csp-hardening
Command: npx skills add https://github.com/ChristopherAlphonse/calphonse-skills --skill nextjs-proxy-csp-hardening

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Configures a secure Next.js proxy.ts with per-request nonce, strict CSP, and comprehensive security headers, providing a defendable baseline for production apps and safe migration from middleware.ts.

Core Features & Use Cases

Enforces per-request nonce for script execution and embeds nonce into response headers.
Applies a comprehensive Content-Security-Policy with explicit base-uri, form-action, and frame-ancestors directives.
Supports App Router migrations by providing a ready-to-use proxy.ts scaffold for Next.js projects.

Quick Start

Generate a production-ready proxy.ts configured with nonce-based CSP and security headers for your Next.js App Router project.

Frequently Asked Questions about nextjs-proxy-csp-hardening

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

FAQPage Schema

How do I configure a per-request nonce in Next.js proxy.ts?▼

Configuring a per-request nonce in Next.js proxy.ts involves generating a unique nonce per request, propagating it through the x-nonce header, and applying it to the response CSP to authorize script execution securely.

How do I migrate from middleware.ts to proxy.ts for CSP in Next.js App Router?▼

Migrating from middleware.ts to proxy.ts for CSP in Next.js App Router involves replacing the middleware scaffold with a proxy.ts file to enforce strict CSP and per-request nonce generation for production hardening.

What Content-Security-Policy directives are required to harden Next.js proxy?▼

Hardening a Next.js proxy requires a strict Content-Security-Policy that explicitly defines base-uri, form-action, and frame-ancestors directives alongside the per-request nonce to prevent injection and clickjacking attacks.

Can I use proxy.ts for security headers in a Next.js App Router project?▼

Yes, you can use proxy.ts to apply comprehensive security headers and enforce a strict CSP in a Next.js App Router project, providing a defendable baseline for production apps.

Why do I need a per-request nonce for CSP in Next.js?▼

A per-request nonce is needed for CSP in Next.js to ensure that only explicitly authorized scripts execute on each request, preventing cross-site scripting by making injected static scripts fail the policy check.

What is the best way to set up frame-ancestors and form-action in Next.js CSP?▼

The best way to set up frame-ancestors and form-action in Next.js CSP is to explicitly declare them within the Content-Security-Policy header applied by your proxy.ts file to prevent clickjacking and unauthorized form submissions.