[Project] 브라우저 감지 - Navigator : userAgent

SEONDY·2024년 11월 10일

navigator.useragent project useragent 브라우저 감지 할망비전

Project

목록 보기

6/9

[Project] 브라우저 감지 - Navigator : userAgent

경로를 보여주는 페이지에서 네비연동 버튼을 클릭했을 때, 네이버 지도 앱으로 이동하는 동작이 필요했다.

웹앱으로 진행되었기 때문에, iOS와 AOS의 구분이 필요했다.
네비연동 버튼을 클릭했을 때, 만약 네이버 지도 앱이 다운로드가 되어있지 않다면 앱스토어로 이동해야 했기 때문에 해당 정보가 필요했다.

그래서 찾게 된 것이 navigator.userAgent이다.

1. 사용자 에이전트(User Agent)란?

사용자를 대표하는 컴퓨터 프로그램 (브라우저)
브라우저는 서버에 보내는 모든 요청에 사용자 에이전트 문자열을 보낸다.
자신의 정체를 알리는 User-Agent HTTP 헤더 : 이 문자열은 보통 브라우저 종류, 버전 번호, 호스트 운영체제를 포함한다.
스팸 봇, 다운로드 관리자, 일부 브라우저는 자신의 정체를 숨기고 다른 클라이언트인 척 하려고 가짜 사용자 에이전트 문자열을 보내는데, 이를 사용자 에이전트 스푸핑(UA Spoofing)이라 말한다.
클라이언트에서는 NavigatorID.userAgent 속성을 통해 사용자 에이전트 문자열에 접근할 수 있다.

2. `Navigator: userAgent property`

`navigator.userAgent`

read-only 속성으로, 현재 브라우저의 사용자 에이전트 문자열을 반환한다.
사용자 에이전트 문자열을 감지하는 브라우저 식별은 신뢰할 수 없으며, 사용자 문자열은 사용자 구성이 가능하므로 권장되지 않는다.
- Firefox 사용자는 about:config에서 general.useragent.override 값을 설정하여 사용자 에이전트 문자열을 변경할 수 있다.
  이 기능은 전송된 HTTP 헤더만 변경하고, navigator.userAgent에서 반환한다.
  브라우저 식별을 위해 JS 코드를 사용하는 다른 방법도 있을 수 있다.
- Opera 6+를 사용하면, 메뉴를 통해 브라우저 식별 문자열을 설정할 수 있다.
사용자 에이전트 문자열은 브라우저가 HTTP 헤더를 통해 서버로 전달하거나, Navigator 객체에서 제공하는 다양한 메소드로 접근할 수 있다.
이 문자열은 여러 정보를 포함한 특정한 구조를 가지고 있으며, 브라우저의 종류/버전/운영체제 정보 등 다양한 시스템 정보를 담고 있다.
사용자 에이전트 문자열은 여러 Navigator 객체의 속성에서 가져온 정보들로 구성되며, 이러한 정보는 사용자가 설정할 수 있다.

사용 예제

alert(window.navigator.userAgent);

크롬으로 열면 이러한 사용자 에이전트 문자열이 나오는 것을 확인할 수 있다.
모바일로 열었을 때는, 브라우저에 따라 나오는 문자열이 조금 차이가 있었다.

아이폰 + 사파리	아이폰 + 크롬

브라우저 환경 별로 사용자 에이전트 문자열이 다른 것을 확인할 수 있다!
- 참고 사이트1 - 브라우저 환경별 user-agent 예시
- 참고 사이트2 - User-agent 정확하게 해석하기

3. userAgent로 iOS, AOS 감지하기

userAgent 문자열에서 특정 문자열을 찾는 방식으로 브라우저 감지를 하려고 했다!

const isAndroid = /android/i.test(navigator.userAgent);
const isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);

if (isAndroid) alert("안드로이드!")
else if (isiOS) alert("iOS!");

isAndroid
userAgent에서 대소문자를 구별하지 않고(플래그 i) android를 포함하고 있으면 "안드로이드" alert를 띄우게 했다.
isiOS
isAndroid와 마찬가지로 userAgent 문자열에 대소문자를 구별하지 않고 iPhone, iPad, iPod을 포함하고 있다면 "iOS" alert를 띄우게 했다.
결과
~~현재 안드로이드 기기를 가지고 있지 않아서 안드로이드 테스트를 진행하지 못했으나, 아이폰의 경우 "iOS" alert가 작동하는 것을 확인할 수 있었다.~~
아이폰도 안드로이드도 설정한 alert가 작동하는 것을 확인했다!