User-Agent Client Hints는 Client Hints API의 새로운 확장으로, 개발자가 개인 정보를 보호하고 인체공학적인 방식으로 사용자의 브라우저에 대한 정보에 액세스할 수 있도록 지원합니다.
클라이언트 힌트를 사용하면 개발자가 User-Agent (UA) 문자열에서 파싱할 필요 없이 사용자의 기기 또는 조건에 관한 정보를 적극적으로 요청할 수 있습니다. 이 대체 경로를 제공하는 것이 결국 User-Agent 문자열 세부사항을 줄이는 첫 번째 단계입니다.
User-Agent 문자열 파싱을 사용하는 기존 기능을 업데이트하여 대신 User-Agent 클라이언트 힌트를 사용하는 방법을 알아보세요.
배경
웹브라우저가 요청을 할 때 서버가 분석을 사용 설정하고 응답을 맞춤설정할 수 있도록 브라우저 및 환경에 관한 정보를 포함합니다. 이는 1996년에 계속 정의되었습니다 (HTTP/1.0의 경우 RFC 1945). 여기에서 사용자 에이전트 문자열의 원래 정의를 확인할 수 있으며 다음 예는 다음과 같습니다.
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
이 헤더는 제품 (예: 브라우저 또는 라이브러리)과 주석 (예: 버전)을 중요도 순으로 지정하기 위한 것입니다.
User-Agent 문자열의 상태
그 사이에 10년 동안 이 문자열에는 요청을 보낸 클라이언트에 관한 다양한 추가 세부정보가 누적되었습니다 (이전 버전과의 호환성으로 인해 쓸데없는 정보도 축적되었습니다). Chrome의 현재 User-Agent 문자열을 보면 다음과 같습니다.
Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
위 문자열에는 사용자의 운영체제 및 버전, 기기 모델, 브라우저의 브랜드 및 정식 버전에 대한 정보, 모바일 브라우저임을 추론하기에 충분한 단서가 포함되어 있으며 기록상의 이유로 다른 브라우저에 대한 참조의 횟수는 언급하지 않습니다.
이러한 매개변수와 가능한 값의 완전한 다양성을 조합하면 사용자 에이전트 문자열에 개별 사용자를 고유하게 식별하기에 충분한 정보가 포함될 수 있습니다.
User-Agent 문자열은 많은 합법적인 사용 사례를 지원하며 개발자와 사이트 소유자에게 중요한 역할을 합니다. 하지만 은밀한 추적 방법으로부터 사용자의 개인 정보를 보호하는 것도 중요합니다. 기본적으로 UA 정보를 전송하는 것은 이 목표에 위배됩니다.
또한 사용자-에이전트 문자열의 경우 웹 호환성을 개선해야 합니다. 비정형이므로 파싱하면 불필요하게 복잡해지며, 이는 종종 사용자에게 피해를 주는 버그 및 사이트 호환성 문제의 원인이 됩니다. 이러한 문제는 사이트에서 구성을 테스트하지 못했을 수 있으므로 덜 일반적인 브라우저 사용자에게도 불균형적으로 영향을 미칩니다.
새로운 사용자 에이전트 클라이언트 힌트 소개
사용자 에이전트 클라이언트 힌트를 사용하면 동일한 정보에 더 개인 정보 보호 방식으로 액세스할 수 있으므로 브라우저에서 모든 항목을 브로드캐스트하는 사용자 에이전트 문자열의 기본값을 줄일 수 있습니다. 클라이언트 힌트는 서버가 브라우저에 클라이언트에 관한 데이터 집합(힌트)을 요청해야 하고 브라우저가 자체 정책 또는 사용자 구성을 적용하여 반환되는 데이터를 결정하는 모델을 적용합니다. 즉, 기본적으로 사용자 에이전트 정보를 모두 노출하는 대신 이제 액세스가 명시적이고 감사 가능한 방식으로 관리됩니다. 또한 개발자는 더 간단한 API를 활용할 수 있습니다. 더 이상 정규 표현식을 사용할 필요가 없습니다.
현재의 클라이언트 힌트에서는 주로 브라우저의 표시 및 연결 기능을 설명합니다. 클라이언트 힌트를 사용한 리소스 선택 자동화에서 세부정보를 살펴볼 수 있지만, 여기에서는 이 프로세스에 대해 간단히 알아봅니다.
서버는 헤더를 통해 특정 클라이언트 힌트를 요청합니다.
⬇️ 서버의 응답
Accept-CH: Viewport-Width, Width
또는 메타 태그:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
그러면 브라우저가 다음 헤더를 후속 요청에서 다시 전송하도록 선택할 수 있습니다.
🏠️ 후속 요청
Viewport-Width: 460
Width: 230
서버에서는 예를 들어 적절한 해상도로 이미지를 제공하는 등 응답을 다양하게 선택할 수 있습니다.
User-Agent 클라이언트 힌트는 Accept-CH 서버 응답 헤더를 통해 지정할 수 있는 Sec-CH-UA 접두사로 속성 범위를 확장합니다. 자세한 내용은 설명을 먼저 읽은 후 전체 제안서를 살펴보세요.
Chromium 89의 User-Agent 클라이언트 힌트
사용자 에이전트 클라이언트 힌트는 버전 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"
User-Agent 응답 및 요청 헤더
⬇️ 응답 Accept-CH⬆️ 요청 헤더 |
⬆️ 요청 예시 값 |
설명 |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
브라우저 브랜드 및 주요 버전 목록 |
Sec-CH-UA-Mobile |
?1 |
브라우저가 휴대기기에 있는지(true의 경우 ?1) 아닌지(false의 경우 ?0)를 나타내는 불리언입니다. |
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
사용자 에이전트 클라이언트 힌트는 어디에서 사용해야 하나요?
간단히 말해 User-Agent 헤더를 파싱하거나 동일한 정보에 액세스하는 JavaScript 호출(예: navigator.userAgent, navigator.appVersion 또는 navigator.platform)을 사용하는 인스턴스를 리팩터링하여 대신 User-Agent 클라이언트 힌트를 사용해야 합니다.
한 단계 더 나아가 User-Agent 정보 사용을 재검토하고 가능하면 다른 메서드로 대체해야 합니다. 종종 점진적 개선, 기능 감지 또는 반응형 디자인을 사용하여 동일한 목표를 달성할 수 있습니다. User-Agent 데이터를 사용하는 기본적인 문제는 검사하는 속성과 이를 사용 설정하는 동작 간에 항상 매핑을 유지한다는 점입니다. 이는 탐지가 포괄적이고 최신 상태를 유지하기 위한 유지보수 오버헤드입니다.
이러한 주의 사항을 고려하여 User-Agent Client Hints 저장소에는 사이트의 유효한 사용 사례가 나열되어 있습니다.
User-Agent 문자열은 어떻게 되나요?
기존 사이트에 과도한 지장을 주지 않으면서 기존 사용자 에이전트 문자열에서 노출되는 식별 정보의 양을 줄여 웹에서의 은밀한 추적 기능을 최소화하는 것이 목표입니다. 이제 사용자 에이전트 클라이언트 힌트를 도입하면 사용자 에이전트 문자열을 변경하기 전에 새로운 기능을 이해하고 실험해 볼 수 있습니다.
궁극적으로 User-Agent 문자열의 정보가 줄어들어 기존 형식을 유지하면서 기본 힌트에 따라 동일한 상위 브라우저 및 중요한 버전 정보만 제공하게 됩니다. 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