번개애비의 라이프스톼일
카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS] 본문
현재 이 방법은 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 호출을 우회하는 방법도 동일하게 동작하고 있습니다. 만일, 제 글을 참고하여 배포하셨다면 출처를 남기는게 좋지 않을까 싶습니다. 아울러, 저와 비슷한(?) 마음에 개발자분들이 쉽게 사용할 수 있도록 배포하시는것 같아 저 역시 감사하게 생각합니다만,
'IT' 카테고리의 다른 글
| 12,000원으로 해충퇴치기 버그재퍼 만들기 (다이소 해킹) (0) | 2019.06.21 |
|---|---|
| 5000원짜리 다이소 보풀제거기에 건전지를 없애고 충전배터리형으로 개조하기 (2) | 2019.06.20 |
| iptime A3008-MU 쿨러 달기 (발열해소) (5) | 2019.06.15 |
| 광고차단 및 DNS캐시 Pi-Hole 추천 (0) | 2019.06.15 |
| 고양이 화장실 공기청정기 만들기 (0) | 2019.06.12 |
