본문 바로가기
카테고리 없음

CSP 정책 구조 이해 정책 설계 방식 자동화 적용

by 디디이 2025. 7. 12.

웹 애플리케이션 보안 강화 csp

CSP(Content Security Policy)는 웹 애플리케이션의 보안을 강화하기 위해 사용되는 HTTP 응답 헤더입니다. 주로 XSS(크로스 사이트 스크립팅), 데이터 인젝션, 악성 외부 스크립트 로딩 등의 공격을 방지하는 데 활용됩니다. 하지만 효과적으로 사용하려면 각 리소스 유형에 맞는 정책을 직접 정의해야 하며, 무분별하게 차단하거나 허용할 경우 오히려 사이트가 정상적으로 동작하지 않을 수 있습니다. 이 글에서는 CSP 정책을 실무 환경에서 직접 작성하는 방법을 단계별로 정리합니다.

CSP 정책의 기본 구조 이해

CSP 정책은 여러 디렉티브(Directive)로 구성되며, 각 디렉티브는 특정 리소스 유형의 로딩 소스를 제한하거나 허용하는 역할을 합니다. 기본 구조는 다음과 같습니다:

Content-Security-Policy: <directive> <source-list>; <directive> <source-list>; ...

예를 들어 다음과 같은 정책은 기본적으로 아무 것도 허용하지 않고, 스크립트와 스타일만 제한적으로 허용합니다:

Content-Security-Policy:
  default-src 'none';
  script-src 'self' https://apis.google.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;

주요 디렉티브는 다음과 같습니다:

  • default-src: 다른 모든 리소스의 기본 소스
  • script-src: JavaScript 파일 및 inline script
  • style-src: CSS 파일 및 inline style
  • img-src: 이미지 파일
  • connect-src: fetch, XMLHttpRequest 등의 연결 주소
  • font-src: 웹폰트 로딩 출처
  • frame-src: iframe 로딩 허용 출처

각 디렉티브에는 'self', 'unsafe-inline', 'none' 같은 키워드나 외부 URL을 나열할 수 있습니다. 기본적으로는 'self'로 본인의 도메인만 허용하고, 외부 URL은 필요한 경우에만 명시적으로 추가해야 합니다.

실무 기준 CSP 정책 설계 방식

CSP 정책을 실제 서비스에 적용하려면 먼저 사이트에서 로드되는 모든 외부 리소스를 파악하고, 어떤 종류의 콘텐츠를 어디서 불러오는지 확인해야 합니다. 다음 절차를 통해 안전하고 안정적인 정책을 설계할 수 있습니다:

  1. 사이트에 로드되는 모든 리소스 조사 브라우저의 DevTools에서 네트워크 탭을 열고, JS, CSS, 이미지, 폰트, API 요청 등 리소스별 도메인을 확인합니다.
  2. 스크립트/스타일 인라인 처리 방지 inline 스크립트와 스타일 사용을 줄이고, 외부 파일로 분리하거나 nonce/hash 기반 방식으로 교체합니다.
  3. ‘report-only’ 모드로 테스트 실 서비스에 적용하기 전, Content-Security-Policy-Report-Only 헤더를 통해 위반 로그만 수집하여 문제를 확인합니다.

예시 CSP 정책 (실제 적용 가능):

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net 'nonce-abc123';
  style-src 'self' https://fonts.googleapis.com;
  font-src https://fonts.gstatic.com;
  img-src 'self' data:;
  connect-src 'self' https://api.example.com;

이 정책은 기본적으로 자사 도메인 리소스만 허용하며, CDN, Google Fonts, API 주소 등 필요한 외부 출처만 개별적으로 허용합니다. 또한 nonce를 적용해 안전한 inline script도 제한적으로 사용할 수 있도록 합니다.

정책 위반 로그 수집 및 자동화 적용

작성한 CSP 정책이 실서비스에서 문제를 일으키지 않도록 하기 위해, CSP 위반 사항을 서버로 리포트 받는 기능을 활용할 수 있습니다. 이를 위해 report-uri 또는 report-to 디렉티브를 사용합니다:

Content-Security-Policy:
  ...;
  report-uri /csp-report-endpoint;

브라우저는 정책 위반 시 해당 endpoint로 JSON 형식의 로그를 전송하며, 이를 통해 누락된 도메인, 미허용 리소스 등을 실시간으로 파악할 수 있습니다. 이 데이터를 기반으로 정책을 점진적으로 개선해나가는 것이 이상적입니다.

또한 다음과 같은 자동화 도구를 통해 CSP 정책 생성을 도울 수 있습니다:

  • Report-URI CSP Generator
  • Google CSP Evaluator
  • CSP Reference

CI/CD 파이프라인에 CSP 정책 검증 과정을 포함하거나, Lighthouse 감사 리포트를 통해 CSP 문제를 자동 점검하는 것도 추천되는 전략입니다.

CSP는 웹 애플리케이션의 보안을 강화하는 데 매우 효과적인 수단이지만, 무작정 복사해 붙여넣는 방식이 아닌 실 서비스 환경에 맞춘 정책 설계가 필요합니다. 로딩되는 리소스를 철저히 분석하고, 테스트 → 로그 수집 → 정책 조정의 루틴을 반복하면서 점진적으로 강화된 보안 정책을 완성하는 것이 안정적이며 효과적인 접근 방식입니다.

티스토리툴바