번개애비의 라이프스톼일

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

IT

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

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

현재 이 방법은 iOS15 업데이트로 인해 사용이 불가능한 방법입니다.

https://burndogfather.tistory.com/257 사용자가 조금 더 불편하게 접속하는 방법이 현재까지는 차선책이네요 ㅠㅜ


 

더 쾌적하게?

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

휴대폰 본인인증이나 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의 구문이 중복으로 적용되는 문제로 발생되어 수정하였습니다.)

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densityDpi=medium-dpi, viewport-fit=cover'>
		<style>
			html{font-family: sans-serif;}
			body{padding:0;	margin:0; display: flex; align-items: center; position:fixed; width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling: touch;
			}
			center{width:100%;}
			b{font-size:2.2em;}
		</style>
		<script type='text/javascript'>
			let target_url = location.href.split('?_targeturl=')[1];
			window.onload = function(){
				document.querySelector('.target').setAttribute('href',target_url);
				setTimeout(function() {
					window.open(target_url, "_self");
				}, 1000);
				
			}
		</script>
	</head>
	<body>
		<center>
			<b>Safari로 이동합니다.</b><br /><br />
			자동으로 이동되지 않을 경우 <a class='target'>여기</a>를 눌러주세요.
		</center>
	</body>
</html>

(위 코드는 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이 될 수 있으니 실서비스에서는 사용에 각별히 유의하는게 좋을것 같습니다.

 

103 Comments
  • 이전 댓글 더보기
  • 프로필사진 아리 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를 사용하셔야 합니다. 웹호스팅은 테스트를 안해봐서 잘 모르겠습니다 ^^;;
  • 프로필사진 감사합니다. 2021.09.27 15:14 덕분에 이슈를 잘 해결했습니다. 복받으실거예요! 감사합니다!~~
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.09.29 22:36 신고 도움되셨다니 다행이네요!
  • 프로필사진 코린이001 2021.10.01 15:28 안녕하세요~ 혹시 로그인정보(세션)값을 같이 보내는방법은 없을까요 ?
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.10.02 16:52 신고 서로 다른 브라우저이기때문에 불가능합니다
  • 프로필사진 늘한 2021.11.18 13:36 ios 15.1 업데이트 이후에는 ftp 방식이 동작하지 않네요 ㅠㅠ 애플 놈들은 뭐 이리 다 막아대는지..
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.11.24 14:58 신고 ㅠㅜ... 애플이 애플했네요 ㅠ
    다른 방법이 찾아지면 다시 업뎃하겠습니다....
  • 프로필사진 씨유삔 2021.12.14 17:36 흙흙 ios 15 버전 방법도 찾게 되시면 꼭 좀 공유 부탁드려요... 올려주신 코드는 잘 사용하겠습니다. 정말 감사합니다 ㅠ0ㅠ
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2021.12.17 23:56 신고 네 꼭 공유할께요 ㅠㅠ
  • 프로필사진 yuuki 2022.01.28 19:19 무슨 말인지 전혀 이해가 되지 않는데 저 코드를 대체 어떻게 해야 한다는 뜻이죠..? 너무 많은 세부과정이 싸그리 생략되어서 적용을 전혀 못 하겠습니다. 저 코드를 어찌저찌 잘 하면 정말 카톡 켜서 링크 클릭하면 바로 크롬으로 접속되는건가요?
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2022.01.29 18:47 신고 사용자 접속시 > 카카오톡 인앱 에이전트 확인 > url을 ftp로 재요청 > 인앱브라우저에서 사파리로 이동됨
    대략 이런원리로 인앱브라우저 호출시 외부 브라우저로 사용할수 있도록하는 기능인데 현재는 ios업뎃이후 패치되어 작동이 안됩니다
  • 프로필사진 김기태 2022.02.24 09:11 작년에 개발자님 소스 사용하여 잘 활용하고있었는데 패치로인해 막혀버렸네요 ㅡ.,ㅡ 시간이좀 되서 왜안되난 찾아보다 다시 개발자님 블로그 찾게됐습니다. 늦게나마 잘 활용해 사용 했다 감사드립니다. ㅎㅎ
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2022.02.24 12:52 신고 방문해주셔서 감사해요~
    아쉽게도 막혀서 저도 계속 찾아는 보고 있습니다 ㅠ
    급한대로 스키마로 처리하는것도 방법인데 매끄럽진 않네요 ㅠ x-web-search://?naver.com
  • 프로필사진 안녕하세요 2022.03.18 10:18 안녕하세요, 선생님! 잘 봤습니다..!
    혹시 안드로이드에선 아직 위 방법으로 인앱에서 외부 브라우저 호출이 가능한 걸까요?
    문외한이라 글을 읽어도 이해가 안되어 맞는지 여쭤보고자 댓글 남기게 되었습니다^^

    (카카오톡/인스타/페이스북 등에서 외부 브라우져를 띄우고자 합니다.)
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2022.03.19 19:42 신고 안드로이드는 가능해요
  • 프로필사진 aa 2022.06.04 09:19 카카오빨리망했으면 좋겠네옷
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2022.06.08 12:04 신고 별거 아닌데 참... 한숨만 나오네요 ㅠ
  • 프로필사진 혹시 2022.08.17 17:19 안드로이드 사용자입니다.
    이 글이 카카오톡이나 네이버 지도 같은데서 링크 누르면 인앱브라우저 넘어가는 걸 외부 브라우저로 강제하는 방법인가요?
    예를 들어 카카오톡에서 메시지창에 링크를 치고 누르면 인앱브라우저에서 연결되는데 그걸 크롬으로 강제하도록 할 수 있나요? 혹시 가능하다면 위 스크립트를 어디에 넣으면 되나요

    문외한이이라 질문드립니다. 이 문제를 간절히 해결하고 싶어서요.
  • 프로필사진 Favicon of https://www.burndogfather.com 번개애비 2022.08.18 20:40 신고 해당 링크의 사이트 개발자분이 조치해야합니다
    일반 사용자는 그냥 불편해도 써야됩니다 ㅠㅠ
댓글쓰기 폼