game-fe-agent/skills/security-review/SKILL.md

name, description

name	description
security-review	프론트엔드 코드에서 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 위험

<!-- ⚠️ 위험: 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 섹션에 노출

// ⚠️ 위험
const apiKey = 'sk-abc123...'

// ✅ 안전
const apiKey = useRuntimeConfig().apiKey  // 서버 전용

오픈 리다이렉트

// ⚠️ 위험: 검증 없는 외부 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 의존성 취약점 스캔

npm audit --json

결과를 파싱해 CVE 등급별로 분류:

• Critical / High: 즉시 패치 필요
• Moderate: 스프린트 내 패치
• Low: 모니터링

각 취약 패키지에 대해 안전 버전 및 업그레이드 명령어를 제시한다.

Phase 3: 보안 헤더 확인

nuxt.config.ts의 routeRules 또는 서버 설정에서 아래 헤더를 확인한다:

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