security-headers-csp
OfficialSecure CSPs and headers with safe script loading.
System Documentation
What problem does it solve?
This Skill guides the setup and maintenance of Content Security Policy (CSP), security headers, and safe external script loading to protect Next.js apps while preserving ISR/PPR performance.
Core Features & Use Cases
- CSP & Headers Management: Configure relaxed CSP with host allowlisting to balance security and performance.
- External Script Safety: Safely load external scripts via Next.js Script component with recommended strategies.
- JSON-LD & Proxies: Implement server-rendered JSON-LD and a CSP-aware proxy pipeline to shield internal APIs.
Quick Start
Review and implement CSP and security headers across the app, focusing on host allowlisting, and the proxy.ts middleware. Add allowlisted domains to CSP: googletagmanager.com, google-analytics.com, googlesyndication.com, googleadservices.com, fundingchoicesmessages.google.com, www.gstatic.com, tpc.googlesyndication.com. Use Next.js Script with strategy afterInteractive for most scripts; consider lazyOnload for non-critical analytics. Use JsonLdServer for JSON-LD and rely on the relaxed CSP to avoid nonce. Ensure internal API calls use fetchWithHmac and external webhooks use safeFetch.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: security-headers-csp Download link: https://github.com/Esdeveniments/esdeveniments-frontend/archive/main.zip#security-headers-csp Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.