Content Security Policy (CSP) 완전 가이드: 기초부터 프로덕션까지

CSP는 XSS 공격에 대한 가장 효과적인 방어 수단 중 하나입니다. 브라우저에 어떤 리소스를 로드할 수 있는지 알려줌으로써 취약점이 있어도 악성 코드 주입을 방지합니다.

CSP란? 왜 중요한가?

CSP는 브라우저가 로드할 수 있는 리소스를 제어하는 HTTP 응답 헤더입니다.

CSP 작동 원리

브라우저가 CSP 헤더를 받으면 규칙을 위반하는 리소스를 차단합니다:

Browser receives HTTP response:
  Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com

Browser allows:
  ✅ <script src="/app.js">              (same origin = 'self')
  ✅ <script src="https://cdn.example.com/lib.js">

Browser blocks:
  ❌ <script src="https://evil.com/steal.js">
  ❌ <script>alert('XSS')</script>       (inline = not allowed)

CSP 디렉티브 전체

소스 값 설명

단계별 구현

1단계: 리포트 전용 모드로 시작

사이트를 깨뜨리지 않고 위반 사항을 식별:

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

3단계: 정책 구축

분석 결과를 바탕으로 정책 생성:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'self';
  base-uri 'self';
  form-action 'self';
  object-src 'none';
  upgrade-insecure-requests

일반적인 CSP 설정

엄격한 정책

Content-Security-Policy:
  default-src 'none';
  script-src 'self';
  style-src 'self';
  img-src 'self';
  font-src 'self';
  connect-src 'self';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  object-src 'none';
  upgrade-insecure-requests

중간 (일반 SPA)

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: blob: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com wss://ws.example.com;
  frame-ancestors 'self'

Google Analytics 포함

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com;
  img-src 'self' https://www.google-analytics.com https://www.googletagmanager.com;
  connect-src 'self' https://www.google-analytics.com https://analytics.google.com

구현 방법

Nginx

add_header Content-Security-Policy "default-src 'self'; script-src 'self'" always;

Apache

Header set Content-Security-Policy "default-src 'self'; script-src 'self'"

Express.js

// Using helmet middleware (recommended)
const helmet = require('helmet');
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "https://cdn.example.com"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https:"],
  }
}));

// Or manually
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy',
    "default-src 'self'; script-src 'self'");
  next();
});

HTML Meta 태그

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self'">

일반적인 실수

FAQ