---
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 미사용 등
```