🛡️ Frontend Security Lab (Skill Step Labs Series #10)

웹 프론트엔드 보안(Frontend Security) & 취약점 방어 아키텍처 실습 랩
🔗 GitHub Topics: #frontend-architecture #frontend-security #xss-defense #csrf-protection #csp #cors

---

📌 1. 프로젝트 개요 (Overview)

본 레포지거리는 웹 어플리케이션 개발 시 간과하기 쉬운 클라이언트 취약점(XSS, CSRF, Clickjacking, CORS 위반) 공격 시나리오와 이를 원천 차단하는 시큐어 코딩(Secure Coding) 방어 아키텍처를 실습합니다.

---

🛠️ 2. 기술 스택 (Tech Stack)

구 분	기술 스택 / 보안 정책	주요 용도
XSS Defense	DOMPurify, HTML Entity Escape	스크립트 주입 공격 정제 및 Safe HTML 렌더링
Session & Auth	HTTP-Only Cookie, SameSite=Strict, CSRF Token	세션 탈취 및 제3자 사이트 위조 요청 차단
Browser Security	Content-Security-Policy (CSP), CORS Preflight	승인되지 않은 외부 스크립트/폰트 로딩 방지

---

💡 3. 핵심 학습 모듈 (Key Learning Modules)

1) XSS (Cross-Site Scripting) 방어 (src/xss/)

• 위치: src/xss-defense.ts
• 핵심: Stored XSS / Reflected XSS 공격 벡터 시뮬레이션 및 dangerouslySetInnerHTML 사용 시 DOMPurify 새니타이징 파이프라인.

2) CSRF & 안전한 토큰 저장소 (src/auth/)

• 위치: src/csrf-token.ts, src/token-storage.ts
• 핵심: LocalStorage (XSS에 탈취 취약) 대 HTTP-Only SameSite Cookie + In-Memory Access Token 이중 토큰 패턴.

3) CORS & CSP 헤더 인스펙터 (src/headers/)

• 위치: src/csp-builder.ts
• 핵심: script-src 'self', default-src Content Security Policy 헤더 빌더 및 CORS Preflight(OPTIONS) 검증.

---

🎯 4. 핵심 엔지니어링 & 트레이드오프 딥다이브 (Core Engineering Deep-Dive)

Q1. JWT 토큰을 LocalStorage 대신 HTTP-Only Cookie 및 In-Memory에 나누어 저장하는 보안 근거는?

분석: LocalStorage는 JS 코드(window.localStorage)로 접근 가능하므로 XSS 취약점 발생 시 탈취될 위험이 있습니다. HTTP-Only 쿠키는 JS 접근을 차단하여 유출을 방지합니다. 단, CSRF 공격을 막기 위해 SameSite=Strict 옵션과 짧은 유효기간의 In-Memory Access Token을 조합하는 이중 토큰 구조가 권장됩니다.

Q2. XSS (Cross-Site Scripting) 공격 유형과 클라이언트 단에서의 심층 방어 체계는?

분석: Stored XSS, Reflected XSS, DOM-based XSS가 있습니다. 프론트엔드에서는 동적 HTML 바인딩 시 DOMPurify 라이브러리로 Sanitization을 수행하고, 브라우저 단에서 CSP(Content Security Policy) 헤더를 적용하여 인라인 스크립트 실행(unsafe-inline)을 차단합니다.

Q3. CORS (Cross-Origin Resource Sharing)와 Preflight 검증이 보호하는 영역은?

분석: 브라우저는 출처(Origin: Protocol + Host + Port)가 다른 서버로 커스텀 헤더(Authorization)나 PUT/DELETE 요청을 보낼 때, 본 요청 전 OPTIONS 메서드로 Preflight를 보내 서버의 허용 여부(Access-Control-Allow-Origin)를 확인합니다. CORS는 서버 간 통신이 아닌 브라우저 사용자 보호를 위한 정책입니다.

---

🏃 5. 로컬 실행 & 보안 테스트 (How to Run)

# 1. 의존성 설치
npm install

# 2. 보안 공격 & 방어 유닛 테스트 실행
npm test

---

🗺️ 6. Skill Step Labs 성격별 카테고리 로드맵

🎨 1. Frontend & Mobile Web Architecture (#frontend-architecture)

• b2b-mes-admin-lab: FSD Architecture, AG-Grid/Handsontable, MFE, BFF, State Studio
• frontend-performance-lab: Vite/Webpack, Canvas/SVG, RN WebView Bridge, PWA, App Store
• frontend-coding-interview-lab: FE 알고리즘 & 바닐라 JS/React 하드코딩
• frontend-security-lab: XSS/CSRF 방어, CSP, SameSite Cookie, CORS

⚡ 2. Fullstack & Backend Performance (#backend-performance)

• fullstack-reliability-lab: 멱등성, 낙관적 락, 지수 백오프 & 서킷 브레이커
• backend-performance-lab: FastAPI, Connection Pooling, Redis Cache, N+1 Query

🐳 3. Infrastructure & DevOps (#infra-devops)

• docker-infra-lab: Multi-stage Docker, Compose, Nginx Proxy, CI/CD

🧠 4. AI Engineering & Data Platform (#ai-data-platform)

• llm-rag-data-platform-lab: RAG, ChromaDB/FAISS Vector Store, AWS Bedrock
• ai-product-patterns-lab: SSE Streaming, AI Fallback Router, Rate Limiter

📱 5. Mobile Native Architecture (#mobile-native)

• android-architecture-lab: Clean Architecture, MVI, Compose, Coroutines/StateFlow