카카오톡/라인 인앱브라우저에서 외부브라우저 띄우기 (2023.09.21 최신 - inapp browser bypassing)
이전부터 카카오톡 등과 같은 메신저에서 인앱브라우저를 강제하는 불합리한 조치를
우회하기위해 다양한 방법을 이 블로그에 포스팅해왔었다.
ftp프로토콜을 활용한 우회방법 : https://burndogfather.com/201 [현재는 막힘]
강제사파리실행 + 클립보드를 활용하는 방법 : https://burndogfather.com/257 [그 전까지 유일한 방법 ㅠ]
근데 우연하게 우회할 수 있는 방법을 찾았다. (솨리질러! 🤣)
본 블로그를 지금 카카오톡 메신저에 전송해서
URL을 눌러보면 사용자가 아무런 조작을 하지 않아도
강제로 외부브라우저로 깔끔하게 실행된다.
👇👇👇👇
사용방법은 다음과 같다.
[카카오톡]
내가 찾지 못한 것인지 다른 개발자들 모두가 볼 수 있도록 카카오톡이 나서서 공유해줘야하는게 아닌가 ㅠㅠ
var target_url = 'https://burndogfather.com';
location.href = 'kakaotalk://web/openExternal?url='+encodeURIComponent(target_url);
[라인]
아주 친절하게도 공개하고 있다!
https://developers.line.biz/en/docs/line-login/using-line-url-scheme/#opening-url-in-external-browser
var target_url = 'https://burndogfather.com';
if(target_url.indexOf('?') !== -1){
location.href = target_url+'&openExternalBrowser=1';
}else{
location.href = target_url+'?openExternalBrowser=1';
}
[Full Source]
기존의 Safari를 강제실행하고 클립보드에 복사해놓는 코드를 종합해보면 다음과 같음.
중간중간 주석도 달아두었으니, 전국 각지에서 고분분투 하시는 개발자분들께서 알아서 커스텀해서 쓰시면 됩니다.
(아래 Javascript를 사이트에 붙여놓으면 인앱 우회가 가능해진다. Android / iOS 모두 호환가능)
<script type='text/javascript' charset='UTF-8'>
var inappdeny_exec_vanillajs = (callback) => {
if(document.readyState !== 'loading'){
callback();
}else{
document.addEventListener('DOMContentLoaded', callback);
}
};
inappdeny_exec_vanillajs(() => {
/* Do things after DOM has fully loaded */
function copytoclipboard(val){
var t = document.createElement("textarea");
document.body.appendChild(t);
t.value = val;
t.select();
document.execCommand('copy');
document.body.removeChild(t);
};
function inappbrowserout(){
copytoclipboard(window.location.href);
alert('URL주소가 복사되었습니다.\n\nSafari가 열리면 주소창을 길게 터치한 뒤, "붙여놓기 및 이동"를 누르면 정상적으로 이용하실 수 있습니다.');
location.href='x-web-search://?';
};
var useragt = navigator.userAgent.toLowerCase();
var target_url = location.href;
if(useragt.match(/kakaotalk/i)){
//카카오톡 외부브라우저로 호출
location.href = 'kakaotalk://web/openExternal?url='+encodeURIComponent(target_url);
}else if(useragt.match(/line/i)){
//라인 외부브라우저로 호출
if(target_url.indexOf('?') !== -1){
location.href = target_url+'&openExternalBrowser=1';
}else{
location.href = target_url+'?openExternalBrowser=1';
}
}else if(useragt.match(/inapp|naver|snapchat|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|trill|SamsungBrowser\/[^1]/i)){
//그외 다른 인앱들
if(useragt.match(/iphone|ipad|ipod/i)){
//아이폰은 강제로 사파리를 실행할 수 없다 ㅠㅠ
//모바일대응뷰포트강제설정
var mobile = document.createElement('meta');
mobile.name = 'viewport';
mobile.content = "width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui";
document.getElementsByTagName('head')[0].appendChild(mobile);
//노토산스폰트강제설정
var fonts = document.createElement('link');
fonts.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap';
document.getElementsByTagName('head')[0].appendChild(fonts);
document.body.innerHTML = "<style>body{margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;overflow: hidden;height: 100%;}</style><h2 style='padding-top:50px; text-align:center;font-family: 'Noto Sans KR', sans-serif;'>인앱브라우저 호환문제로 인해<br />Safari로 접속해야합니다.</h2><article style='text-align:center; font-size:17px; word-break:keep-all;color:#999;'>아래 버튼을 눌러 Safari를 실행해주세요<br />Safari가 열리면, 주소창을 길게 터치한 뒤,<br />'붙여놓기 및 이동'을 누르면<br />정상적으로 이용할 수 있습니다.<br /><br /><button onclick='inappbrowserout();' style='min-width:180px;margin-top:10px;height:54px;font-weight: 700;background-color:#31408E;color:#fff;border-radius: 4px;font-size:17px;border:0;'>Safari로 열기</button></article><img style='width:70%;margin:50px 15% 0 15%' src='https://tistory3.daumcdn.net/tistory/1893869/skin/images/inappbrowserout.jpeg' />";
}else{
//안드로이드는 Chrome이 설치되어있음으로 강제로 스킴실행한다.
location.href='intent://'+target_url.replace(/https?:\/\//i,'')+'#Intent;scheme=http;package=com.android.chrome;end';
}
}
});
</script>
추신) 인스타그램이나, 네이버 톡톡 메신저등 다른 앱에 대해서도 지속적으로 우회방법을 찾아서 공유하도록 하겠음!
[ 2023.05.04 신규 ]
- 카카오톡, 네이버라인 우회 코드 추가
[ 2023.05.11 변경 ]
- window.onload 대신 더 빠르게 실행할 수 있도록 일부코드변경
[ 2023.09.21 변경 ]
- 틱톡 인앱브라우저 감지 추가