Next.js Security Headers & CSP
Configures robust HTTP security headers, Content Security Policies, and phased rollout plans for Next.js applications.
The Next.js Security Headers & CSP skill equips developers with safe defaults, nonce management strategies, and phased deployment workflows for hardening modern web applications. It systematically generates and audits essential HTTP headers—such as Content-Security-Policy (CSP), HSTS, Permissions-Policy, X-Content-Type-Options, and COOP—tailored for Next.js App Router and Pages router architectures. By guiding teams through report-only testing prior to strict enforcement, it mitigates cross-site scripting risks while preventing common issues such as broken React hydration, blocked OAuth popups, and external media failures.
Características Principales
01Provides troubleshooting solutions for OAuth login popups, external CDN assets, and identity providers
02Guides safe phased rollout workflows transitioning from report-only mode to full enforcement
03Generates production-grade CSP directives distinguishing script, style, image, connect, and font sources
040 GitHub stars
05Implements nonce and hash strategies for inline scripts without breaking Next.js hydration
06Configures companion headers including HSTS, Permissions-Policy, Referrer-Policy, and COOP
Casos de Uso
01Hardening a production Next.js application ahead of a security audit or compliance review
02Implementing Content-Security-Policy-Report-Only to detect XSS and asset violations without disruption
03Configuring dynamic nonces and security headers in Next.js middleware and next.config.js