HTTP 보안 헤더 6종 완전 정복
MyCompass 보안 가이드 · mycompass.kr/guide/http-security-headers
HTTP 보안 헤더는 서버가 브라우저에게 "이렇게 동작하라"고 지시하는 설정입니다. 설정하지 않으면 XSS, 클릭재킹, MIME 스니핑 등의 공격에 취약해집니다.
Content-Security-Policy (CSP)
Critical어떤 출처(도메인)의 스크립트·스타일·이미지를 허용할지 명시. XSS 공격의 주요 방어선.
Next.js 설정: // next.config.js
headers: async () => [{
source: '/(.*)',
headers: [{ key: 'Content-Security-Policy', value: "default-src 'self'" }]
}]
Strict-Transport-Security (HSTS)
Critical브라우저가 이 사이트는 항상 HTTPS로만 접속하도록 강제. HTTP 다운그레이드 공격 방어.
Next.js 설정: { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' }
X-Frame-Options
High내 사이트를 다른 사이트의 iframe에 넣지 못하도록 차단. 클릭재킹 공격 방어.
Next.js 설정: { key: 'X-Frame-Options', value: 'DENY' }
X-Content-Type-Options
Medium브라우저가 응답의 Content-Type을 임의로 변경하지 못하도록 차단. MIME 스니핑 방어.
Next.js 설정: { key: 'X-Content-Type-Options', value: 'nosniff' }
Referrer-Policy
Medium다른 사이트로 이동 시 Referer 헤더에 URL 정보를 얼마나 포함할지 제어.
Next.js 설정: { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' }
Permissions-Policy
Medium카메라, 마이크, 위치정보 등 브라우저 기능 접근 권한을 제한.
Next.js 설정: { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' }
✨ AI 수정 프롬프트
Claude / ChatGPT / Cursor에 바로 붙여넣기