카카오 or 라인 인앱 브라우저 회피하여 외부 브라우저에서 띄우기

카카오 인앱 브라우저 회피하여 외부 브라우저에서 띄우기

크로스 브라우징에 대응하고 있는 웹 브라우저로서 
대표적인 4개의 브라우저 chrome, safari, firefox, ie 만
신경쓰면 되는 줄 알았지만...
여러 프로젝트들을 진행하면서 생각보다 더 많은 브라우저에 
대응해야하는 경우가 있다는 것을 알았습니다.
예를 들어 whale브라우저나 카카오 인앱 브라우저, 라인 인앱 브라우저...등

문제는 현실적으로 이 모든 '그 외 브라우저'들에 대응한다는 것은 매우 어렵다는 것입니다.
모든 브라우저에서 같은 웹 표준을 같은 수준을 구현하고 있지 않고, 
각자의 브라우저에서만 독자적인 기능과 동작을 하고 있는 경우가 있기 때문입니다.

특히, 인앱 브라우저들. 대표적으로 카카오톡과 라인 인앱 브라우저는 
다른 대표 브라우저들과는 다른 동작과 ui를 보여주는 경우가 많다고 하네요.

인앱 브라우저들은 
메신저 안에서 링크를 열 경우, 특별한 처리를 하지 않으면 
자신들의 메신저 인앱 브라우저를 이용하도록 만들어놨습니다.

한국에서 대표적으로 사용하고 있는 카카오톡 메신저 안에서 링크를 열 경우, 
카카오 인앱 브라우저가 아닌 다른 브라우저를 사용할 수 있는 방법이 있는지 찾아보니
방법이 있다는 것을 알았습니다.

 

사용방법 (카카오톡)

/* 카카오 입앱 브라우저 회피하기 */
var target_url = 'https://burndogfather.com';
location.href = 'kakaotalk://web/openExternal?url='+encodeURIComponent(target_url);

작동 방식은 카카오 메신저안에서 링크를 열 경우, 다른 브라우저로 링크주소와 함께 리다이렉트 시킵니다.

 

위 코드에 추가로 '카카오 인앱 브라우저'인지 확인하는 조건을 추가한다면 아래 처럼됩니다.

function isKakaoTalkInAppBrowser() {
    const userAgent = navigator.userAgent.toLowerCase();
    return userAgent.includes('kakaotalk');
}

if (isKakaoTalkInAppBrowser()) {
    const target_url = 'https://리다이렉트시킬 주소.com';
    location.href = 'kakaotalk://web/openExternal?url=' + encodeURIComponent(target_url);
}

'카카오 인앱 브라우저'인지 확인하는 조건이 반드시 필요한지는 모르겠지만, 혹시나 싶어 추가해봤습니다.

 

사용방법 (라인)

아래 코드는 라인의 경우입니다.

/* 라인 인앱 브라우저 회피하기 */
var target_url = 'https://리다이렉트시킬 주소.com';

if(target_url.indexOf('?') !== -1){
    location.href = target_url+'&openExternalBrowser=1';
}else{
    location.href = target_url+'?openExternalBrowser=1';
}

 

라인 doc 

• https://developers.line.biz/en/docs/line-login/using-line-url-scheme/#opening-url-in-external-browser

 

정리

• 안드로이드에서는 '메신저 → 외부 브라우저'로 곧바로 외부 브라우저로 연결되지만,
• 아이폰에서는 '메신저 → 카카오 인앱 브라우저 → 외부 브라우저'로 중간에 한 번 인앱 브라우저를 거쳐서 이동되는 듯 합니다.
• 밑에 첨부한 참고 사이트가 많이 도움이 되었습니다. 좋은 정보 공유해주시는 모든 개발자분들 존경합니다.

 

참고 사이트

• https://burndogfather.com/271