Next.js Content Security Policy

Expert guidance on implementing CSP in Next.js — nonces with Proxy, static CSP headers, SRI (experimental), and third-party script handling.

@doc-version: 16.2.6

Core Concepts

Content Security Policy (CSP) ป้องกัน XSS, clickjacking, และ code injection attacks โดยระบุ origins ที่อนุญาตสำหรับ scripts, styles, images, fonts, etc.

2 แนวทางหลัก:

• Nonce-based — dynamic rendering, strict security, ใช้ Proxy สร้าง nonce ทุก request
• Without nonces — static CSP headers ใน next.config.js, ใช้ 'unsafe-inline'

Guidelines

1. Nonce-based CSP (Strict)

Proxy Implementation