번개애비의 라이프스톼일

카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS] 본문

IT

카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS]

번개애비 2019. 6. 17. 21:46

더 쾌적하게?

웹 서비스를 개발하는 입장에서 클라이언트가 위와 같은
브라우저를 사용할때 정말 피곤합니다.

휴대폰 본인인증이나 PG결제등 여러가지 제약사항들이 생기기 마련입니다.
그렇다고 위와 같은 포털사들이 인앱 브라우저를 완벽하게 만드는것도 아니면서
외부 브라우저 사용을 엄격하게 제한하고 있습니다.

특히 windows.open 버그의 경우 카카오 인앱 브라우저는 정말 저질입니다.
이미 많은 개발자들 아우성을 치고 있죠...

https://devtalk.kakao.com/t/topic/27890

 

Kakao DevTalk

카카오 데브톡. 카카오 플랫폼 서비스 관련 질문 및 답변을 올리는 개발자 커뮤니티 사이트입니다.

devtalk.kakao.com

 

그렇다고 카카오와 네이버등과 같은 포털사에서 인앱 브라우저에 신경을 써주지 않으니....

또하나의 문제점은 포털사들이 개발해놓은 이러한 인앱브라우저가
기본 웹표준은 고사하고 inner.height 값등과 같은 절대적인 값들 정말 그지같이 반환해주는 문제점이 있습니다.

특히나 본인인증이나 PG연동등과 같은 외부라이브러리 의존적인 화면에서는 아주 고통스러운 화면을 볼 수 있습니다.

 







네이버앱의 인앱브라우저에서
제 블로그를 띄운 모습....
















카카오톡의 인앱 브라우저에서
제 블로그를 띄운 모습....







똑같은 단말기에서 실행한 화면인데 어떤브라우저는 전체 높이값을 제대로 출력하지만,

어떤 브라우저는 전체높이값이 작게 셋팅되어 있습니다.

 

 


무엇이 문제인지 잘 모르시는 분들은 카카오톡의 인앱브라우저에서
상단 주소창이 숨겨지면서 생기는 각종 height 버그들을 직접 코딩하며 느껴보시길 바랍니다.


"이러한 문제점들을 해결하기위해"


그래서 위와 같은 인앱 브라우저에서 "강제"로 외부 브라우저를 호출할 수 있는 방법을 공개합니다.




먼저 안드로이드 기준입니다.
(안드로이드는 참 심플합니다.)

<script>
	location.href='intent://www.test.com#Intent;scheme=http;package=com.android.chrome;end'
</script>

위와 같이 페이지를 강제 이동시켜서 크롬으로 URL을 열게 하거나 onclick 이벤트를 통해 크롬브라우저로 URL을 강제로 열게 할 수 있습니다. 위의 소스중 www.test.com만 원하시는 URL로 변경하여 사용하면 됩니다.
위 방식은 안드로이드의 intent 속성을 통해 사용하는 방법입니다.
브라우저를 크롬 패키지로 설정한 이유는 대부분... 거의 모든 안드로이드폰에 크롬이 이미 내장되어 있기 때문입니다.



 

iOS (iPhone) 기준입니다.
(안드로이드에 비해서 조금 복잡합니다.)

<script>
	location.href='ftp://www.test.com/bridge.html'
</script>

안드로이드와 비슷하게 사용하면 되나, 링크를 자세히 보시면 FTP를 호출하는것을 보실 수 있습니다.
iOS에서 FTP프로토콜을 호출하게 되면 자동으로 사파리가 열리게 되는 현상을 이용한 것입니다.
물론 저 FTP계정은 익명(anonymous)이 접근이 가능해야겠죠

(ftp://user_name:password@hostname 요런식의 접근은 아주아주 위험하니 FTP 서빙을 위한 익명계정을 따로 만드시는걸 추천합니다.)

 


위 FTP내 bridge.html의 소스내용은 다음과 같습니다.

<script>
        window.open("http://www.test.com", "_self");
</script>

원리가 참 간단합니다.
FTP프로토콜을 웹에서 실행함으로써 iOS운영체제에서 강제로 Safari를 실행시키게 되며, Safari가 해당 FTP내 html을 읽어들임으로써 강제로 페이지가 이동되게 됩니다.
물론 x-web-search://?[query] 와 같은 유니버셜링크를 활용하는 방법이 있지만, 쿼리만 던질수 있을뿐 URL을 던지질 못합니다.
(그리고 인앱을 개발하는 포털들이 이런것들 지원해주지 않을뿐더러 공개하지 않겠죠...)

 



이 글을 통해 많은 웹/앱 개발자분들이 네이버나 카카오, 페이스북등의 인앱 브라우저 지옥(?)에서 벗어나길 기원합니다.
잔기술을 이용한 방식이기 때문에 미션크리티컬한 서비스에 적용시 충분히 테스트후 적용하시는것을 권장해드립니다.

 

 

 

 

마지막으로.

다른 개발자들도 이런 고통을 받지 않도록 이 글을 널리 널리 퍼가주시면 감사하겠습니다!

 


내용추가

 

 

HTTP GET값을 통해 보다 유동적으로 URL을 제어하고 싶으실때는 아래의 소스를 FTP에서 서빙하는 html에 적용하시면 됩니다.

(2021.09.02 아이폰에서 알수없는 오류 메시지가 나오는 이슈는 URL을 받아오기 위한 location.href와 페이지를 이동시키기 위한 location.href의 구문이 중복으로 적용되는 문제로 발생되어 수정하였습니다.)

<script type='text/javascript'>
	window.onload = function(){
		var this_url = location.protocol + '//' + location.hostname + location.pathname + location.search + location.hash;
		location.href = this_url.split('?_targeturl=')[1];
	}
</script>

(위 코드는 GET값을 받아와 ?url=도메인풀경로 을 인지하여 도메인풀경로로 던져주는 역할을 합니다.)

 

 

 

 

 

안드로이드와 iOS 각자 인앱브라우저 탈출이 이제 가능하니, 2개의 플랫폼을 모두 함께 적용하는 코드는 다음과 같습니다.

user agent 는 https://www.burndogfather.com/245 여기와 같이 타겟팅 될 플랫폼에서 수집하면 됩니다.

<script type='text/javascript'>
	window.onload = function(){
		if(navigator.userAgent.match(/inapp|NAVER|KAKAOTALK|Snapchat|Line|WirtschaftsWoche|Thunderbird|Instagram|everytimeApp|WhatsApp|Electron|wadiz|AliApp|zumapp|iPhone(.*)Whale|Android(.*)Whale|kakaostory|band|twitter|DaumApps|DaumDevice\/mobile|FB_IAB|FB4A|FBAN|FBIOS|FBSS|SamsungBrowser\/[^1]/i)){
			document.body.innerHTML = '';
			if(navigator.userAgent.match(/iPhone|iPad/i)){
				location.href='ftp://도메인/bridge.html?_targeturl='+location.href;
			}else{
				location.href='intent://'+location.href.replace(/https?:\/\//i,'')+'#Intent;scheme=http;package=com.android.chrome;end';
			}
		}
	}
</script>

(위 코드는 네이버, 카카오톡, 스냅챗, 라인, 페이스북, WirtschaftsWoche, 썬더버드, 인스타그램, 에브리타임, 와츠앱, 일렉트론, 와디즈, 알리익스프레스, 줌앱, 웨일, 카카오스토리, 밴드, 트위터, 다음앱, 삼성브라우저에서 적용됩니다.)

 



CentOS 환경에서 vsftpd를 통해 익명ftp를 설정하는 방법입니다.
yum install vsftpd 를 설치하신뒤, vi /etc/vsftpd/vsftpd.conf 에 아래의 내용을 추가하고 저장합니다.

anonymous_enable=YES 
anon_root=/home/ftp/ 
no_anon_password=YES 
anon_upload_enable=NO 
anon_mkdir_write_enable=NO 
hide_ids=YES 
pasv_min_port=40000 
pasv_max_port=50000

저장후 방화벽에서 20번포트와 21번포트, 40000~50000번 포트의 INPUT을 허용해주시길 바랍니다.

(AWS에서는 VM의 외부접속 아이피를 추가로 설정해줘야 된다고 합니다. 의견주신 삽질맨님 감사합니다. )

 

 

 

 

 

인앱브라우저 탈출링크라고해서

제가 공유한 방법을 조금 더 쉽고 간단하게 js만 붙여서 사용할수 있도록 만드셔서 배포 중인 것으로 확인했습니다.

FTP로 Safari 호출을 우회하는 방법도 동일하게 동작하고 있습니다. 만일, 제 글을 참고하여 배포하셨다면 출처를 남기는게 좋지 않을까 싶습니다.  아울러, 저와 비슷한(?) 마음에 개발자분들이 쉽게 사용할 수 있도록 배포하시는것 같아 저 역시 감사하게 생각합니다만,

 

물론, 당연히, 그러면큰일나겠지만, 추후 저 링크가 수정된다면, Spoofing이 될 수 있으니 실서비스에서는 사용에 각별히 유의하는게 좋을것 같습니다.

 

85 Comments
  • 이전 댓글 더보기
  • 프로필사진 그동안 2021.01.12 11:06 안녕하세요, 문의 좀 드립니다.
    웹호스팅이라 익명 ftp가 없어서, ftp:호출시 아이디,비번 붙여서 호출 했습니다., 사파리 브라우저가 뜨는 것은 됩니다. 다만 사파리가 뜨면서 bridge.html 파일을 다운로드 받아버리네요.
    (추정)다운로드 되다보니 bridge.html에 코딩된 window.open을 실행하지 못하는 것 같습니다. 어떤 부분이 문제인지 잘 모르겠는데 도움 좀 부탁 드려도 될까요?
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.02.10 12:54 신고 익명 FTP만 가능한것 같습니다.
    아이디와 패스워드를 URL String상에 붙이게 되면 파일 다운로드가 되어버리는것 같네요
  • 프로필사진 ㅇㅇ 2021.09.05 22:29 무슨소리인지 하나도 모르겠는데 스샷과함께 자세하게 설명해주지
  • 프로필사진 littlebird 2021.01.30 00:23 좋은 안내 글 감사합니다! 정말 카톡 안에서만 열리니 여러모로 불편합니다.. 저는 카톡링크를 보내면 유튜브앱에서 바로 열리게 하고 싶은데... 그렇게도 가능할까요?
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.02.10 12:58 신고 url 상에 intent:// 를 활용해서 다른 앱을 열수 있습니다. 다만 유튜브에서 intent://링크를 활용해서 특정 영상으로 띄워주는지는 좀더 써칭을 해봐야할것 같군요...
  • 프로필사진 ios... 2021.02.01 10:57 iphone에서 인스타그램앱에서는 외부 브라우저를 호출하지 못하고 닫아버리네요... 다른 방법이나 제가 검토할 만한 것들이 있을까요?
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.02.10 12:59 신고 인스타그램은 다른 방법을 모색해봐야할것 같네요.
  • 프로필사진 abNormal 2021.02.08 09:56 감사합니다. 덕분에 카톡 인앱 브라우저의 고통에서 빠져나올 수 있었습니다.
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.02.10 13:00 신고 도움되셨다니 다행이네요~
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.02.10 13:02 신고 FTP설정과 관련하여 댓글이 많은것 같아 제가 서비스했던 환경을 공유합니다.
    이거 해결할려고 별도의 윈도우가상인스턴트를 생성해서 FileZilla Server를 설치한 뒤
    해당 서버에 anonymous FTP설정을 했습니다.
    도움되셨으면 좋겠네요
  • 프로필사진 keating 2021.03.29 18:08 감사합니다. 많은 도움이 되었습니다
    - 브라우져가 기본 passive 모드로 동작하기 때문에 FTP서버를 passive 로 설정하는 것이 중요하네요.
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.04.11 02:36 신고 도움되셨다니 다행이네요 ㅎㅎ
  • 프로필사진 ranma 2021.04.06 18:21 bridge.html에서 링크될 url을 동적으로 줄 방법은 없을까요?
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.04.11 02:40 신고 JS로 해결하시면 됩니다ㅎ
    자바스크립트로 get값을 받아와 동적으로 location.herf를 처리해주면 되겠죠? ㅎㅎ
  • 프로필사진 ㅇㅇ 2021.04.26 23:32 진짜 카카오톡 인앱브라우저 뜰때마다 카카오본사에 불지르고싶은데 사용자입장에선 뭐 어떻게 할수가 없네요 미개한 조센
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.08.24 11:22 신고 그래도 카카오개발자 포럼에서는 나름(?) 이슈화되어있어서 바뀌지 않을까 조심스럽게 기대합니다 ㅠ
  • 프로필사진 꾸깃 2021.05.14 15:10 Android는 잘 되는데,
    iPhone 처리하기 위해 FTP 서버 구현했는데 네트워크 환경에 따라서 막힙니다
    테더링하면 연결이되고 와이파이 사용하면 막히는게 방화벽 때문인지? 아니면 제가 ftp 서버 설정을 잘 못 한건지 잘 모르겠습니다
  • 프로필사진 꾸깃 2021.05.14 16:35 파일질라에서는 항상 접근이 가능하고 브라우저에서는 테더링 환경에서만 가능하네요 혹시 어떤 문제이신지 아실까요?
    ----------------------------------
    Passive Mode 설정의 문제였습니다
    Filezilla에서는 Active Mode로 접속했고 안됐던 환경은 Passive Mode로 접속했던 것이었습니다
  • 프로필사진 아리 2021.06.07 08:56 카카오로 qr 코드 열어주는 방법중에 kakaotalk://con/web?url=https://accounts.kakao.com/qr_check_in 이렇게 브라우저에 입력해주면 카카오가 열리더라구요. 이렇게 링크를 통해서 크롬이든 사파리든 열 수 있는 방법이 없을까요? ㅜㅜ
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.06.19 02:02 신고 아쉽게도 url스키마는 카카오 앱에서 제어됩니다. 방법 없습니당
  • 프로필사진 삽질맨 2021.06.24 19:21 너무 잘쓰고 있습니다 감사합니다!
    혹시 저처럼 삽질 하는 분이 있을까 하여 공유 드립니다
    AWS EC2 리눅스에 vsftpd 설치하였고,

    패시브 관련하여 검색 해보시면 밑의 셋팅 정보 글들이 많이 나옵니다. (아니면 본문 추가 내용 확인 해보시면 내용은 비슷합니다)
    pasv_enable=YES
    pasv_min_port=50000
    pasv_max_port=60000
    port_enable=YES
    pasv_address=(EC2 퍼블릭 IP)


    해당 셋팅 추가 하시고,
    설정한 포트 번호를 보안 그룹에서 인바운드에 추가해서 열어주세요.(20, 21포트 포함)

    그리고 추가적으로 해당 셋팅을 더 해줘야 정상 동작 합니다

    listen=YES
    listen_ipv6=NO

    https://stackoverflow.com/questions/54700700/vsftp-passive-mode-configuration-on-ec2-instance

    패시브 모드의 동작 원리에 대해서 알고 나니까
    안되는 원인을 금방 찾아서 적용 했네요.
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.06.24 23:35 신고 좋은 정보 감사합니다!
  • 프로필사진 삽질맨 2021.06.29 14:18 안녕하세요! 위 댓글의 삽질맨 입니다~!
    혹시 간헐적으로 '알 수 없는 오류' 로 파일을 못읽어오는데, 해당 이슈는 없으셨엇나요??

    '알 수 없는 오류 페이지' 상태에서 새로고침 하면 정상적으로 읽어옵니다(동일한 URL)

    이게 참 간헐적으로 나와서.. 애매하네요 ㅠㅠ
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.07.05 18:58 신고 확인해보니, iOS 설정에서 Safari > 콘텐츠 차단기에 뭔가 활성화되어 있어서 그런것 같은데, 혹시 테스트 폰 셋팅좀 확인할 수 있을까요?
  • 프로필사진 삽질맨 2021.07.12 11:36 사파리의 설정은 특별히 변경한건 없습니다
    일단은
    safari > 콘텐츠 차단기 메뉴가 안보이네용;;

    테스트폰은
    iphone 8 plus
    ios: 14.6
    입니다


    우선 로컬 테스트시 간헐적으로 나왔는데
    배포 전 서버 테스트(QA테스트)에선 증상이 나오지 않아서
    일단 배포는 했습니다.
    아직까진 관련된 cs는 없긴 하네요

    혹시라도 찾은 이슈가 있다면 공유 하겠습니다!
    감사합니다~!
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.07.12 17:56 신고 ftp를 통해 서빙되는 js내용에서 문제가 있는것 같습니다 직접 string url 링크로 location 이동을 시켜보시고, 타겟팅되는 location 주소안에서 한번더 location 이동되는지 확인해보세요
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.09.02 17:42 신고 알 수 없는 오류 페이지 상태나 나타는 이슈 해결했습니다.
    location.href 가 현재 페이지의 URL String을 가져오는 역할을 하면서 페이지이동을 위한 역할이 중복되어 나타나는 Javascript 오류였습니다.
    url을 프로토콜부터 하나씩 모두 가져와서 location.href 이동시키니 정상적으로 동작합니다.
  • 프로필사진 ㅇㅇ 2021.07.12 11:36 안녕하세요! 먼저 좋은 정보와, 업데이트 감사드립니다.
    linux 환경에 flask+nginx+uwsgi를 이용한 웹서버에 해당 내용을 적용하려고 시도중입니다.
    안드로이드의 경우 문제없이 잘 동작하는데, 아이폰의 경우 개발지식이 짧다 보니 어떻게 접근해야 할지 아직 감이 안잡히네요.
    적용하려는 웹 서버 이외의 ftp관련 서버를 하나 더 개설해야 한다는 내용이 맞을까요?? 아니면 기존 웹서버가 있는 곳에 해당 내용을 같이 진행할 수 있는 걸까요?
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.07.12 17:53 신고 익명 ftp를 사용하는 만큼 가급적 별도의 서버에서 구성하는게 좋을듯합니다만, ftp보안에만 잘 신경쓴다면 상관없습니다
  • 프로필사진 이런게되다니 2021.07.13 13:25 뭔가 간단하게 할수있을것같은데, 저는 코딩 문외한이라, 삼성폰 사용 중인데 위의 코드를 어디에 써 넣어야 하나요? 프로그램을 깔아야할까요?
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.07.13 15:21 신고 일반사용자는 그냥 써야되고.... 이 코드는 카카오톡으로 링크가 전달 당하는(?) 서비스 개발자들이 적용해야 합니다~
  • 프로필사진 이런게되다니 2021.07.15 11:56 그렇군요 아쉽네요 감사합니다
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.07.28 13:01 신고 🤦🏻‍♂️
  • 프로필사진 익명사용자 2021.07.23 12:23 mac으로 개발중인데 ios에서 카카오 브라우저를 탈출해 safari로 가야하는데 react에서는 bride.html을. 어떻게 해야하나요? html파일을 하나 더 만들면 페이지 로드가 안돼어서..... amplify로 배포하고 있는데 ftp서버 만드는거랑 관련이 없나요?
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.07.28 13:01 신고 react랑은 관련이 없습니다 ^^
  • 프로필사진 익명사용자 2021.08.01 20:38 ftp 서버 만들고 bridge html을 넣어줘야하나요??
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.08.24 11:18 신고 네 맞습니다
  • 프로필사진 감사 2021.08.11 11:24 안드로이드 버전에 따라서 반응이 다른지요?
    카톡 인앱에서 링크 클릭시 크롬으로 이동하도록 하는 소스를 반영했습니다.
    그런데, 이전 버전의 안드로이드 폰에서는 잘되는데, 최신 안드로이드 에서는 크롬으로 이동은 되는데, 크롬에서 링크 되었던 페이지가 무한 호출되는 현상이 있습니다.

    탐색이 차단됨: intent://mydomain...
    console에 이런 메세지도 나타납니다.
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.08.24 11:19 신고 기종(User Agent)를 알려주시면 확인해볼께요
  • 프로필사진 rowdy 2021.08.14 18:21 감사합니다!! 특정경우 카톡인앱브라우저 사용 본인인증 시, 404 오류를 뱉어내서,, 인앱브라우저 관련내용을 찾아볼 수 있었습니다
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.08.24 11:20 신고 도움되셨다니 다행이네요!
  • 프로필사진 질문이요 2021.08.17 14:23 인앱탈출 포스트를 해주셔서 감사합니다. 이 포스트를 이용하여 인앱탈출을 구현 하고자 하는데 일단 안드로이드는 매우 잘됩니다. 그런데 아이폰의 경우 익명의 ftp를 이용해서 해야 한다고 적혀있습니다만... 제가 웹 문외한이라서 질문드리고 싶습니다. 웹 호스팅 카페24를 이용하여 사이트를 만들고 해당 카페24를 통해 ftp를 접속하여 말씀하신것처럼 구축하려고 하는데 카페24로 익명의 FTP 계정 접속이 가능할까요??

    리플들을 읽어본 결과 어느 한분이 웹호스팅으로 인하여 해당 내용 구축이 잘 안되신거 같은데... 카페24 웹호스팅으로 가능한지 궁금하여 질문드립니다.
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.08.24 11:20 신고 반드시 익명 FTP를 사용하셔야 합니다. 웹호스팅은 테스트를 안해봐서 잘 모르겠습니다 ^^;;
댓글쓰기 폼