iframe 통합 시 토큰 요청 폭증 문제 해결기

이 게시물은 iframe으로 웹앱을 통합하면서 발생한 인증 토큰 요청 폭발 문제와 그 해결 과정을 다룹니다.

주요 문제와 해결책

• 동시 다발적인 토큰 요청을 Request Queueing으로 1회 처리
• 401 에러 동시 발생 시 Promise 공유 패턴으로 토큰 갱신 작업 단일화
• Refresh Token 만료 시 재로그인 처리 및 무한 재시도 방지를 위한 쿨다운 메커니즘 도입
• Origin 검증과 Rate Limiting으로 보안 강화

구현 핵심

• postMessage API를 활용해 부모-자식 iframe 간 안전한 토큰 공유
• Axios 인터셉터로 자동 토큰 갱신과 재시도 관리
• 비동기 요청 간 경합과 실패를 효과적으로 제어하는 패턴 적용

결과

안정적이고 보안이 강화된 인증 시스템 구축으로 사용자 경험을 유지하며 서버 부하를 크게 줄였습니다.