Curious TechieDev Toolbox
전체 가이드/보안10 min read

Content Security Policy (CSP)란 무엇이며 XSS를 방어하는 방법은?

CSP Level 3 마스터 가이드: 지시문 문법, 엄격한 논스(nonce) 적용, 해시 검증 및 제로 트러스트 보안 헤더 구성.

핵심 요약 (Key Takeaways)
  • CSP는 브라우저가 스크립트, 스타일, 이미지 등의 리소스를 로드하고 실행할 수 있는 출처를 제한하는 HTTP 헤더입니다.
  • 크로스 사이트 스크립팅(XSS) 및 데이터 탈취 공격을 방어하는 핵심적인 방어 수단입니다.
  • 최신 CSP Level 3 표준은 취약한 도메인 허용 목록 대신 엄격한 난수(nonce) 및 해시 기반 인증을 권장합니다.
  • frame-ancestors 'none' 지시문은 레거시 X-Frame-Options를 대체하여 클릭재킹을 원천 차단합니다.
  • Content-Security-Policy-Report-Only 헤더를 사용하여 운영 환경에서 오류 없이 사전 테스트할 수 있습니다.

1. 콘텐츠 보안 정책(CSP)이란 무엇인가?

콘텐츠 보안 정책(Content Security Policy / CSP)은 W3C에 의해 표준화된 HTTP 응답 헤더로, 브라우저가 로드하고 실행할 수 있는 신뢰할 수 있는 소스를 지정합니다.

스크립트, 스타일시트, 이미지, API 연결 범위를 통제함으로써 CSP는 크로스 사이트 스크립팅 (XSS) 및 데이터 탈취 공격을 무력화하는 가장 강력한 심층 방어 체계입니다.

2. 핵심 디렉티브 상세 분석

디렉티브통제 대상안전한 기본 권장값
default-src명시되지 않은 모든 리소스 요청에 대한 기본 폴백'self'
script-src실행을 허용할 자바스크립트 소스'self' 'nonce-...'
style-src허용할 스타일시트 출처 및 인라인 스타일'self' 'unsafe-inline'
connect-srcFetch, XHR, WebSocket 허용 목적지'self' https://api.domain.com
frame-ancestors현재 페이지를 <iframe> 내에 삽입할 수 있는 상위 출처'none'

3. Nonce vs Hash 기반 엄격 정책

초기 CSP는 도메인 화이트리스트 방식에 의존했으나, CDN 상의 JSONP 엔드포인트를 통한 우회 취약점이 다수 발견되었습니다.

최신 엄격한 CSP (Level 3)는 매 요청마다 일회용 암호학적 논스(Nonce)를 동적으로 발급하여 스크립트 실행을 제한합니다:

Content-Security-Policy: script-src 'nonce-rAnd0m123' 'strict-dynamic'; object-src 'none';

4. 클릭재킹 방어: Frame Ancestors vs X-Frame-Options

과거의 X-Frame-Options: DENY도 호환성을 위해 지원되지만, 현대 웹 표준에서는 부모 출처를 세밀하게 지정할 수 있는 CSP의 frame-ancestors가 권장됩니다.

5. 안전한 3단계 CSP 도입 전략

1단계: 보고 전용 모드 (Report-Only): 서비스 중단 없이 기존 코드의 정책 위반 사항을 수집하기 위해 <code>Content-Security-Policy-Report-Only</code> 헤더를 적용합니다.
2단계: 인라인 핸들러 리팩터링: HTML 내부의 <code>onclick="..."</code> 속성을 분리하여 외부 스크립트의 이벤트 리스너로 전환합니다.
3단계: 엄격한 차단 강제 적용: 헤더를 <code>Content-Security-Policy</code>로 전환하고 <code>object-src 'none'</code>을 선언하여 레거시 플러그인을 완전히 차단합니다.