X-Frame-Options, <frame> <iframe> 으로 oauth/authorize 호출

frame 안에서 oauth/authorize 호출 시, 크롬 브라우저 에러

frame 태그에 의한 보안문제-대표적으로 Clickjacking. 로 인해 2009년 경, 대부분의 브라우저는 HTTP헤더의 X-Frame-Options 체크를 도입했습니다. 

 

클라이언트 브라우저 frame에서 외부 URL 호출 시, HTTP헤더의 X-Frame-Options 옵션이 허용되어 있지 않으면 결과를 렌더링 하지 않습니다. 위 이미지와 같이 명시적으로 연결 거부 메시지를 보여주거나 빈화면을 표시합니다. 

 

X-Frame-Options 헤더 설정은 주소 요청 받는 Backend 서버에서 설정 가능하며 다음과 같이 3가지 설정 가능합니다. 

X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://devtalk.kakao.com/

헤더 설정이 없다면, 기본 deny 됩니다. 웹 페이지에서 <meta http-equiv="X-Frame-Options" content="..."> 설정은 작동하지 않고 Apach, nginx, IIS 등 서버에서 설정 할 수 있습니다. X-Frame-Options은 PC와 모바일 모든 브라우저 지원합니다. 

 

카카오 로그인을 적용하기 위해서는?

<frame> <iframe>을 제거합니다. 제거하기 어렵다면 JavaScript SDK 의 팝업 방식 로그인을 적용하면 됩니다.