JavaScript에서 Internet Explorer 11 브라우저 여부 확인하기

골치 아픈 브라우저 호환성 문제

---

프론트엔드 웹 개발자들에게 브라우저 호환성을 유지하는 것은 굉장히 골치아픈 일이다. 특히 사용자의 브라우저 환경을 인식하여 ActiveX 실행 여부를 결정해야 한다면 브라우저 환경 및 버전을 정확하게 확인할 수 있어야 한다.

문제의 브라우저, Internet Explorer 11

---

JavaScript에서 브라우저 환경을 확인할 수 있는 방법은 굉장히 많다. 대표적으로 아래와 같은 방법이 있다. navigator.appName 값을 확인하면 Microsoft Internet Explorer으로 인식한다.

if (navigator.appName == 'Microsoft Internet Explorer') {
  // 처리 로직 작성
}

Copy

하지만 Internet Explorer 11 버전에서는 이 방법으로 확인시 Netscape로 인식해버려 오작동한다.

방법이 없을까?

---

방법은 있다. 바로 navigator.userAgent 값을 확인하는 것이다. 아래와 같은 값을 출력한다.

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; MDDSJS; rv:11.0) like Gecko

중간에 Trident란 문자열이 보인다. Trident란 Mircosoft가 Internet Explorer에 사용하는 레이아웃 렌더링 엔진의 이름이다. 눈치챘겠지만 바로 이 문자열을 이용하여 IE11 환경 여부를 확인할 수 있다. 위 소스 코드를 아래와 같이 고쳐보자.

if (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) {
  // 처리 로직 작성
}

Copy

테스트를 해보면 정상적으로 인식함을 확인할 수 있다. 아직 안심할 수 없다. MSIE의 차기 버전에서는 또 어떤 변화가 있을지 모르기 때문이다. 오랫동안 웹 표준성을 무시해온 Microsoft의 행보가 아쉬울 뿐이다.

참고 글

---

• How to detect IE11?