사용자 에이전트 클라이언트 힌트를 사용한 사용자 개인 정보 보호 및 개발자 환경 개선

User-Agent Client Hints는 Client Hints API의 새로운 확장으로, 이를 통해 개발자는 개인 정보를 보호하고 인체공학적인 방식으로 사용자 브라우저에 관한 정보에 액세스할 수 있습니다.

Rowan Merewood
Yoav Weiss
Yoav Weiss
X GitHub

클라이언트 힌트를 사용하면 개발자가 사용자 에이전트 (UA) 문자열에서 파싱할 필요 없이 사용자 기기 또는 조건에 관한 정보를 적극적으로 요청할 수 있습니다. 이 대체 경로를 제공하는 것이 최종적으로 사용자-에이전트 문자열 세부사항을 줄이기 위한 첫 번째 단계입니다.

사용자 에이전트 문자열을 파싱하여 사용자 에이전트 클라이언트 힌트를 대신 활용하는 기존 기능을 업데이트하는 방법을 알아봅니다.

배경

웹브라우저에서 요청할 때 브라우저 및 환경에 관한 정보를 포함하므로 서버에서 분석을 사용 설정하고 응답을 맞춤설정할 수 있습니다. 이는 1996년에 계속 정의되었습니다 (HTTP/1.0의 경우 RFC 1945). 여기에서 사용자 에이전트 문자열의 원래 정의를 확인할 수 있으며 다음 예는 다음과 같습니다.

User-Agent: CERN-LineMode/2.15 libwww/2.17b3

이 헤더는 제품 (예: 브라우저 또는 라이브러리) 및 의견 (예: 버전)을 중요도 순으로 지정하기 위한 것이었습니다.

사용자-에이전트 문자열의 상태

그 사이에 10년 동안 이 문자열에는 요청을 보낸 클라이언트에 대한 다양한 추가 세부정보가 누적되었습니다 (이전 버전과의 호환성으로 인해 쓸데없는 정보도 축적되었습니다). Chrome의 현재 사용자 에이전트 문자열을 보면 다음과 같습니다.

Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36

위 문자열에는 사용자의 운영체제 및 버전, 기기 모델, 브라우저의 브랜드 및 정식 버전에 대한 정보, 모바일 브라우저임을 추론하기에 충분한 단서가 포함되어 있으며, 기록상의 이유로 다른 브라우저에 대한 참조의 횟수는 언급하지 않습니다.

이러한 매개변수와 가능한 값의 완전한 다양성을 조합하면 사용자 에이전트 문자열에 개별 사용자를 고유하게 식별할 수 있는 충분한 정보가 포함될 수 있습니다.

사용자 에이전트 문자열은 여러 합법적인 사용 사례를 지원하며 개발자와 사이트 소유자에게 중요한 용도로 사용됩니다. 그러나 은밀한 추적 방법으로부터 사용자의 개인 정보를 보호하는 것도 중요하며, UA 정보를 전송하는 것은 기본적으로 이러한 목표에 위배됩니다.

또한 사용자-에이전트 문자열의 경우 웹 호환성을 개선해야 합니다. 구조화되어 있지 않으므로 파싱하면 불필요한 복잡성이 발생하며, 이로 인해 사용자에게 피해를 주는 버그 및 사이트 호환성 문제가 발생하는 경우가 많습니다. 이러한 문제는 사이트가 구성 테스트에 실패했을 수 있기 때문에 일반적이지 않은 브라우저를 사용하는 사용자에게 불균형적으로 피해를 줍니다.

새로운 사용자 에이전트 클라이언트 힌트 소개

사용자 에이전트 클라이언트 힌트를 사용하면 동일한 정보에 액세스할 수 있지만 개인 정보를 더욱 안전하게 보호할 수 있습니다. 따라서 브라우저에서 모든 항목을 브로드캐스팅하는 사용자 에이전트 문자열의 기본값을 줄일 수 있습니다. 클라이언트 힌트는 서버가 브라우저에 클라이언트 관련 데이터 집합(힌트)을 요청하고 브라우저에서 자체 정책 또는 사용자 구성을 적용하여 반환되는 데이터를 결정하는 모델을 적용합니다. 즉, 기본적으로 모든 사용자 에이전트 정보를 노출하지 않고 이제 액세스 권한이 명시적이고 감사 가능한 방식으로 관리됩니다. 또한 정규 표현식이 필요 없는 단순한 API의 이점을 누릴 수 있습니다.

현재의 클라이언트 힌트는 주로 브라우저의 표시 및 연결 기능을 설명합니다. 자세한 내용은 클라이언트 힌트로 리소스 선택 자동화에서 확인할 수 있지만 이 프로세스를 간단히 복습해 보겠습니다.

서버는 헤더를 통해 특정 클라이언트 힌트를 요청합니다.

⬇️ 서버의 응답

Accept-CH: Viewport-Width, Width

또는 메타 태그:

<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />

그러면 브라우저가 다음 헤더를 후속 요청에서 다시 전송하도록 선택할 수 있습니다.

💸️ 후속 요청

Viewport-Width: 460
Width: 230

서버에서는 예를 들어 적절한 해상도로 이미지를 제공하는 등 응답을 다양하게 선택할 수 있습니다.

사용자 에이전트 클라이언트 힌트는 Accept-CH 서버 응답 헤더를 통해 지정할 수 있는 Sec-CH-UA 접두사로 속성 범위를 확장합니다. 자세한 내용은 설명부터 시작한 다음 전체 제안서를 살펴보세요.

Chromium의 사용자 에이전트 클라이언트 힌트 89

사용자 에이전트 클라이언트 힌트는 버전 89부터 Chrome에서 기본적으로 사용 설정되어 있습니다.

기본적으로 브라우저는 브라우저 브랜드, 중요한 / 주 버전, 플랫폼, 클라이언트가 휴대기기인 경우 표시기를 반환합니다.

🛍️ 모든 요청

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "macOS"

사용자-에이전트 응답 및 요청 헤더

⬇️ 응답 Accept-CH
🔒️ 요청 헤더		 🏠️ 요청
예시 값		 설명
Sec-CH-UA "Chromium";v="84",
"Google Chrome";v="84"		 브라우저 브랜드 및 주요 버전 목록
Sec-CH-UA-Mobile ?1 브라우저가 휴대기기에 있는지 여부를 나타내는 부울입니다 (?1: true), 그렇지 않은 경우 (?0: false).
Sec-CH-UA-Full-Version "84.0.4143.2" [지원 중단됨]브라우저의 전체 버전입니다.
Sec-CH-UA-Full-Version-List "Chromium";v="84.0.4143.2",
"Google Chrome";v="84.0.4143.2"		 브라우저 브랜드 목록 및 전체 버전
Sec-CH-UA-Platform "Android" 기기의 플랫폼으로, 일반적으로 운영체제 (OS)입니다.
Sec-CH-UA-Platform-Version "10" 플랫폼 또는 OS의 버전입니다.
Sec-CH-UA-Arch "arm" 기기의 기본 아키텍처 페이지 표시와는 관련이 없을 수 있지만 사이트에서 올바른 형식으로 된 다운로드를 제공하는 것이 좋습니다.
Sec-CH-UA-Model "Pixel 3" 기기 모델
Sec-CH-UA-Bitness "64" 기본 아키텍처의 비트율 (즉, 정수 또는 메모리 주소의 비트 크기)

교환 예시

교환의 예는 다음과 같습니다.

🏠️ 브라우저의 초기 요청
브라우저가 사이트에서 /downloads 페이지를 요청하고 기본 기본 사용자 에이전트를 전송합니다.

GET /downloads HTTP/1.1
Host: example.site

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: "Android"

⬇️ 서버에서 응답
서버가 페이지를 다시 전송하고 추가적으로 전체 브라우저 버전과 플랫폼을 요청합니다.

HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List

🏠️ 후속 요청
브라우저는 서버에 추가 정보에 대한 액세스 권한을 부여하고 모든 후속 요청에서 추가 힌트를 다시 보냅니다.

GET /downloads/app1 HTTP/1.1
Host: example.site

Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Sec-CH-UA-Platform: "Android"

JavaScript API

헤더와 함께 JavaScript에서 navigator.userAgentData를 통해 사용자-에이전트에 액세스할 수도 있습니다. 기본 Sec-CH-UA, Sec-CH-UA-Mobile, Sec-CH-UA-Platform 헤더 정보는 각각 brands 및 mobile 속성을 통해 액세스할 수 있습니다.

// Log the brand data
console.log(navigator.userAgentData.brands);

// output
[
  {
    brand: 'Chromium',
    version: '93',
  },
  {
    brand: 'Google Chrome',
    version: '93',
  },
  {
    brand: ' Not;A Brand',
    version: '99',
  },
];

// Log the mobile indicator
console.log(navigator.userAgentData.mobile);

// output
false;

// Log the platform value
console.log(navigator.userAgentData.platform);

// output
"macOS";

추가 값은 getHighEntropyValues() 호출을 통해 액세스됩니다. '높은 엔트로피'라는 용어는 정보 엔트로피, 즉 정보 엔트로피, 즉 이러한 값이 사용자의 브라우저에 대해 표시하는 정보의 양을 의미합니다. 추가 헤더를 요청할 때와 마찬가지로 어떤 값이 반환되는지 여부는 브라우저에 따라 다릅니다.

// Log the full user-agent data
navigator
  .userAgentData.getHighEntropyValues(
    ["architecture", "model", "bitness", "platformVersion",
     "fullVersionList"])
  .then(ua => { console.log(ua) });

// output
{
   "architecture":"x86",
   "bitness":"64",
   "brands":[
      {
         "brand":" Not A;Brand",
         "version":"99"
      },
      {
         "brand":"Chromium",
         "version":"98"
      },
      {
         "brand":"Google Chrome",
         "version":"98"
      }
   ],
   "fullVersionList":[
      {
         "brand":" Not A;Brand",
         "version":"99.0.0.0"
      },
      {
         "brand":"Chromium",
         "version":"98.0.4738.0"
      },
      {
         "brand":"Google Chrome",
         "version":"98.0.4738.0"
      }
   ],
   "mobile":false,
   "model":"",
   "platformVersion":"12.0.1"
}

데모

user-agent-client-hints.glitch.me를 통해 자체 기기에서 헤더와 JavaScript API를 모두 사용해 볼 수 있습니다.

힌트 수명 및 재설정

Accept-CH 헤더를 통해 지정된 힌트는 브라우저 세션 동안 또는 다른 힌트 집합이 지정될 때까지 전송됩니다.

즉, 서버에서 다음을 전송하는 경우:

⬇️ 대응

Accept-CH: Sec-CH-UA-Full-Version-List

그러면 브라우저가 닫힐 때까지 해당 사이트에 대한 모든 요청에 Sec-CH-UA-Full-Version-List 헤더를 전송합니다.

🏠️ 후속 요청

Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"

그러나 다른 Accept-CH 헤더가 수신되면 브라우저에서 전송하는 현재 힌트가 완전히 대체됩니다.

⬇️ 대응

Accept-CH: Sec-CH-UA-Bitness

🏠️ 후속 요청

Sec-CH-UA-Platform: "64"

이전에 요청한 Sec-CH-UA-Full-Version-List는 전송되지 않습니다.

Accept-CH 헤더는 페이지에 원하는 힌트의 전체 집합을 지정하는 것으로 간주하는 것이 가장 좋습니다. 즉, 브라우저가 페이지의 모든 하위 리소스에 지정된 힌트를 전송합니다. 힌트는 다음 탐색 시에도 유지되지만 힌트가 제공될 것이라고 생각하거나 힌트를 제공해서는 안 됩니다.

응답에서 빈 Accept-CH를 전송하여 브라우저에서 전송하는 모든 힌트를 효과적으로 지울 수도 있습니다. 사용자가 환경설정을 재설정하거나 사이트에서 로그아웃하는 모든 위치에 이 코드를 추가하는 것이 좋습니다.

이 패턴은 <meta http-equiv="Accept-CH" …> 태그를 통해 힌트가 작동하는 방식과도 일치합니다. 요청된 힌트는 페이지에서 시작한 요청에만 전송되며 후속 탐색에서는 전송되지 않습니다.

힌트 범위 및 교차 출처 요청

기본적으로 클라이언트 힌트는 동일한 출처 요청에서만 전송됩니다. 즉, https://example.com에서 특정 힌트를 요청하더라도 최적화하려는 리소스가 https://downloads.example.com에 있다면 힌트를 받지 않습니다.

교차 출처 요청에서 힌트를 허용하려면 Permissions-Policy 헤더로 각 힌트 및 출처를 지정해야 합니다. 이를 사용자 에이전트 클라이언트 힌트에 적용하려면 힌트를 소문자로 만들고 sec- 접두사를 삭제해야 합니다. 예를 들면 다음과 같습니다.

⬇️ example.com의 응답

Accept-CH: Sec-CH-UA-Platform-Version, DPR
Permissions-Policy: ch-ua-platform-version=(self "downloads.example.com"),
                    ch-dpr=(self "cdn.provider" "img.example.com");

🛍️ downloads.example.com 요청

Sec-CH-UA-Platform-Version: "10"

🏠️ cdn.provider 또는 img.example.com 요청

DPR: 2

사용자 에이전트 클라이언트 힌트 사용 위치

빠른 답변은 사용자 에이전트 헤더를 파싱하거나 동일한 정보 (예: navigator.userAgent, navigator.appVersion 또는 navigator.platform)에 액세스하는 JavaScript 호출을 활용하는 인스턴스를 리팩터링하여 대신 사용자 에이전트 클라이언트 힌트를 사용해야 한다는 것입니다.

여기서 한 걸음 더 나아가 사용자 에이전트 정보의 사용을 재검토하고 가능한 경우 다른 방법으로 대체해야 합니다. 점진적 개선, 기능 감지 또는 반응형 디자인을 활용하여 동일한 목표를 달성할 수도 있습니다. 사용자 에이전트 데이터를 사용할 때 발생하는 기본적인 문제는 검사 중인 속성과 이 속성이 사용 설정하는 동작 간의 매핑을 항상 유지한다는 점입니다. 포괄적인 감지 시스템을 유지하고 최신 상태로 유지하려면 유지보수 오버헤드가 발생합니다.

사용자 에이전트 클라이언트 힌트 저장소에는 이러한 주의사항을 염두에 두고 사이트의 사용 사례 몇 가지를 확인할 수 있습니다.

사용자 에이전트 문자열은 어떻게 되나요?

기존 사이트에 부당한 중단을 일으키지 않으면서 기존 사용자 에이전트 문자열에 의해 노출되는 식별 정보의 양을 줄여 웹에서 은밀한 추적 기능을 최소화하는 것이 목표입니다. 이제 사용자 에이전트 클라이언트 힌트를 도입하면 사용자 에이전트 문자열을 변경하기 전에 새로운 기능을 이해하고 실험해 볼 수 있습니다.

결과적으로 사용자 에이전트 문자열의 정보가 축소되어 레거시 형식을 유지하면서 기본 힌트에 따라 동일한 상위 수준 브라우저와 중요한 버전 정보만 제공합니다. Chromium에서는 생태계에서 새로운 사용자 에이전트 클라이언트 힌트 기능을 평가할 수 있는 추가 시간을 제공하기 위해 최소 2022년까지 이 변경사항이 연기되었습니다.

Chrome 93에서 about://flags/#reduce-user-agent 플래그를 사용 설정하여 이 버전을 테스트할 수 있습니다 (참고: 이 플래그의 이름은 Chrome 84~92 버전에서 about://flags/#freeze-user-agent입니다). 이렇게 하면 호환성을 위해 이전 항목과 함께 문자열이 반환되지만 구체적인 내용은 포함되지 않습니다. 예를 들면 다음과 같습니다.

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36

Unsplash의 세르게이 졸킨 썸네일