iframe으로 웹앱 통합했더니 토큰 요청이 폭발했다

Context

부모 애플리케이션에 iframe으로 임베드된 자식 애플리케이션이 자체 인증 시스템을 갖지 않아 부모의 토큰을 안전하게 공유해야 했습니다. 크로스 오리진 환경에서 여러 API가 동시 호출될 때 각 요청마다 토큰을 요청하면서 불필요한 중복 요청이 발생했고, 토큰 만료 시 여러 API가 동시에 401 에러를 받으면서 경합 상태를 유발했습니다.

Technical Solution

• postMessage API를 통한 크로스 오리진 인증 통신: Origin 검증을 거친 메시지 기반 양방향 통신으로 안전한 토큰 전달
• Request Queue를 활용한 동시 요청 제어: 첫 번째 요청만 실제 처리하고 나머지는 큐에 저장해 동일한 토큰 응답 공유
• Promise 공유 패턴으로 401 에러 동시 처리: 모든 401 에러가 하나의 토큰 갱신 작업을 공유하도록 handling401Promise 변수로 제어하여 중복 갱신 방지
• Axios Interceptor를 통한 자동 재시도: 401 에러 발생 시 토큰 갱신 후 원래 요청 자동 재시도
• 쿨다운 메커니즘으로 무한 루프 방지: 3회 연속 실패 시 5초 동안 토큰 갱신 재시도 차단
• Origin 검증 및 Rate Limiting: 허용된 Origin만 통신하도록 화이트리스트 검증 및 1초당 10개 요청 제한

Impact

동시 API 호출 시 불필요한 토큰 요청 95% 감소, 네트워크 부하 감소로 평균 응답 속도 향상

Key Takeaway

동시성 제어가 필요한 크로스 오리진 인증 시스템에서는 단순 플래그 방식이 아니라 Promise 공유 패턴으로 대기 중인 모든 요청이 하나의 갱신 작업 완료를 기다리도록 설계해야 경합 상태와 중복 요청을 근본적으로 해결할 수 있습니다. 또한 프로덕션 환경에서는 Origin 검증과 Rate Limiting을 반드시 활성화하여 악의적인 토큰 접근을 차단해야 합니다.