124 lines
3.2 KiB
Markdown
124 lines
3.2 KiB
Markdown
# 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/) |