keycloak NICE 본인 인증 구현 - iOS 팝업, 사파리 ITP 문제

1. ITP(지능형 추적 방지)가 뭔가요?

ITP(Intelligent Tracking Prevention)는 애플이 Safari 브라우저에 도입한 초강력 개인정보 보호 기술입니다. 사용자가 여러 웹사이트를 돌아다닐 때 광고 회사들이 쿠키를 이용해 사용자를 추적(Tracking)하는 것을 막기 위해, 제3자 쿠키(Third-party Cookie)의 접근을 아주 엄격하게 차단합니다.

2. 왜 '일반 팝업'에서 세션(로그인 상태)이 날아갈까?

이해하기 쉽게 '본인 인증' 팝업을 띄우는 상황을 상상해 보세요.

1. 사용자가 내 웹사이트(A.com)에서 로그인한 상태로 '인증하기' 버튼을 누릅니다.
2. window.open 등으로 새 팝업창이 뜹니다.
3. 팝업창 안에서 본인확인기관(NICE.com)으로 페이지가 이동하여 인증을 진행합니다.
4. 인증이 끝나고 팝업창이 다시 내 웹사이트(A.com/success)로 돌아옵니다.

바로 이 4번 단계에서 사파리(ITP)가 태클을 겁니다! 사파리 입장에서는 팝업창이 NICE.com을 거쳐서 왔기 때문에, 다시 A.com으로 돌아왔을 때 이 접근을 **"외부 사이트(NICE)가 A.com의 쿠키를 훔쳐보려 한다!"**라고 오해하고 제3자(Third-party) 접근으로 간주해 버립니다.

결과적으로 팝업창 안에서는 내 사이트(A.com)의 기존 세션 쿠키를 읽을 수 없게 되고, 서버는 "어? 너 쿠키 없네? 로그인 안 한 유저구나!" 하고 세션이 끊긴(로그아웃) 상태로 처리해 버리는 대참사가 일어납니다.

3. 실무에서의 해결책 (How to fix)

이 문제는 사파리의 정책이라 우리가 코드로 억지로 쿠키를 뚫어낼 방법은 없습니다. 따라서 아키텍처(흐름) 자체를 우회해야 합니다. 주로 다음 두 가지 방법을 씁니다.

• 해결책 A: 팝업을 포기하고 페이지 이동(Redirect)으로 변경 (가장 추천)
  • 가장 확실하고 정신 건강에 좋은 방법입니다. 새 팝업(window.open)을 띄우지 않고, 사용자가 보고 있던 현재 창(페이지) 전체를 인증/결제 페이지로 이동시킵니다.
  • 작업이 끝나면 다시 원래 페이지로 리다이렉트 시키면서 URL 파라미터 등에 결과를 담아옵니다. (현재 모바일 웹에서는 이 방식이 표준처럼 쓰입니다.)
• 해결책 B: 쿠키에 의존하지 않는 식별자(Token) 사용
  • 팝업을 무조건 유지해야 한다면, 쿠키(세션)에 의존하지 않고 임시 토큰(Token)이나 주문 번호를 사용합니다.
  • 팝업을 띄울 때 URL 뒤에 ?token=abcde... 처럼 고유 값을 붙여서 보내고, 팝업창에서 작업이 완료되면 부모 창(Parent Window)으로 postMessage API 등을 통해 결과와 토큰을 던져주어 부모 창에서 후속 처리를 하게 만듭니다.

 

---

 

---

 

 

iOS는 팝업이 아닌 리다이렉션 방식으로 구현하면 사용자가 뒤로가기를 할 수 없어서 팝업으로 구현