사용자 브라우저 알아내기

사이트 메인 화면에서 크롬 권장 팝업을 띄우기 위해 사용자의 브라우저 정보를 알아낼 필요가 있었다.

이미 많은 게시글에서 해당 내용을 다루었고 대부분 user agent를 파싱해서 단순 비교하는 코드였다.

    checkBrowser() {
      const agent = navigator.userAgent.toUpperCase();
      if (agent.indexOf("TRIDENT") >= 0) {
        return "IE";
      } else if (agent.indexOf("FIREFOX") >= 0) {
        return "FIREFOX";
      } else if (agent.indexOf("EDG") >= 0) {
        return "EDGE";
      } else if (agent.indexOf("SAFARI") >= 0) {
        return "SAFARI";
      } else if (agent.indexOf("CHROME") >= 0) {
        return "CHROME";
      } else {
        return "";
      }
    },

하지만 막상 agent를 각 브라우저에서 출력한 결과는 다음과 같다

 

■ chrome

MOZILLA/5.0 (MACINTOSH; INTEL MAC OS X 10_15_7) APPLEWEBKIT/537.36 (KHTML, LIKE GECKO) CHROME/98.0.4758.109 SAFARI/537.36

■ firefox

MOZILLA/5.0 (MACINTOSH; INTEL MAC OS X 10.15; RV:97.0) GECKO/20100101 FIREFOX/97.0

■ safari

MOZILLA/5.0 (MACINTOSH; INTEL MAC OS X 10_15_7) APPLEWEBKIT/605.1.15 (KHTML, LIKE GECKO) VERSION/15.3 SAFARI/605.1.15

■ edge

MOZILLA/5.0 (MACINTOSH; INTEL MAC OS X 10_15_7) APPLEWEBKIT/537.36 (KHTML, LIKE GECKO) CHROME/98.0.4758.102 SAFARI/537.36 EDG/98.0.1108.62

 

때문에 chrome에서 위 코드를 돌리면 user agent가 safari가 떠버리는 문제가 발생했고 다음과 같이 코드를 수정했다.

    checkBrowser() {
      const agent = navigator.userAgent.toUpperCase();
      console.log(agent);
      if (agent.indexOf("TRIDENT") >= 0) {
        return "IE";
      } else if (agent.indexOf("FIREFOX") >= 0) {
        return "FIREFOX";
      } else if (agent.indexOf("EDG") >= 0) {
        return "EDGE";
      } else if (agent.indexOf("SAFARI") >= 0) {
        if (agent.indexOf("CHROME") >= 0) {
          return "CHROME";
        } else {
          return "SAFARI";
        }
      } else {
        return "";
      }
    },

 

 

왜 chrome에서 user agent에 safari가 있는것이며 다른 브라우저도 마찬가지로 여러 agent가 혼재 되어있는 것일까?

그 이유는 다른 브라우저의 렌더링 엔진 기술을 공유하기 때문이다.

예를 들어 Google의 Chrome 웹 브라우저는 WebKit을 렌더링 엔진으로 사용하지만 다른 JavaScript 엔진(V8)을 사용한다.

마찬가지로 대부분의 브라우저는 표준 mozilla 렌더링을 따르기 때문에 user agent의 시작 부분에 Mozilla가 있다.

 

아래 링크를 참고하면 브라우저 역사에 따라 어떤 배경으로 user agent가 이렇게 되었는지 이해할 수 있다.

https://stackoverflow.com/questions/54156491/why-chrome-sends-all-agent-names-as-part-of-user-agent-header

Why chrome sends all agent names as part of user-agent header

https://humanwhocodes.com/blog/2010/01/12/history-of-the-user-agent-string/

History of the user-agent string - Human Who Codes