프런트엔드 개발자를 위한 보안 바이블: UX와 신뢰를 보호하는 기술

이현수 지음

콩콩컴퍼니 2025년 09월 30일 출간

작품소개

책소개

웹 애플리케이션의 첫인상은 브라우저에서 결정됩니다.
이 책은 프런트엔드 관점에서 사용자 경험(UX)과 보안을 동시에 지키는 실무 가이드입니다.
단순히 공격 유형을 나열하는 이론서가 아니라, 개발자가 실제로 마주하는 코드·설정·의존성 문제를 중심으로 발견 → 분석 → 해결까지 단계별로 설명합니다.

누구를 위한 책인가?
SPA, 웹앱의 프런트엔드를 개발·운영하는 개발자
보안과 UX 사이에서 균형을 찾고 싶은 디자이너·PM
프런트엔드 취약점(개인정보 유출, 세션 탈취 등)을 실무에서 막고 싶은 팀 리드
실전 기반의 포트폴리오를 만들고 싶은 개발자

이 책으로 얻는 것
브라우저 보안 모델(SOP/CORS, 쿠키 속성, 샌드박스)의 정확한 이해
XSS, CSRF, 클릭재킹 등 사용자의 신뢰를 깨는 공격에 대한 실전 방어 기술
안전한 토큰 관리와 인증 플로우 설계(PKCE, Silent Refresh 등)
CSP, SRI, 서드파티 스크립트 관리로 공급망 공격(Supply Chain) 방어

목차

프롤로그: 사용자가 가장 먼저 만나는 코드, 그곳에서 보안은 시작된다

Part 1: 보이지 않는 전쟁터, 브라우저 (기초 다지기)
Chapter 1: 브라우저의 보안 모델 이해하기
1-1. 보안의 시작과 끝: 동일 출처 정책(SOP, Same-Origin Policy)
1-2. SOP를 넘어서: CORS(Cross-Origin Resource Sharing)의 원리와 흔한 실수들
1-3. 쿠키(Cookie)의 동작 방식과 보안 속성
1-4. 브라우저 샌드박스와 iframe의 보안 속성 (sandbox, allow)
Chapter 2: 공격자의 눈으로 프런트엔드 바라보기
2-1. 사용자를 속이는 가장 쉬운 방법: 사회 공학(Social Engineering)과 피싱(Phishing)
2-2. 주요 프런트엔드 공격 벡터 분석
2-3. "클라이언트는 절대 신뢰할 수 없다(Never Trust the Client)" 원칙의 의미

Part 2: 사용자의 신뢰를 파괴하는 공격과 방어 기술 (핵심 실무)
Chapter 3: XSS (Cross-Site Scripting): 내 웹사이트가 배신자가 될 때
3-1. XSS 공격의 세 가지 얼굴: Stored, Reflected, 그리고 DOM-based XSS
3-2. React, Vue, Angular는 어떻게 XSS를 막아주는가? (그리고 어떻게 뚫리는가?)
3-3. DOM Clobbering: DOM 조작을 통한 예상치 못한 변수 덮어쓰기
3-4. 방어의 정석: 출력 시 컨텍스트(Context)에 맞는 이스케이프(Escaping) 처리
3-5. 정화(Sanitization)와 이스케이프(Escaping)의 차이점 (DOMPurify 라이브러리 활용)
Chapter 4: CSRF와 클릭재킹: 사용자의 의도를 훔치는 공격
4-1. CSRF(Cross-Site Request Forgery): 나도 모르게 글이 써지고 돈이 보내진다
4-2. 전통적인 방어법: Referer 헤더 체크와 CSRF 토큰 패턴
4-3. 최신 방어법: SameSite 쿠키 속성을 활용한 강력하고 간편한 방어
4-4. 클릭재킹(Clickjacking): 투명한 UI 뒤에 숨은 함정
4-5. 방어법: X-Frame-Options와 CSP frame-ancestors 헤더 비교 및 적용
Chapter 5: 클라이언트 측 데이터 저장소의 비밀
5-1. JWT, 어디에 저장해야 할까? LocalStorage vs. SessionStorage vs. Cookie
5-2. LocalStorage의 한계: XSS 한 방에 모든 것이 털린다
5-3. 안전한 토큰 관리를 위한 쿠키 전략 (HttpOnly, Secure, SameSite)
5-4. API 키와 같은 민감 정보, 절대 프런트엔드 코드에 두지 마라
Chapter 6: 안전한 인증 및 세션 관리 (신규 추가)
6-1. 현대적 인증 플로우의 이해: OAuth 2.0와 OIDC 프런트엔드 관점
6-2. SPA를 위한 필수 방어 기술: PKCE(Proof Key for Code Exchange)의 중요성
6-3. 토큰 재발급(Refresh Token) 전략과 사일런트 리프레시(Silent Refresh)의 보안적 고려사항
6-4. 안전한 로그아웃 구현: 클라이언트와 서버의 상태 동기화

Part 3: 철옹성을 만드는 브라우저의 방패 (심화 과정)
Chapter 7: 콘텐츠 보안 정책 (CSP): 우리 편만 골라내기
7-1. CSP(Content Security Policy)란 무엇이며 왜 강력한가?
7-2. 단계별 CSP 적용 가이드: report-only부터 enforce까지
7-3. 인라인 스크립트와 스타일을 허용하는 안전한 방법 (nonce, hash)
7-4. strict-dynamic을 이용한 현대적인 CSP 정책 관리
7-5. XSS와 데이터 유출을 막는 최후의 보루: CSP 지시어 심층 분석
Chapter 8: 외부의 위협으로부터 코드 보호하기
8-1. node_modules에 숨은 트로이 목마: 서드파티 라이브러리 취약점 (Supply Chain Attack)
8-2. npm audit, Snyk, Dependabot을 이용한 자동화된 취약점 검사
8-3. CDN 스크립트의 무결성 보장: SRI(Subresource Integrity)
8-4. 안전한 외부 링크 처리: rel="noopener noreferrer"의 중요성과 target="_blank"의 위험성
8-5. 제3자 스크립트(Third-Party Scripts)의 위험성과 관리 방안 (Google Analytics, 채팅봇 등)
Chapter 9: 안전한 통신과 사용자 경험
9-1. HTTPS는 기본 중의 기본: 혼합 콘텐츠(Mixed Content) 오류 해결하기
9-2. HSTS(HTTP Strict Transport Security)로 HTTPS 연결 강제하기
9-3. 안전한 로그인 폼 구현: autocomplete 속성과 Credential Stuffing 방어
9-4. 사용자에게 신뢰를 주는 보안 관련 UI/UX 디자인 (에러 메시지, 권한 요청 등)
9-5. 추가 보안 헤더 활용하기: Permissions-Policy, Referrer-Policy, Clear-Site-Data

Part 4: 보안을 문화로 만드는 개발 프로세스 (실전 응용)
Chapter 10: 개발 파이프라인에 보안 심기 (DevSecOps for Frontend)
10-1. 프런트엔드 코드 리뷰를 위한 보안 체크리스트
10-2. 보안 Linter(ESLint Plugin)를 활용한 자동화된 검사
10-3. 프런트엔드 개발자와 보안팀이 소통하고 협업하는 법
10-4. 우리 팀의 보안 챔피언 되기: 지식 전파와 문화 조성
Chapter 11: 실전! 취약한 쇼핑몰 SPA(Single Page Application) 보안 강화하기
11-1. [실습] 요구사항 분석 및 취약한 코드(React/Vue) 리뷰
11-2. [실습] XSS, CSRF, 토큰 탈취 등 주요 취약점 공격 시나리오 시연
11-3. [실습] CSP 적용, 의존성 검사, 토큰 저장 방식 변경 등 단계별 코드 개선
11-4. [실습] 브라우저 개발자 도구를 이용한 보안 강화 결과 확인

부록 A: 프런트엔드 개발자를 위한 보안 체크리스트
A-1. 컴포넌트 개발 시 체크리스트
A-2. PR(Pull Request) 생성 시 체크리스트
A-3. 배포 전 최종 점검 체크리스트

인물정보

저자(글) 이현수