frontend/apps/cs/docs/csp-setup.md

Content Security Policy (CSP) - img-src 설정 가이드

개요

이 문서는 CS 앱에서 Content Security Policy의 img-src 지시어를 설정하고 관리하는 방법을 설명합니다.

설정된 CSP 정책

기본 img-src 정책

img-src 'self' data: https: blob:;

환경별 설정

• 개발 환경: img-src 'self' data: https: blob: http://localhost:*;
• 프로덕션 환경: img-src 'self' data: https: blob:;

구현 방법

1. next.config.ts에서 설정 (권장)

async headers() {
  return [
    {
      source: "/(.*)",
      headers: [
        {
          key: "Content-Security-Policy",
          value: "img-src 'self' data: https: blob:;"
        }
      ]
    }
  ];
}

2. 미들웨어에서 설정

function addSecurityHeaders(response: NextResponse): NextResponse {
  response.headers.set("Content-Security-Policy", "img-src 'self' data: https: blob:;");
  return response;
}

img-src 지시어 설명

허용된 소스

• 'self': 같은 출처(도메인)의 이미지 허용
• data:: Data URL 이미지 허용 (base64 인코딩된 이미지)
• https:: HTTPS 프로토콜의 모든 도메인에서 이미지 허용
• blob:: Blob URL 이미지 허용 (파일 업로드 등)

추가 도메인 허용

// 특정 도메인 허용
img-src 'self' data: https: blob: https://images.example.com;

// 여러 도메인 허용
img-src 'self' data: https: blob: https://cdn.example.com https://images.example.com;

문제 해결

일반적인 img-src 위반

1. 외부 이미지 로드 실패

   • 해결: 해당 도메인을 img-src에 추가
   • 예: https://example.com을 img-src에 추가

2. Data URL 이미지 차단

   • 해결: data:가 img-src에 포함되어 있는지 확인

3. Blob URL 이미지 차단

   • 해결: blob:이 img-src에 포함되어 있는지 확인

디버깅 방법

1. 브라우저 개발자 도구 확인

   • Console 탭에서 CSP 위반 메시지 확인
   • Network 탭에서 차단된 이미지 확인

2. CSP 위반 로그 확인

   • 서버 로그에서 CSP 위반 보고 확인
   • /api/csp-violation 엔드포인트 로그 확인

유틸리티 함수 사용

도메인 추가

import { addImageDomain } from '@/shared/config/csp';

// 개발 환경에 도메인 추가
const newPolicy = addImageDomain('https://example.com', 'development');

정책 검증

import { validateImgSrcPolicy } from '@/shared/lib/csp-utils';

const isValid = validateImgSrcPolicy('img-src self data: https:;');

보안 권장사항

1. 최소 권한 원칙

   • 필요한 도메인만 허용
   • 불필요한 도메인 제거

2. 정기적인 정책 검토

   • 사용하지 않는 도메인 제거
   • 새로운 이미지 소스 추가 시 검토

3. HTTPS 사용 권장

   • 가능한 한 HTTPS 도메인만 허용
   • HTTP는 개발 환경에서만 사용

환경 변수

• DISABLE_CSP=true - 개발 환경에서 CSP 비활성화
• NODE_ENV - 환경별 정책 적용

추가 리소스

• MDN CSP img-src
• CSP Evaluator