07
4월
2020

UA가 가고 Client Hints가 온다

navigator.userAgent는 브라우저 환경 별로 다른 화면과 기능을 제공하려고 할 때 유용한 웹브라우저 내장 객체입니다. navigator라는 이름에서 보이듯 1990년대 넷스케이프 웹브라우저 시절부터 2020년 현재에 이르기까지 클라이언트 환경을 분석하기 위해 많이 사용되고 있지만, 이 객체는 곧 사용하지 못하게 될 예정입니다.

https://www.zdnet.com/article/google-to-phase-out-user-agent-strings-in-chrome/

구글이 자사의 Chrome 브라우저에서 User Agent 문자열을 단계적으로 사용 중단할 계획을 발표하고 대안으로 Client hints 를 제안했습니다. 이는 사용자 개인정보를 보호하기 위해 추진하고 있는 프라이버시 샌드박스 정책 중 하나입니다.

Client hints는 W3C 표준은 아니며, W3C 표준 트랙에도 없는 내용입니다. Web platform Incubator Community Group(WICG)에서 발표한 제안일 뿐, 앞으로 변경될 가능성도 있습니다. 현재 Accept-CH 헤더로 크롬과 파이어폭스에서 일부 스펙을 구현한 상태인데요, 주요 웹브라우저 벤더인 Apple, Microsoft 도 UA의 사용 중단에 동의한 상황이기 때문에 Client hints의 정착은 시간 문제일 것 같습니다.


왜 Client hints인가?

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

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

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

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

참고로 Chrome 81의 릴리즈는 코로나 바이러스의 영향으로 인해 약간의 일정 지연이 있어 2020년 4월 7일 예정이었지만 아직까지 릴리즈되지 않아 일정 지연이 있는 것으로 생각됩니다.

UA의 사용 중단으로 인해 직접적으로 타격을 받는 주체는 아무래도 온라인 광고업계가 될 것이기에, 광고업계에서는 당연히 UA의 폐지를 반기지 않고 있습니다.

이 조치는 각각의 환경에서 다른 기능을 제공해야 하는 프론트엔드 엔지니어 입장에서도 좀 귀찮은 작업이 될 것 같습니다. 또한 과거의 웹브라우저들은 여전히 User Agent로 환경을 분석해야 하기 때문에 웹브라우저의 버전을 확인하여 User Agent, Client hints 중 어느 것을 사용할지 결정하는 과정도 필요합니다. 또한 Client hints는 보안을 위해 HTTPS 프로토콜에서만 지원됩니다.

하지만 현재의 draft 상으로는 UA로 알 수 있는 정보 외에 DPR, viewport-width 등의 정보도 취득할 수 있어 웹개발에는 더 편리하게 사용할 수 있지 않을까 합니다. 개발자 입장에서의 장점은 아니지만 웹브라우저를 사용하는 유저 입장에서도 제공할 수 있는 정보를 취사 선택할 수 있다는 점도 반길만한 점입니다. (참고 : https://wicg.github.io/ua-client-hints/#access)

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


Client hints의 활용

Client hints는 꽤 오래 전인 2015년 Chrome 43부터 제공된 기능입니다. 당시의 기능은 viewport-width, width, dpr 등을 서버에 전달하여 서버 측에서 해당 정보를 바탕으로 전송할 리소스를 결정하는 것을 도와주는 역할이었습니다.

Client hints를 이용하기 위해서는 Accept-CH header를 response header에 추가하거나, html 페이지에 <meta> 태그를 추가하면 됩니다.

Accept-CH: device-memory, dpr, width, viewport-width, rtt, downlink, ect
Accept-CH-Lifetime: 86400
<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 헤더는 Chrome 67부터 추가된 스펙으로 Accept-CH 헤더에 정의된 값을 전달한 이후 지정된 시간동안 캐쉬되도록 정의할 수 있습니다. 초 단위이며 최대 86400초(1일)로 지정할 수 있습니다.

  • 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
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

개인적으로 생각할 때 구글의 프라이버시 샌드박스 정책이라는 것이 조금 급하게 진행되고 있는 것 같습니다. 사용자의 개인정보 보호라는 이유는 인터넷 사용자로서도, 웹개발자로서도 환영하는 바이지만, 웹브라우저 시장을 실질적으로 장악하고 있는 크롬에서 결정하게 되면 모든 벤더들이 따라갈 수밖에 없고 서비스를 제공하는 입장에서도 대응에 혼란이 생기는 경우도 있습니다.

아주 오랫동안 사용되었던 UA를 대체하는 Client hints 는 W3C 표준으로 지정되지 않은 상태이고, 구글의 다른 보안 정책 중 하나인 SameSite Cookie 도 세계적으로 문제가 된 코로나 바이러스 때문에 적용이 미루어졌는데요… 높은 점유율을 바탕으로 정책을 끌고 가는 것보다는 다른 벤더들과 W3C와 함께 표준으로 충분히 논의하고 결정한 후 도입하면 좋겠다는 생각을 해봅니다.

8 Responses

  1. lunamoth 댓글:

    좋은 글 감사드립니다.

    궁금한게 있는데 Client Hints 도 “광고주가 특정 유저를 추적하고 지문을 만드는 방법으로 이용”할 수 있는건가요?

  2. 나나 댓글:

    내용이 알기쉽게 정리되어있어 많은 도움이 되었습니다!

    질문이 있는데 혹시 유저에이전트는 언제부터 사라지는지 알수있나요?
    점차적으로 없애는건지 바로 User-Agent Client Hints를 도입하는건지 혹시 알고계신다면 답변 부탁드립니다

    • 아마티 댓글:

      기존에 있었던 navigator.userAgent 자체가 사라지진 않지만, 점진적으로 static 값으로 고정될 예정입니다
      일정은 포스트에도 정리되어 있긴 하지만, 지금 코로나 때문에 일정에 큰 변화가 생겨 현재로선 알기 어렵습니다.

      • 나나 댓글:

        친절한 답변 감사합니다 !
        userAgent가 사라지진않는군요!
        static값으로 고정된다는게 어떤 의미인지 알수있을까요?

        • 아마티 댓글:

          기존에는 브라우저 버전업 될때마다 버전이 바뀐다던가 Chrome의 경우 chrome 버전을 표시하였습니다. (최근 버전은 83입니다)
          이 값이 버전을 표시하지 않고 완전히 변경되지 않는 static한 값으로 변경된다는 의미입니다. 심지어 최종적으로는 모바일, 데스크탑의 구분도 되지 않을 예정입니다.
          아직 어떤값이 보여질지는… 모르는 상태입니다. 🙂

          • 나나 댓글:

            그렇군요 ! 친절한답변 감사합니다
            많은 도움이 되었습니다!

          • 나나 댓글:

            자꾸 질문드려서 죄송합니다 ㅠㅠ
            “기존에 있었던 navigator.userAgent 자체가 사라지진 않지만, 점진적으로 static 값으로 고정될 예정”이라고 하셨는데, 혹시 이부분과 관련된 공식 문서가 있으면 알려주실수있으신가요? 위에 적혀있는 url을 타고봤는데 제가 영어는 까막눈이라 쉽게 찾기가 어렵네요 !

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

%d 블로거가 이것을 좋아합니다: