skills.rest
Esdeveniments
EsdevenimentsOFFICIAL
Explore all skills by this author →
Website𝕏@esdeveniments_GitHub

security-headers-csp

Configure CSP and security headers for Next.js apps with host allowlisting.

2|Updated Apr 9, 2023
Search Tags:#security#CSP#Next.js#headers#JSON-LD#trusted-domains#script-loading
One-click install
npx skills add https://github.com/Esdeveniments/esdeveniments-frontend --skill security-headers-csp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: security-headers-csp
Source: https://github.com/Esdeveniments/esdeveniments-frontend/tree/main/.github/skills/security-headers-csp
Command: npx skills add https://github.com/Esdeveniments/esdeveniments-frontend --skill security-headers-csp

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about security-headers-csp

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

FAQPage Schema
How do I configure a Content Security Policy in Next.js without breaking ISR caching?▼

To configure a Content Security Policy (CSP) without breaking Next.js ISR caching, use a relaxed posture with host allowlisting instead of per-request nonces. This approach allows trusted scripts to load safely while preserving static generation and partial prerendering performance.

What's the best way to safely load external scripts in Next.js under a strict CSP?▼

The best way to safely load external scripts under a strict CSP is using the Next.js Script component with the afterInteractive strategy for most scripts, and lazyOnload for non-critical analytics, ensuring domains are explicitly allowlisted in your headers.

How does JSON-LD rendering work with a relaxed CSP posture in Next.js?▼

JSON-LD rendering works with a relaxed CSP posture by using a server-rendered approach like JsonLdServer. This bypasses the need for nonce-based script execution, safely injecting structured data while maintaining the security header configuration.

Do I need a proxy to secure internal API calls in a Next.js app with CSP?▼

Yes, you need a CSP-aware proxy pipeline like proxy.ts middleware to secure internal API calls. It shields internal endpoints by enforcing security through HMAC APIs and safe fetch patterns, preventing unauthorized external access.

Which domains should I allowlist in my Next.js Content Security Policy for analytics?▼

For analytics, you should allowlist domains in your CSP such as googletagmanager.com, google-analytics.com, googlesyndication.com, and googleadservices.com to ensure tracking scripts execute correctly without violating the policy.

Why use HMAC APIs and safe fetch patterns instead of nonces for trusted scripts?▼

HMAC APIs and safe fetch patterns secure external webhooks and internal data fetching without requiring nonce management for trusted scripts. This maintains a relaxed CSP posture that supports ISR and PPR caching while preventing unauthorized data access.

Related Skills

Explore More Software Engineering Skills→
thejefflarsonthejefflarson
20

security-misconfiguration

Identify insecure defaults and misconfigurations in server code and configurations.

Community
Intermediate
Camilo8902Camilo8902

secure-headers-csp-builder

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

Community
Advanced
liuaibin001liuaibin001

geo-schema

Audits Schema.org structured data and generates JSON-LD for websites.

Community
Advanced
ChristopherAlphonseChristopherAlphonse
1

nextjs-proxy-csp-hardening

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

Community
Advanced