Abstract

    Client Hints

Client Hints

UserAgent 단점

UA는 이제까지 웹브라우저, 운영체제, OS 환경 등을 서버에 전달하여 최적화된 서비스를 받을 수 있게 도와주는 역할을 주로 했지만, 최근 개인정보와 보안 상의 단점이 부각되고 있습니다.

광고주가 특정 유저를 추적하고 지문을 만드는 방법으로 이용함 (fingerprint)
특정 Internet Provider에서 사용자의 제한을 위한 정보로 사용됨 (접근 금지 등)
특정 서비스에서 웹브라우저의 종류를 파악하여 서비스를 제한함 (심지어 구글도 이 사례에 해당하는데, 대표적으로 유튜브의 브라우저별 기능제한)
일부 minor한 웹브라우저가 major한 다른 웹브라우저의 UA를 흉내냄

위와 같은 여러가지 이유 때문에 구글은 자사의 Chrome 브라우저에서 UA를 완전히 static한 문자열로 변경할 예정이며, 대략 2020년 9월 정도에 적용될 예정이라고 합니다. 계획은 다음과 같습니다.

Client Hints

Version Plan Chrome 81 (2020 년 3 월 중순) Chrome 콘솔에 UA 문자열을 읽는 웹 페이지에 대한 경고를 표시하여 개발자가 웹 사이트 코드의 수정을 유도할 계획입니다. Chrome 83 (2020년 6월 초) UA 문자열의 Chrome 브라우저 버전을 동결하고 OS 버전을 통합합니다. Chrome 85 (2020년 9월 중순) 데스크톱 버전의 UA 문자열을 공통 값으로 동결하고 모바일에서도 OS와 단말기 문자열을 공통 값으로 동결할 예정입니다.

Client hints는 크롬 카나리아 (2020.04 현재 84.0.4106.0 64bit) 에서 chrome://flags에 접근하여 “Experimental Web Platform features”, “Freeze User-Agent request header” 를 enabled 로 전환하면 정식 버전에 적용되기 전에 먼저 테스트할 수 있습니다.

client_hint

Client Hints는 크롬 43버전에서부터 지원해왔습니다. 본래의 목적은 리소스의 선택적 적용을 돕기 위함이었습니다.

Client hints를 사용하는 방법은 Accept-CH header를 response header에 추가하는 방법과 메타태그를 추가하는 방법이 있습니다.

// header
Accept-CH: device-memory, dpr, width, viewport-width, rtt, downlink, ect
Accept-CH-Lifetime: 86400

// meta
<meta http-equiv="Accept-CH" content="device-memory, dpr, width, viewport-width, rtt, downlink, ect">
<meta http-equiv="Accept-CH-Lifetime" content="86400">

Accept-CH 헤더 속성은 클라이언트 측에서 요청할 사용자 정보를 정의합니다. Accept-CH-Lifetime 헤더는 크롬 67에서 추가되어 Accept-CH 헤더에서 정의된 값을 전달하여 지정된 시간동안 캐싱해줍니다. 초 단위이므로 86400s = 1day 입니다.

각 속성은 다음과 같습니다.

device-memory : 디바이스의 사용 가능한 메모리. 시스템의 RAM 용량과는 일치하지 않음
dpr : device pixel ratio
width : 요청된 리소스가 이미지일 경우, viewport에 표시되어 DPR이 적용된 css px 단위의 width
viewport-width : css px 단위의 viewport width
rtt : round-trip time
downlink : 추정되는 다운로드 속도 (Mbit/s 단위)
ect : 추정되는 connection type

프론트 개발자로써 UA를 대체하기 위해 자주 사용할 것으로 예상되는 속성은 width, viewport-width, dpr 같은 기기마다 화면으로 구분할 수 있는 속성들을 자주 사용할 것 같습니다.

client_hints_request Accept-CH header를 통해 요청된 request header

Client Hints의 새로운 옵션 활용 UA를 대체하기 위해 곧 추가될 Client hints의 옵션은 다음과 같습니다.

<meta http-equiv="Accept-CH" content="UA, UA-Platform, UA-Arch, UA-Model, UA-Mobile, UA-Full-Version">

UA : 웹브라우저의 이름과 버전 (Accept-CH 헤더와 관계없이 전송됨)
UA-Platform : 플랫폼(OS)의 이름과 버전
UA-Arch : 플랫폼(OS)의 아키텍쳐
UA-Model : 기기 모델명
UA-Mobile : 기기의 모바일 여부 “?0” 또는 “?1”
UA-Full-Version : 웹브라우저의 버전 전체

이와 동시에 새로운 자바스크립트 인터페이스로 navigator.userAgentData 라는 객체가 추가될 예정입니다. 이 인터페이스 역시 Client hints header와 동일하게 HTTPS 프로토콜에서만 지원됩니다. Low entropy value와 High entropy value로 구분되어 있는데, High entropy value의 경우 Promise로 동작합니다.

// Low entropy values
navigator.userAgentData.mobile;
navigator.userAgentData.uaList;
// High entropy values
navigator.userAgentData.getHighEntropyValues([
  "platform",
  "platformVersion",
  "architecture",
  "model",
  "uaFullVersion"
]).then(res => console.log(res)); // Promise

참고사이트

https://amati.io/bye-user-agent-hello-client-hints/ https://frontdev.tistory.com/entry/UA-%EB%8C%80%EC%8B%A0%EC%97%90-Client-Hints-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

Originally published July 12, 2020
Latest update July 11, 2020

Related posts :

Article

Abstract

Client Hints

UserAgent 단점

Client Hints

참고사이트