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

올리브영은 리테일 미디어 사업 확대를 위해 광고 파트너 오피스 시스템을 기존 플랫폼에 iframe으로 임베드하는 프로젝트를 진행했습니다. 자식 애플리케이션이 자체 인증 시스템이 없는 상황에서, 부모 애플리케이션의 인증 토큰을 안전하게 공유하는 것이 핵심 과제였습니다.

보안과 유연성을 고려하여 postMessage API를 통신 수단으로 선택했습니다. URL 파라미터의 보안 취약점과 Cookie의 SameSite 정책 제약을 피하기 위한 결정이었습니다. 하지만 구현 과정에서 여러 API가 동시에 호출될 때 발생하는 중복 토큰 요청과 401 에러의 연쇄 발생이라는 난관에 부딪혔습니다.

이를 해결하기 위해 다음과 같은 기술적 패턴을 적용했습니다.

• Request Queueing: 첫 번째 요청만 실제 처리를 수행하고, 나머지 요청은 큐에 담아 결과를 공유하여 중복 요청을 방지했습니다.
• Promise 공유 패턴: 401 에러 발생 시 여러 요청이 동시에 토큰 갱신을 시도하지 않도록 하나의 Promise를 공유해 처리했습니다.
• 보안 강화: Origin 검증과 Rate Limiting, Cool-down 메커니즘을 도입하여 무한 재시도 루프와 보안 위협을 차단했습니다.