CSP (Content Security Policy) 설정 가이드

CSP란

Content Security Policy는 브라우저에게 어떤 리소스를 로드할 수 있는지 알려주는 HTTP 헤더입니다. XSS 공격을 효과적으로 방어합니다.

기본 정책

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-abc123';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;

Next.js에서 설정

// next.config.js
const cspHeader = `default-src 'self'; script-src 'self' 'nonce-{nonce}';`

report-uri를 설정하면 정책 위반을 모니터링할 수 있습니다.