Cách implement Content-Security-Policy với nonce trong Next.js là gì, và tại sao phải tạo nonce mới mỗi request thay vì hardcode?

CSP chống XSS bằng cách chỉ cho phép script từ nguồn tin cậy. Vì Next.js inline một số script (cho hydration), bạn cần nonce — một token ngẫu nhiên gắn vào thẻ <script> hợp lệ; trình duyệt chặn mọi script không có nonce đúng.

Tạo nonce trong middleware rồi truyền qua header để layout đọc lại:

// middleware.ts
import { NextResponse } from 'next/server'

export function middleware(request) {
  const nonce = btoa(crypto.randomUUID())
  const csp = `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'; object-src 'none';`
  const headers = new Headers(request.headers)
  headers.set('x-nonce', nonce)
  const res = NextResponse.next({ request: { headers } })
  res.headers.set('Content-Security-Policy', csp)
  return res
}

Trong Server Component: const nonce = (await headers()).get('x-nonce') rồi gán cho next/script.

Tại sao phải mới mỗi request: nonce hardcode/lặp lại thì kẻ tấn công đoán được và inject script kèm nonce đó → CSP vô tác dụng. Nonce dùng-một-lần buộc response phải động (không cache full-page tĩnh).