카카오 로그인:: iframe을 이용한 REST API, OAuth시 X-Frame-Origin 이슈

카카오 로그인 API 이슈
1. X-Frame-Options 헤더 문제

a1

X-Frame-Options 헤더에 의해서 차단된 경우. (크롬 브라우저 최신버전 – 디자이너 PC)

a2

정상적으로 동작하는 기대 결과. (크롬 브라우저 구 버전 – 개발자 PC)

저희 측 코드 플로우:
a3

요청 사항 1. Origin/Referer에 기반한 X-Frame-Origin 헤더 셋팅.

Redirect URI 셋팅할 때처럼, X-Frame-Origin도 셋팅 할 수 있으면 좋겠네요.

  1. X-Frame-Origin: deny (기본)
  2. X-Frame-Origin: allow-from https://…/

MDN Web Docs, X-Frame-Origin 헤더 페이지:
allow-from uri
The page can only be displayed in a frame on the specified origin. Note that in Firefox this still suffers from the same problem as sameorigin did — it doesn’t check the frame ancestors to see if they are in the same origin.

  1. iOS 상에서 OAuth 완료가 제대로 되지 않는 문제.
    로그인 절차가 정상적으로 이뤄져도, OAuth Code가 유효하지 않다는 응답. (;:wink:

안녕하세요. 카카오 입니다.

문의주신 X-Frame-Options 는 카카오 동의창에서 지원하지 않고 있습니다.
Iframe으로 카카오 동의창을 호출하려는 것인가요??
왜 필요하신 것인지 자세한 설명을 해 주신다면 검토해 보도록 하겠습니다.

감사합니다.

현재 저희가 원 페이지 앱을 작업하고 있습니다. 모든 페이지 로딩이 AJAX로 이뤄지구요, 내부적으로 히스토리 Push-State를 수동으로 관리하도록 개발되어 있어서 다른 페이지로 이탈 시킬 수가 없는 상황입니다. 주요 기능들이 모두 자바스크립트로 구현되어 있고, 서버 측 코드를 실행 해야 하는 경우에만 서버로 AJAX 요청을 보내도록 설계되어 있습니다.

따라서, 로그인 시에 인터페이스를 REST OAuth를 iframe을 통해 진행하려는 것입니다.
최종 OAuth 콜백은 카카오 서버측에서 수신한 토큰으로 저희 서버측 상태를 업데이트하고, 자바스크립트로 iframe 밖에 있는 AuthState 관리 객체에 상태 변경을 통보하여 AJAX로 인터페이스를 업데이트 하는 방식입니다.

다만, X-Frame-Options를 체크하는 브라우저에서 프레임 오리진 문제를 일으켜서 요청을 드렸습니다.
CORS 시에는 Redirect URI를 체크해서 정상적으로 Access-Control 헤더를 출력해 주는데, X-Frame-Origin은 따로 확인하는 과정이 없는 것 같아서요.

opa

(이 페이지 자체가 APK로 포장되어 배포될 예정이고, 동일한 코드로 모바일 웹, 앱 모두를 지원하려는 목적입니다)

P.S. 보안 문제라면, 브라우저 자체가 iframe의 Origin과 상위 도큐먼트의 Origin을 대조하여 일치하지 않으면 상호 조작이 불가능 하기 때문에 문제가 없을 것으로 생각해요…

a

c
(중간에 화면을 짜른건 전화번호 때문입니다)

프론트엔드 minify 전 단계에서의 소스코드 검수가 필요하다면 받을 수 있습니다.

안녕하세요. 카카오 입니다.
문의주신 X-Frame-Options 지원 스펙에 대하여, 내부 검토 내용 공유드립니다.

말씀하신 사례에서 카카오 로그인을 연동하도록 하기위해 X-Frame-Options을 지원하도록 결정하였습니다.
디벨로퍼스의 '앱 > 설정 > 일반 > 웹 플랫폼’의 사이트 도메인에 등록된 URL에 대하여 허용하도록 진행 할 예정입니다.

다만 내부 개발일정으로 인하여 바로 개발을 진행하긴 어려우며, 9월 말 진행될 수 있을 것으로 예상합니다.
(내부 일정에 따라 변경이 생길 수 있습니다)

감사합니다.

1개의 좋아요

안녕하세요. 카카오 입니다.

지난 번 문의주셨던, 카카오 동의창의 iframe 내 허용과 관련하여, 저희 측의 논의 내용 공유드립니다.

최초 답변 시, X-Frame-Options를 활용하여 특정 도메인에 대하여 iframe을 허용도록 진행하겠다는 답변을 드렸습니다.
카카오 동의창은 동의 약관중 필요한 항목에 대하여 선택 후 동의를 진행하는 것으로
iframe 사용에 따른 보안 위험이 없을 것 으로 판단하여 이러한 답변을 드리게 되었습니다.

그러나, 카카오 동의창은 카카오 계정 로그인이 되어 있지 않은 경우,
카카오 계정 로그인을 진행한 뒤 동의창을 노출시키도록 되어있기 때문에
카카오 로그인 페이지에 대해서도 iframe이 허용되어야 하는 상황 임을 확인하였습니다.

카카오 로그인의 경우, 계정의 ID/PW를 직접 입력하는 화면이 되기 때문에,
담당 부서에서 iframe을 허용하는 것은 보안에 위험하여 허용할 수 없다고 확인하였습니다.

따라서, 카카오 동의창에서도 iframe을 허용하는 것을 진행할 수 없게 되었습니다.
긍정적인 답변을 드리지 못해 죄송하다는 말씀들 드립니다.

감사합니다.

1개의 좋아요