<div id="readability-page-1" class="page"><div itemprop="articleBody"><p><a target="_blank" rel="noopener" href="https://www.whatismybrowser.com/detect/what-is-my-user-agent/">WhatIsMyBrowser</a> 사이트에 접속하면 나의 User Agent 정보를 확인할 수 있다. 이 식별 정보는 브라우저에서 서버로 요청될 때 User-Agent 헤더에 포함되는데 어떻게 활용되는 값일까?</p><h4 id="ua-%EC%8A%A4%EB%8B%88%ED%95%91-%EB%98%90%EB%8A%94-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%8A%A4%EB%8B%88%ED%95%91" tabindex="-1">UA 스니핑 또는 브라우저 스니핑</h4><p>본래 스니핑이라는 단어는 해킹 기법을 의미하는데 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Browser_detection_using_the_user_agent">UA 스니핑(UA sniffing)</a> 또는 브라우저 스니핑은 웹 서비스 이용자의 디바이스와 사용중인 웹 브라우저를 식별하여 서비스를 안정적으로 제공하는데 활용된다. 모던 브라우저들이 표준을 지키고 있지만 꽤나 많은 부분들이 서로 다름으로 인해 크로스 브라우징 문제들이 발생하기도 한다. UA(User-Agent) 식별 정보는 크로스 브라우징을 해결하기 위한 목적으로 활용될 수 있다.</p><h4 id="uv-%EC%8A%A4%EB%8B%88%ED%95%91%EC%9D%84-%EC%9C%84%ED%95%9C-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC" tabindex="-1">UV 스니핑을 위한 라이브러리</h4><p>기본적으로 브라우저 window 객체의 navigator 를 통해 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent">userAgent</a> 속성을 가져올 수 있다. 하지만, User-Agent 정보를 원하는 형태로 가공하는 함수를 별도로 작성해야하기 때문에 비효율적일 수 있으므로 관련 라이브러리를 활용하면 좋다.</p><ul><li>Quasar 프레임워크는 <a target="_blank" rel="noopener" href="https://quasar.dev/options/platform-detection/">Platform Detection</a> 을 지원한다.</li><li>일반적인 자바스크립트 프로젝트에서는 <a target="_blank" rel="noopener" href="https://docs.uaparser.dev/">UAParser.js</a> 를 이용할 수 있다.</li></ul><h4 id="pwa-%EC%8A%A4%EB%8B%88%ED%95%91" tabindex="-1">PWA 스니핑</h4><p>대표적인 크로스 브라우징 문제는 사용자 디바이스와 브라우저에 따라 PWA(Progressive Web Application)를 지원하는게 다르다는 것이다. 예를 들어, 파이어폭스 또는 사파리 브라우저에서는 공식적으로 지원하지 않는데, 아이폰에서는 <a target="_blank" rel="noopener" href="https://web.dev/learn/pwa/installation#ios_and_ipados_installation">PWA 설치를 위한 프롬프트가 없이 때문에</a> 홈화면에 추가하는 방식으로 PWA 처럼 동작하는 홈화면 웹 앱으로 실행할 수 있다. 그래서 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeinstallprompt_event">PWA 설치 프롬프트 지원 여부(beforeinstallprompt)</a>를 <a target="_blank" rel="noopener" href="https://web.dev/learn/pwa/detection">감지(Dectection)</a>해서 설치에 대한 가이드를 제공하는 편이다.</p><hr><p>백엔드 개발자 입장에서 User-Agent 헤더 정보는 요청에 대한 로그를 수집하는 과정에서 활용하는 편이다. 가끔은 외부 시스템에서 제공하는 데이터를 수집하기 위해서 크롤링을 구현할 때 일반 사용자처럼 동작하도록 속이기?도 한다. 최근 프로젝트에서는 키클록 통합 인증과 모바일 로그인을 구분하기 위해 브라우저에서 전달하는 User-Agent 헤더 정보를 토대로 보안 관점에서 모바일 로그인 API 요청을 제한해두었다. 마지막으로, 크롬 브라우저에서는 <a target="_blank" rel="noopener" href="https://developer.chrome.com/docs/privacy-security/user-agent-client-hints?hl=ko">User-Agent 클라이언트 힌트</a>도 지원한다.</p></div></div>

Mambo

WhatIsMyBrowser 사이트에 접속하면 나의 User Agent 정보를 확인할 수 있다. 이 식별 정보는 브라우저에서 서버로 요청될 때 User-Agent 헤더에 포함되는데 어떻게 활용되는 값일까?
UA 스니핑 또는 브라우저 스니핑
본래 스니핑이라는 단어는 해킹 기법을 의미하는데 UA 스니핑(UA sniffing) 또는 브라우저 스니핑은 웹 서비스 이용자의 디바이스와 사용중인 웹 브라우저를 식별하여 서비스를 안정적으로 제공하는데 활용된다. 모던 브라우저들이 표준을 지키고 있지만 꽤나 많은 부분들이 서로 다름으로 인해 크로스 브라우징 문제들이 발생하기도 한다. UA(User-Agent) 식별 정보는 크로스 브라우징을 해결하기 위한 목적으로 활용될 수 있다.
UV 스니핑을 위한 라이브러리
기본적으로 브라우저 window 객체의 navigator 를 통해 userAgent 속성을 가져올 수 있다. 하지만, User-Agent 정보를 원하는 형태로 가공하는 함수를 별도로 작성해야하기 때문에 비효율적일 수 있으므로 관련 라이브러리를 활용하면 좋다.
Quasar 프레임워크는 Platform Detection 을 지원한다.
일반적인 자바스크립트 프로젝트에서는 UAParser.js 를 이용할 수 있다.
PWA 스니핑
대표적인 크로스 브라우징 문제는 사용자 디바이스와 브라우저에 따라 PWA(Progressive Web Application)를 지원하는게 다르다는 것이다. 예를 들어, 파이어폭스 또는 사파리 브라우저에서는 공식적으로 지원하지 않는데, 아이폰에서는 PWA 설치를 위한 프롬프트가 없이 때문에 홈화면에 추가하는 방식으로 PWA 처럼 동작하는 홈화면 웹 앱으로 실행할 수 있다. 그래서 PWA 설치 프롬프트 지원 여부(beforeinstallprompt)를 감지(Dectection)해서 설치에 대한 가이드를 제공하는 편이다.
백엔드 개발자 입장에서  User-Agent 헤더 정보는 요청에 대한 로그를 수집하는 과정에서 활용하는 편이다. 가끔은 외부 시스템에서 제공하는 데이터를 수집하기 위해서 크롤링을 구현할 때 일반 사용자처럼 동작하도록 속이기?도 한다. 최근 프로젝트에서는 키클록 통합 인증과 모바일 로그인을 구분하기 위해 브라우저에서 전달하는 User-Agent 헤더 정보를 토대로 보안 관점에서 모바일 로그인 API 요청을 제한해두었다. 마지막으로, 크롬 브라우저에서는 User-Agent 클라이언트 힌트도 지원한다.

User-Agent

댓글