React 앱을 위한 콘텐츠 보안 정책

콘텐츠 보안 정책(CSP)은 신뢰할 수 있는 콘텐츠 출처를 브라우저에 알려 주는 HTTP 응답 헤더입니다. 로드가 허용되는 스크립트, 스타일, 이미지, 글꼴을 정확히 선언하면 XSS 취약점으로 공격자가 페이지에 HTML을 주입할 수 있더라도 CSP가 주입된 악성 콘텐츠의 실행을 방지합니다.

default-src 'self'는 기본 기준을 설정합니다. 모든 리소스 유형(스크립트, 스타일, 이미지, 글꼴, 프레임)은 동일한 출처에서만 로드할 수 있습니다. script-src 'self'는 스크립트 로드를 동일한 출처로 좁혀, 명시적으로 나열하지 않은 외부 CDN의 스크립트를 차단합니다. 이 두 지시문은 함께 제한적인 CSP의 기반을 이룹니다.

eval()은 실행 시 문자열을 실행 가능한 코드로 변환하며, 이는 XSS 페이로드가 정확히 필요로 하는 동작입니다. script-src 'self'('unsafe-eval' 제외)를 사용하는 CSP는 eval()과 new Function(), setTimeout(string) 같은 관련 함수를 차단합니다. 따라서 XSS 페이로드가 실행되는 주요 유형 하나를 제거할 수 있습니다.

'strict-dynamic'을 script-src에 지정하면 이미 신뢰된 스크립트가 로드한 스크립트에도 신뢰가 부여됩니다. 따라서 모든 CDN URL을 허용 목록에 추가하지 않아도 번들러가 사용하는 동적 스크립트 로드 패턴을 사용할 수 있습니다. 신뢰된 스크립트는 추가 스크립트를 로드할 수 있으며, 추가 스크립트도 신뢰를 상속합니다.

애플리케이션에 특정 인라인 스크립트(예: 분석 초기화 코드 조각)가 필요한 경우 SHA-256 해시를 계산하여 'sha256-base64hash'를 script-src에 추가할 수 있습니다. 정확히 일치하는 해시를 가진 스크립트만 인라인으로 실행할 수 있습니다. 공격자가 주입한 스크립트는 다른 해시를 가지므로 차단됩니다.

논스는 서버가 각 요청마다 생성하는 암호학적으로 무작위인 값입니다. 서버는 논스를 스크립트 태그(<script nonce="abc123">)와 CSP 헤더(script-src 'nonce-abc123') 모두에 추가합니다. 올바른 논스를 포함한 스크립트만 실행됩니다. 공격자는 논스를 예측할 수 없으므로 주입한 스크립트에 논스를 사용할 수 없습니다.

CSP는 report-uri /csp-violation-endpoint 또는 최신 report-to 지시문을 통해 위반 보고를 지원합니다. CSP로 인해 브라우저가 리소스를 차단하면 엔드포인트로 JSON 보고서를 전송합니다. 이러한 보고서를 모니터링하면 정상적인 구성 문제와 진행 중인 공격 시도를 모두 파악하는 데 도움이 됩니다.

Next.js에서는 미들웨어에 CSP 헤더를 추가합니다. middleware.ts를 만들고, 논스를 생성하고, Content-Security-Policy 헤더를 설정한 다음, 응답 헤더를 통해 논스를 페이지에 전달합니다. 페이지 레이아웃은 헤더에서 논스를 읽어 모든 인라인 스크립트와 스타일 태그에 적용합니다.

Content-Security-Policy-Report-Only는 테스트 모드입니다. 브라우저는 아무것도 적용하지 않고 차단되었을 모든 항목에 대한 위반 보고서만 전송합니다. 먼저 Report-Only 모드로 배포하여 모든 위반을 수정한 다음, 애플리케이션이 중단되지 않도록 적용 모드인 Content-Security-Policy 헤더로 전환하십시오.

CSP가 리소스를 차단하면 Chrome DevTools 콘솔에 차단된 URL과 위반된 지시문을 식별하는 빨간색 오류 메시지가 표시됩니다. 이러한 메시지는 개발 및 테스트 중에 매우 유용합니다. 각 위반은 정책을 수정하거나, 리소스를 허용된 출처로 옮기거나, 논스 또는 해시를 사용하는 방법으로 해결해야 합니다.

실용적인 React SPA CSP는 다음과 같습니다. default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. frame-ancestors 'none'은 앱을 iframe에 삽입하지 못하게 하여 클릭재킹도 방지합니다.

콘텐츠 보안 정책에서 script-src 'self'는 무엇을 방지합니까?

CSP는 신뢰할 수 있는 콘텐츠 출처를 선언하는 HTTP 헤더입니다. default-src 'self'와 script-src 'self'는 외부 스크립트와 eval을 차단합니다. 인라인 스크립트는 해시 또는 논스를 통해 허용할 수 있습니다. 'strict-dynamic'은 동적 스크립트 로드를 지원합니다. 적용하기 전에 Content-Security-Policy-Report-Only를 사용하여 테스트하십시오. Next.js는 미들웨어를 통해 CSP를 구현합니다. DevTools 콘솔에는 위반 사항이 실시간으로 표시됩니다.