본문 바로가기
Internet

[Chrome] User-Agent 축소 및 User-Agent Clienet-Hint API로 마이그레이션

작은곰- 2022. 4. 5. 20:00
반응형

안녕하세요😊

오늘은 크롬의 User-Agent 축소 및 User-Agent Client-Hints API로 마이그레이션에 대해 정리하여 공유를 해보려고합니다.

몇주간 제가 찾아본 내용을 정리해보려고 하는데 저와 같은 고민을 하시는 분들께 도움이 되었으면 좋겠습니다.

 

User-Agent 문자열이란?

User-Agent 요청 헤더

사용자-에이전트 요청 헤더는 요청을 보낸 user-agent에 대한 정보를 담고 있는 필드입니다. User-Agent 문자열을 통해 서버가 요청을 보낸 사용자 에이전트의 응용 프로그램, 운영체제, 공급업체 및 버전을 식별할 수 있는 정보를 알 수 있습니다.

 

크롬 브라우저에서 특정 웹사이트에 접속한 후 개발자 도구 '네트워크' 탭의 'Request Headers' 항목에 보면 User-Agent 헤더가 같이 전송되는 것을 알 수 있습니다.

 

Navigator.userAgent

프론트엔드 개발을 하시는 분들이라면 요청헤더가 아니더라도 navigator.userAgent 인터페이스를 통하여 브라우저의 정보를 추출하는 로직을 한번 쯤 보신적이 있을 것 같습니다.

 

예시로 크롬 개발자도구 콘솔창에서 navigator.userAgent 구문을 실행해보면 아래와 같은 값을 받아볼 수 있습니다.

개발자들은 주로 이 값을 파싱하여 해당 브라우저가 실행되고 있는 기기의 운영체제, 브라우저 종류, 버전, 디바이스 정보 등의 User-Agent 정보를 얻고 있습니다.

 

User-Agent 요청 헤더의 목적의 변질

그러나 1996년에 User-Agent 문자열이 정의될 때의 의도는 단순히 브라우저 정보만을 표기하는 것이 었는데, 시간이 지남에 따라 기존 userAgent 제공 취지와 다르게 운영체제, 디바이스 정보 등 세부 정보가 많이 추가 되었습니다.

 

ex) 최초 User-Agent 문자열의 정의

User-Agent     = "User-Agent" ":" 1*( product | comment )
// ex) User-Agent: CERN-LineMode/2.15 libwww/2.17b3

💡 Line Mode 브라우저는 두 번째로 만들어진 웹 브라우저

 

 

이런 많은 정보는 개별 사용자를 고유하게 식별가능하게 만드는 정보가 될 수 있고 이 경우 브라우저는 요청하지 않은 데이터까지 너무 많은 정보를 브로드캐스트하게 됩니다.  또한, User-Agent 문자열은 기본적으로 웹페이지를 실행할 때 HTTP 요청 헤더에 함께 포함되어 내려오기 때문에, 개인 정보가 될 수 있는 고유한 정보를 기본 동작으로 보내고 있는 것이됩니다.

 

그리고 예시와 같이 크롬 브라우저에서도 Mozila, AppleWebKit, Safari 등 호환 가능한 브라우저 정보도 같이 표시가되고 있으며 구조화가 되어있지 않습니다. 이는 불필요한 복잡성으로 인해 버그 및 사이트 호환성 문제의 원인이 됩니다.

 

이러한 문제들로 인하여 Chrome은 앞으로 점진 적으로 User-Agent 문자열에 표기되는 정보를 축소하고 User-Agent Client Hints API를 도입하여 개선을 해 나갈 계획을 밝혔습니다.

 

뒤에서는 User-Agent 문자열 축소는 어떻게 진행되는지 알아보고 User-Agent Client Hints API로 어떻게 마이그레이션을 진행해야하는지를 알아보겠습니다.

 

 

User-Agent 축소

User-Agent 축소란 위에서 설명드렸던 User-Agent 문자열에 포함되었던 정보들 중 일부 데이터를 크롬에서는 더 이상 제공하지 않겠다는 것입니다. 그러나 User-Agent 문자열을 모두 제공하지 않는 것이 아니라 일부 정보만 제공하지 않는 것이기 때문에 해당 부분만 잘 체크를 해준다면 기존 로직을 그대로 사용할 수도 있고, User-Agent Client Hints API로 마이그레이션을 진행하지 않아도 될 수 있으니 너무 걱정하지는 않으셔도 될 것 같습니다.

 

User-Agent 축소에서 변경되는 사항은 아래와 같습니다.

 

navigator.userAgent

1. Chrome 브라우저의 버전이 Major 버전만 제공됩니다.

기존 변경 후
Chrome/<majorVersion>.<minorVersion>
ex) Chrome/84.0.4076.0		 Chrome/<majorVersion>.0.0.0
ex) Chrome/84.0.0.0

위와 같이 Major 버전 하위의 MINOR.BUILD.PATCH 버전이 앞으로 0.0.0으로 제공됩니다.

 

2. Chrome 데스크탑에서 고정된 플랫폼 문자열만 제공합니다.

제공되는 플랫폼

  • Windows NT 10.0; Win64; x64
  • Macintosh; Intel Mac OS X 10_15_7
  • X11; Linux x86_64
  • X11; CrOS x86_64
기존 변경 후
<platform>; <oscpu>
ex) Windows NT 5.0; Win64; x64
ex) Windows NT 6.3; Win64; x64		 <unifiedPlatform>
ex) Windows NT 10.0; Win64; x64
ex) Windows NT 10.0; Win64; x64

 

3. Chrome 모바일 및 테블릿에서 안드로이드 버전 및 디바이스 정보가 고정됩니다.

기존 변경 후
Android <androidVersion>; <deviceModel>
ex) Android 9; SM-A205U		 Android 10; K
ex) Android 10; K

 

참고) 축소된 navigator.platform

고정된 문자열 제공 예정

Platform Reduced value
macOS MacIntel
Windows Win32
Chrome OS Linux x86_64
Linux Linux x86_64
Android Linux armv81

💡 navigator.platform은 삭제 예정 속성으로, navigator.userAgentData.platform으로 대체 필요

 

참고) 축소된 navigator.appVersion

navigator.appVersion는 사실상 navigator.userAgent의 별칭으로 같은 값을 반환합니다. 따라서 userAgent 축소와 동일하게 문자열이 변경됩니다.

💡 navigator.appVersion은 삭제 예정 속성으로, navigator.userAgent로 대체 필요

 

 

 

위의 3가지 경우와 같이 Chrome의 Minor 버전이나 Chrome 브라우저가 실행중인 OS 또는 디바이스 정보를 이용하지 않는 서비스에서는 특별히 코드를 수정해주지 않아도 정상적으로 서비스 운영이 가능할 것으로 보입니다. 이런 경우, 사용자 에이전트 축소를 테스트해볼 수 있는 Origin 평가판을 운영중인 서비스에 등록하여 문제가 없는지 검수만 진행해보면 될 것 같습니다. 또는 User-Agent 축소 Origin Trial 데모 페이지에서 축소된 UA 문자열을 받아볼 수 있습니다.(https://uar-ot.glitch.me/)

만약 위 3가지의 정보를 이용한 서비스를 이용 중이라면 User-Agent Client Hints로 마이그레이션이 필요합니다.

 

User-Agent 축소 origin trial이란?

Chrome 95 베타부터 제공되는 origin trial을 이용하면 사이트에서 축소된 UA 문자열을 받아볼 수 있습니다. 이를 통해 사이트들은 축소된 UA가 크롬의 기본 동작이 되기 전에 문제를 발견하고 수정할 수 있습니다.

 

이 origin trial은 Javascripts API로 제공되는 UA 문자열뿐만 아니라 HTTP request에서 오는 User-Agent header에서도 변경된 사항을 받아볼 수 있습니다. origin trial의 토큰이 유효할 경우, Sec-CH-UA-Reduced라는 이름의 클라이언트 힌트를 통해 축소된 UA 문자열을 받아볼 수 있습니다.

 

origin trial 이용 방법

  1. 사용자 에이전트 감소 평가판 페이지를 방문하여 원본 평가판에 도메인을 등록하고 토큰을 발급 받습니다.
  2. HTTP 응답 헤더를 업데이트합니다.
    1. HTTP 응답 헤더에 `Origin-Trial: <ORIGIN TRIAL TOKEN>`을 추가합니다. 여기서 <ORIGIN TRIAL TOKEN>에는 원본 평가판에 등록할 때 얻은 토큰을 넣어줍니다.
    2. HTTP 응답 헤더에 `Accept-CH: Sec-CH-UA-Reduced`를 추가합니다.
    3. `Accept-CH` 값을추가할 경우 후속 요청에서만 축소된 User-Agent 문자열을 포함합니다.  첫번째 요청에서도 축소된 UA 문자열을 포함하려면 HTTP 응답 헤더에 `Accept-CH`, `Origin-Trial`와 함께 `Critical-CH: Sec-CH-UA-Reduced`를 추가합니다.
  3. Chrome M95(또는 그 이상) 버전에서 웹사이트를 로드하면 축소된 UA 문자열 수신이 시작됩니다.

 

만약 origin trial을 통해 받아본 축소된 UA 문자열에서 필요한 데이터를 얻을 수 없다면 User-Agent Client Hints를 이용하여 추가적인 정보를 받아올 수 있습니다.

 

User-Agent Client Hints API란?

UA-CH(User-Agent Client Hints)는 기존 UA 문자열과 동일한 전체 정보를 제공할 수 있으며, UA-CH를 이용하면 사이트는 필요한 UA 정보만 요청할 수 있습니다. 

 

 

 

정리

User-Agent 축소와 관련하여 개발자가 점검해야할 항목들

  • User-Agent HTTP 요청 헤더
  • navigator.userAgent Javascript API
  • navigator.platform Javascript API
  • navigator.appVersion Javascript API

 

 

 

 

참고 문서

User-Agent 문자열이란?

 

User-Agent Reduction이란?

 

User-Agent Reduction 일정

User-Agent Reduction Origin Trial 등록 및 테스트

User-Agent Client Hints API로 마이그레이션

 

 

 

 

 

 

 

 

 

 

 

반응형
저작자표시

'Internet' 카테고리의 다른 글

Cookie 값 세팅하기  (0) 2022.03.15
[Browser] Navigator.userAgentData란?  (0) 2021.12.10
[Chrome] User-Agent Reduction Origin 평가판 및 날짜  (0) 2021.12.08
브라우저 핑거프린팅(Browser fingerprinting)이란?  (0) 2021.12.07
[Chrome] User-Agent Reduction; 사용자 에이전트 축소와 사용자 에이전트 클라이언트 힌트(UA-CH)  (0) 2021.12.06

'Internet' Related Articles

티스토리툴바