[Javascript] 접속 브라우져를 확인하는 방법

안녕하세요. 명월입니다.

이 글은 Javascript로 접속 브라우져를 확인하는 방법에 대한 글입니다.

웹 디자인을 할 때 각 브라우저마다 다르게 대응해야한 스크립트가 존재할 수 있습니다. 가장 쉬운 예로 들면, 우리나라의 웹사이트에서는 아직 ActiveX를 많이 사용하고 있습니다.

이 ActiveX가 무엇이냐면 HTML 표준에는 Javascript로는 로컬의 파일을 스크립트에서 읽거나 쓰기를 세큐리티로 금지 되어있습니다. 아마 예전 IE8전에는 가능했었는데 브라우져에서 마음대로 로컬의 파일을 읽거나 쓰기가 가능하면 유저가 인지하지 못하는 가운데 시스템의 정보를 웹 서버 측으로 넘겨주는 것이 가능합니다. 즉, 사이트를 접속하는 것만으로 PC가 홀라당 읽히는 것입니다.

그래서 각 브라우져에서는 세큐리티 상으로 큰 위험이 있기 때문에 이를 막았는데, 우리나라 많은 프로그램이 웹상에서 클릭을 하면 프로그램을 기동시키게 하는 기능(게임에서는 게임시작을 누르면 로컬의 프로그램이 시작되는 기능)이던가 금융권에서는 로컬 PC에서 해킹 툴이 있는 지 없는지 한번 훑어야 하고 또 인증서를 import를 해야 하기 때문에 이 ActiveX를 사용하는 것입니다.

(여담입니다만 ActiveX가 얼마나 위험한 것이냐면, 참고로 은행에서 해킹툴이 있는지 본인의 PC를 홀라당 스캔합니다. 반대로 은행 사이트 개발자가 나쁜 마음을 먹으면 은행 사이트에 접속하는 모든 PC를 제어할 수 있습니다. 이래서 ActiveX가 무서운 것이고 HTML5에서는 금지시킨 것입니다. 한국 이외의 나라에서는 ActiveX를 설치한다고 메시지가 뜨면 일단 해킹 사이트로 간주하고 절대 접속 안합니다. 일단 이런 이슈들 때문에 많은 유저가 IE를 버린 것입니다. 이렇게 된게 벌써 10년도 넘었습니다. 그런데 우리는 아직 ActiveX를 고집하고 있습니다.)

약간 말이 새었는데 이럴 때, IE이외의 브라우저가 접속을 하게 되면 IE로 접속해 주십시오라는 메시지를 표시하기 위한 기능으로 사용할 수 있습니다.

먼저 구분하는 방법은 http 프로토콜에서 userAgent를 이용해서 구분을 하는 것입니다.

저는 크롬으로 console에서 찍어 봤는데 위처럼 나오는데 정확히는 모르겠으나 대충봐도 Chrome 브라우저인 듯싶네요.

// Opera 8.0+ 오페라 브라우져 8.0 이상
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+ 파이어 폭스 1.0 이상
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ 사파리 3.0 이상
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
// Internet Explorer 6-11 IE 6에서 11버젼
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+ IE엣지
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1 - 71 크롬
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
// Blink engine detection 블링크 엔진을 경우
var isBlink = (isChrome || isOpera) && !!window.CSS;

구분은 위처럼 구분됩니다. 사실 이걸 예전에 어디서 참조한 건데.. 제가 참조 url를 잃어버렸네요...ㅜㅜ 개인적으로도 자주 사용하는 것이니 검증에는 문제가 없습니다.

<button id="whatbrowser">클릭</button>
<script type="text/javascript" src="https://nowonbun.github.io/Loader/dialog.js"></script>
<script>
$(function(){
  // 옵션을 설정한다.
  dialog.set({
    // 타이틀 설정
    title: "what your browser?",
    // 모달 여부
    modal: true,
    // 버튼 설정
    buttons: {
      OK: function() {
        dialog.close();
      }
    }
  });
  $("#whatbrowser").on("click", function(){
    // Opera 8.0+ 오페라 브라우져 8.0 이상
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Firefox 1.0+ 파이어 폭스 1.0 이상
    var isFirefox = typeof InstallTrigger !== 'undefined';
    // Safari 3.0+ 사파리 3.0 이상
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
    // Internet Explorer 6-11 IE 6에서 11버젼
    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    // Edge 20+ IE엣지
    var isEdge = !isIE && !!window.StyleMedia;
    // Chrome 1 - 71 크롬
    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    // Blink engine detection 블링크 엔진을 경우
    var isBlink = (isChrome || isOpera) && !!window.CSS;
    var body = "";
    if(isOpera) body = "opera";
    else if(isFirefox) body = "firefox";
    else if(isSafari) body = "safari";
    else if(isIE) body = "IE";
    else if(isEdge) body = "IE edge";
    else if(isChrome) body = "chrome";
    
    dialog.open("<p>"+body+"</p>");
  });
});
</script>

예제

여기까지 Javascript로 접속 브라우져를 확인하는 방법이었습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.