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

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

## 설정된 CSP 정책

### 기본 img-src 정책
```javascript
img-src 'self' data: https: blob:;
```

### 환경별 설정
- **개발 환경**: `img-src 'self' data: https: blob: http://localhost:*;`
- **프로덕션 환경**: `img-src 'self' data: https: blob:;`

## 구현 방법

### 1. next.config.ts에서 설정 (권장)
```typescript
async headers() {
  return [
    {
      source: "/(.*)",
      headers: [
        {
          key: "Content-Security-Policy",
          value: "img-src 'self' data: https: blob:;"
        }
      ]
    }
  ];
}
```

### 2. 미들웨어에서 설정
```typescript
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 이미지 허용 (파일 업로드 등)

### 추가 도메인 허용
```javascript
// 특정 도메인 허용
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` 엔드포인트 로그 확인

## 유틸리티 함수 사용

### 도메인 추가
```typescript
import { addImageDomain } from '@/shared/config/csp';

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

### 정책 검증
```typescript
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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src)
- [CSP Evaluator](https://csp-evaluator.withgoogle.com/)