React 시니어 보안 기술면접

액세스 토큰은 메모리(React state/context)에 저장하고, 리프레시 토큰은 httpOnly, Secure, SameSite=Strict 속성의 쿠키에 저장하는 것이 가장 안전합니다. localStorage는 XSS 공격 시 JavaScript로 직접 접근 가능해 위험하며, httpOnly 쿠키는 JavaScript 접근이 불가능해 XSS 방어에 유리하지만 CSRF 위험이 있어 SameSite 속성과 CSRF 토큰으로 보완해야 합니다. 메모리 저장은 새로고침 시 토큰이 사라지므로, 초기 로드 시 리프레시 토큰으로 액세스 토큰을 재발급받는 silent refresh 메커니즘을 구현해야 합니다. 추가 보안 레이어로 디바이스 fingerprinting(User-Agent, IP 등)을 토큰에 바인딩하고, 리프레시 토큰은 일회용(Rotation)으로 설계하여 탈취 시 재사용을 방지하며, 짧은 액세스 토큰 만료 시간(5-15분)과 anomaly detection을 통해 비정상 접근을 탐지해야 합니다.

Strict CSP 구성을 위해 'unsafe-inline'을 제거하고 nonce 또는 hash 기반 접근을 사용해야 합니다. SSR 환경에서는 각 요청마다 랜덤 nonce를 생성하여 script와 style 태그에 추가하고 CSP 헤더에 포함시키는 nonce 방식이 유연하며, 정적 빌드에서는 빌드 타임에 script 내용의 SHA-256 해시를 계산하여 CSP에 명시하는 hash 방식을 사용합니다. CSS-in-JS 라이브러리는 nonce를 prop으로 전달받아 동적 생성되는 style 태그에 적용하도록 설정하고(styled-components의 StyleSheetManager), third-party 스크립트는 신뢰할 수 있는 도메인만 script-src에 명시하거나 Subresource Integrity(SRI)를 함께 사용합니다. CSP 위반 시 report-uri 또는 report-to 디렉티브로 위반 정보를 수집 엔드포인트로 전송하여 Sentry나 자체 로깅 시스템으로 모니터링하며, 초기에는 Content-Security-Policy-Report-Only 헤더로 영향도를 파악한 후 단계적으로 엄격화합니다.

프론트엔드에서는 쿠키 배너를 통해 granular consent(필수/선택 분리)를 수집하고, 동의 상태를 localStorage와 서버에 동기화하여 관리하며, 동의 철회 시 관련 쿠키와 로컬 데이터를 즉시 삭제해야 합니다. 민감정보(주민번호, 카드번호)는 Web Crypto API를 사용해 클라이언트에서 공개키로 암호화한 후 전송하고, 화면 표시 시 마스킹 처리하며, 메모리에서도 사용 후 즉시 제거합니다. 에러 로깅 시스템에는 PII 필터링 레이어를 구현하여 이메일, 전화번호, 토큰 등을 정규식과 패턴 매칭으로 자동 마스킹하고, Sentry 같은 도구의 beforeSend 훅을 활용합니다. 개발 환경에서는 실제 데이터 대신 faker.js로 생성한 mock 데이터를 사용하고, 프로덕션 데이터베이스 덤프 시 개인정보 컬럼을 자동으로 anonymize하는 스크립트를 CI/CD에 통합하며, 개발자 도구 네트워크 탭 캡처 시 민감정보가 노출되지 않도록 교육과 코드 리뷰 체크리스트를 운영합니다.