142 lines
3.8 KiB
Markdown
142 lines
3.8 KiB
Markdown
---
|
|
name: security-review
|
|
description: |
|
|
프론트엔드 코드에서 XSS, CSRF, 민감 정보 하드코딩, npm 의존성 취약점을 자동 감지하고
|
|
우선순위별 보안 리포트와 패치 가이드를 생성합니다.
|
|
|
|
다음 상황에서 반드시 사용하세요:
|
|
- "보안 점검해줘", "취약점 검사해줘", "npm audit 분석해줘"
|
|
- PR/배포 전 보안 체크리스트를 확인할 때
|
|
- 민감 정보 하드코딩이 의심될 때
|
|
---
|
|
|
|
# 프론트엔드 보안 검토 (security-review)
|
|
|
|
코드베이스 + npm audit → XSS / CSRF / 민감 정보 / 의존성 취약점 자동 스캔 → 보안 리포트.
|
|
|
|
## 언제 사용하는가
|
|
|
|
- PR 머지 전 보안 사전 검토
|
|
- 배포 전 최종 보안 체크리스트
|
|
- 의존성 업데이트 후 취약점 확인
|
|
|
|
## 스캔 범위
|
|
|
|
| 항목 | 설명 |
|
|
|---|---|
|
|
| XSS | `v-html`, `innerHTML`, `dangerouslySetInnerHTML` 사용 |
|
|
| 민감 정보 하드코딩 | API 키, 토큰, 비밀번호, 시크릿 리터럴 |
|
|
| CSRF | `SameSite` 쿠키 설정, CORS 구성 |
|
|
| 오픈 리다이렉트 | 검증 없는 외부 URL 리다이렉트 |
|
|
| npm 의존성 취약점 | CVE 등급별 취약 패키지 |
|
|
| 환경 변수 노출 | `NUXT_PUBLIC_` 외 시크릿을 클라이언트에 노출 |
|
|
|
|
---
|
|
|
|
## 작업 순서
|
|
|
|
### Phase 1: 코드 정적 분석
|
|
|
|
1. 소스 파일을 스캔해 아래 패턴을 탐지한다.
|
|
|
|
#### XSS 위험
|
|
```vue
|
|
<!-- ⚠️ 위험: v-html에 사용자 입력 직접 바인딩 -->
|
|
<div v-html="userInput" />
|
|
|
|
<!-- ✅ 안전: DOMPurify로 새니타이징 -->
|
|
<div v-html="sanitize(userInput)" />
|
|
```
|
|
|
|
탐지 패턴:
|
|
- `v-html` + 사용자 입력 변수 바인딩
|
|
- `innerHTML =` 직접 할당
|
|
- `eval()`, `Function()` 사용
|
|
|
|
#### 민감 정보 하드코딩
|
|
탐지 패턴:
|
|
- `apiKey`, `api_key`, `secret`, `password`, `token` 변수에 리터럴 문자열 할당
|
|
- `.env` 파일이 아닌 소스 코드에 키 형태 문자열 (예: `sk-...`, `Bearer ...`)
|
|
- `nuxt.config.ts`에 시크릿을 `public` 섹션에 노출
|
|
|
|
```ts
|
|
// ⚠️ 위험
|
|
const apiKey = 'sk-abc123...'
|
|
|
|
// ✅ 안전
|
|
const apiKey = useRuntimeConfig().apiKey // 서버 전용
|
|
```
|
|
|
|
#### 오픈 리다이렉트
|
|
```ts
|
|
// ⚠️ 위험: 검증 없는 외부 URL 리다이렉트
|
|
const to = route.query.redirect as string
|
|
navigateTo(to)
|
|
|
|
// ✅ 안전: 내부 경로만 허용
|
|
const to = route.query.redirect as string
|
|
if (to && to.startsWith('/')) navigateTo(to)
|
|
```
|
|
|
|
#### Nuxt 환경 변수 분리 확인
|
|
- 서버 전용 시크릿: `runtimeConfig.apiSecret` (클라이언트 미노출)
|
|
- 공개 가능한 값만: `runtimeConfig.public.apiBase`
|
|
|
|
### Phase 2: npm 의존성 취약점 스캔
|
|
|
|
```bash
|
|
npm audit --json
|
|
```
|
|
|
|
결과를 파싱해 CVE 등급별로 분류:
|
|
- **Critical / High**: 즉시 패치 필요
|
|
- **Moderate**: 스프린트 내 패치
|
|
- **Low**: 모니터링
|
|
|
|
각 취약 패키지에 대해 안전 버전 및 업그레이드 명령어를 제시한다.
|
|
|
|
### Phase 3: 보안 헤더 확인
|
|
|
|
`nuxt.config.ts`의 `routeRules` 또는 서버 설정에서 아래 헤더를 확인한다:
|
|
|
|
```ts
|
|
// nuxt.config.ts 권장 보안 헤더
|
|
routeRules: {
|
|
'/**': {
|
|
headers: {
|
|
'X-Content-Type-Options': 'nosniff',
|
|
'X-Frame-Options': 'DENY',
|
|
'Referrer-Policy': 'strict-origin-when-cross-origin',
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 출력 형식
|
|
|
|
```
|
|
## 보안 검토 리포트
|
|
|
|
### 🔴 Critical (즉시 조치)
|
|
- [파일:라인] 취약점 설명 + 수정 코드
|
|
|
|
### 🟡 High (스프린트 내 조치)
|
|
- [파일:라인] 취약점 설명 + 개선 방향
|
|
|
|
### 🟢 Moderate / Low
|
|
- [목록]
|
|
|
|
### npm 취약점
|
|
- Critical: N건 — `npm audit fix --force` 권장 패키지: [목록]
|
|
- High: N건 — 안전 버전: [버전 목록]
|
|
|
|
### 보안 헤더 현황
|
|
- 적용됨: [목록]
|
|
- 미적용: [목록 + 추가 코드]
|
|
|
|
### ✅ 정상 항목
|
|
- 환경 변수 분리 적절, v-html 미사용 등
|
|
```
|