번개애비의 라이프스톼일

카카오톡/라인 인앱브라우저에서 외부브라우저 띄우기 (2023.09.21 최신 - inapp browser bypassing) 본문

IT

카카오톡/라인 인앱브라우저에서 외부브라우저 띄우기 (2023.09.21 최신 - inapp browser bypassing)

번개애비 2023. 5. 4. 17:10

 
 
이전부터 카카오톡 등과 같은 메신저에서 인앱브라우저를 강제하는 불합리한 조치를
우회하기위해 다양한 방법을 이 블로그에 포스팅해왔었다.


 
ftp프로토콜을 활용한 우회방법  :  https://burndogfather.com/201 [현재는 막힘]

 

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

현재 이 방법은 iOS15 업데이트로 인해 사용이 불가능한 방법입니다. https://burndogfather.tistory.com/257 사용자가 조금 더 불편하게 접속하는 방법이 현재까지는 차선책이네요 ㅠㅜ 더 쾌적하게? 웹 서

burndogfather.com

 
강제사파리실행 + 클립보드를 활용하는 방법  :  https://burndogfather.com/257 [그 전까지 유일한 방법 ㅠ]

 

iOS15 업데이트와 함께 찾아온 인앱브라우저 지옥과 최선

카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS] 더 쾌적하게? 웹 서비스를 개발하는 입장에서 클라이언트가 위와 같은 브라우저를 사용할때 정말 피곤합니다. 휴대폰 본인

burndogfather.com

 


 

근데 우연하게 우회할 수 있는 방법을 찾았다. (솨리질러! 🤣)
본 블로그를 지금 카카오톡 메신저에 전송해서
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 신규 ]

  • 카카오톡, 네이버라인 우회 코드 추가

kakao_inapp.html
0.00MB

 

[ 2023.05.11 변경 ]

  • window.onload 대신 더 빠르게 실행할 수 있도록 일부코드변경

kakao_inapp.html
0.00MB

[ 2023.09.21 변경 ]

  • 틱톡 인앱브라우저 감지 추가

kakao_inapp.html
0.00MB

Comments