Duck-Typing으로 Safari, Chrome, IE, Firefox 및 Opera 브라우저 감지

리디렉션을 위해 사용자 브라우저를 확인해야 하는 경우가 많습니다. 브라우저별 확장 프로그램에 대한 적절한 다운로드 링크로 이동하세요. 그러나 브라우저 감지를 위해 사용자 에이전트 문자열에 의존하는 것은 스푸핑에 취약하기 때문에 신뢰할 수 없습니다.

덕 타이핑(duck-typing)이라고 알려진 보다 안정적인 방법을 사용하면 브라우저의 특정 특성을 기반으로 브라우저를 식별할 수 있습니다. 분석 내용은 다음과 같습니다.

Opera 8.0 :

var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

Firefox 1.0 :

var isFirefox = typeof InstallTrigger !== 'undefined';

사파리 3.0 :

var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

Internet Explorer 6-11:

var isIE = /*@cc_on!@*/false || !!document.documentMode;

Edge 20 :

var isEdge = !isIE && !!window.StyleMedia;

Chrome 1 - 79:

var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

Edge(크롬 기반) 감지:

var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

블링크 엔진 탐지:

var isBlink = (isChrome || isOpera) && !!window.CSS;

이러한 방법을 사용하여 브라우저를 감지하면 사용자를 적절한 경로로 리디렉션할 수 있습니다. 브라우저별 확장 프로그램에 대한 다운로드 링크.

그러나 브라우저별 설치 지침 표시와 같이 필요한 경우에만 브라우저 감지를 사용해야 한다는 점을 강조하는 것이 중요합니다. 일반적인 모범 사례로서 가능하면 특징 감지에 집중하세요.