업데이트 2026. 6. 14.7 분 읽기
Cloudflare Pages와 React 사이트를 위한 보안 헤더
정적 React 배포에서 일반적인 브라우저 측 위험을 줄이기 위해 보안 헤더, canonical metadata, 응답 검증을 사용하는 방법입니다.
핵심 포인트
- 보안 헤더는 코드 주석이 아니라 배포 설정으로 다뤄야 합니다.
- Cloudflare Pages는 릴리스 전에 테스트할 수 있는 정적 헤더 규칙을 지원합니다.
- 명확한 cross-origin 사용 사례가 없다면 wildcard CORS는 공개 정적 응답에 대체로 지나치게 넓습니다.
기본 헤더 세트
하드닝된 React 사이트는 브라우저 동작을 명시적으로 설정해야 합니다. 정확한 정책은 앱에 따라 다르지만 보통 content type 보호, clickjacking 보호, referrer 제어, permissions policy, 신중하게 선택한 content security policy가 포함됩니다.
정적 호스팅에서는 헤더가 없어도 앱이 렌더링되기 때문에 이를 놓치기 쉽습니다. 보안 작업은 HTTP 응답 계층에서 검증해야 합니다.
Cloudflare Pages 고려사항
- 가능하면 헤더 규칙을 저장소 가까이에 두어 코드와 함께 리뷰되도록 합니다.
- 문서화되지 않은 dashboard 전용 변경은 향후 유지보수자가 감사하기 어렵기 때문에 피합니다.
- www와 apex 도메인을 모두 제공한다면 둘 다 검증합니다.
- redirect가 최종 응답에서 중요한 헤더를 제거하지 않는지 확인합니다.
CORS는 의도적으로 설정해야 합니다
Access-Control-Allow-Origin: *는 이유 없이 사이트에 복사되는 경우가 많습니다. 일반 웹 페이지에서 넓은 CORS는 보통 방문자에게 도움이 되지 않으며, 같은 정책 아래 미래 endpoint가 추가될 경우 우발적인 데이터 노출을 쉽게 만들 수 있습니다.
자동화할 항목
- 정적 헤더 설정에서 wildcard CORS를 거부하는 테스트.
- sitemap과 robots 파일을 게시하는 build 단계.
- 중요 페이지가 렌더링되고 metadata가 존재하는지 확인하는 preview 검사.
- 배포 후 production 도메인에 대한 live-response 검사.