이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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

Rowan Merewood

Yoav Weiss

클라이언트 힌트를 사용하면 개발자가 사용자의 또는 사용자 에이전트 (UA)에서 파싱하지 않아도 되는 경우 문자열. 이 대체 경로를 제공하는 것은 결국 사용자 에이전트 문자열 세부사항을 줄입니다.

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

배경

웹브라우저에서 요청할 때 브라우저 및 응답을 맞춤화할 수 있도록 자체 환경을 구성해야 합니다. 이는 1996년 (HTTP/1.0의 경우 RFC 1945)에 정의되었으며 사용자 에이전트 문자열의 원래 정의를 찾습니다. 여기에는 예:

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

이 헤더는 의미 순으로 제품 (예: 댓글 (예: 버전)이 표시됩니다.

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

그 사이에 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

위의 문자열에는 사용자의 운영 체제에 대한 정보와 기기 모델, 브라우저의 브랜드 및 정식 버전 등 정확한 정보를 판단하기에 충분한 모바일 브라우저라고 추론할 수 있고 이전 버전의 브라우저를 사용할 수 있습니다.

가능한 값의 완전한 다양성과 이러한 매개변수의 조합 즉, 사용자 에이전트 문자열이 각 포드의 개별 포드를 허용하는 데 사용자를 고유하게 식별할 수 있습니다

사용자 에이전트 문자열을 사용하면 여러 합법적인 사용 사례를 사용할 수 있습니다. 개발자와 사이트 소유자에게 중요한 용도로 사용됩니다. 하지만 사용자의 서비스 이용에 있어 은밀한 추적 방법으로부터 개인 정보가 보호됩니다. UA 정보를 전송하는 것은 기본적으로 이러한 목표에 부합하지 않습니다.

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

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

사용자 에이전트 클라이언트 힌트 개인 정보를 더욱 안전하게 보호하는 방식으로 동일한 정보에 액세스할 수 있도록 합니다. 브라우저가 결국 사용자 에이전트 문자열의 기본값인 모든 것을 브로드캐스팅합니다. 클라이언트 힌트는 서버에서 브라우저에 클라이언트에 대한 데이터 세트를 요청해야 하는 모델 브라우저가 자체 정책 또는 사용자 구성을 적용하여 반환되는 데이터를 결정합니다. 즉, 페이지의 모든 기본적으로 액세스는 사용자 에이전트 정보에서 명시적으로 감사 가능한 방식으로 작동합니다 또한 개발자는 더 이상 일반적이지 않은 간단한 API의 이점을 누릴 수 있습니다. 살펴보겠습니다.

현재의 클라이언트 힌트는 주로 브라우저의 디스플레이와 연결 기능을 제공합니다 자세한 내용은 클라이언트 힌트로 리소스 선택 자동화, 하지만 이 프로세스에 대해 간단히 복습해 보겠습니다

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

⬇️ 서버의 응답

Accept-CH: Viewport-Width, Width

또는 메타 태그:

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

그러면 브라우저가 다음 헤더를 이후에 다시 보내도록 선택할 수 있습니다. 요청:

💸️ 후속 요청

Viewport-Width: 460
Width: 230

서버는 응답의 변화를 주도록 선택할 수 있습니다. 예를 들어 적절한 해결 방법을 찾을 수 있습니다.

사용자 에이전트 클라이언트 힌트는 Sec-CH-UA 접두사는 Accept-CH 서버 응답 헤더를 통해 지정할 수 있습니다. 모두에게 적용됨 먼저 설명과 전체 제안서를 살펴보세요.

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"
}

데모

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

힌트 수명 및 재설정

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 헤더를 활용하거나 동일한 정보에 액세스 (예: navigator.userAgent, navigator.appVersion, 또는 navigator.platform) 대신 사용자 에이전트 클라이언트 힌트를 사용하세요.

한 단계 더 나아가 사용자 에이전트의 사용 방식을 재검토해야 합니다. 가능한 경우 다른 메서드로 대체할 수 있습니다. 보통 점진적 개선 기능인 인코더-디코더 아키텍처를 또는 반응형 디자인을 가정할 수 있습니다. 사용자 에이전트 데이터를 사용할 때의 기본적인 문제는 항상 검사 중인 속성과 검사 중인 동작 간의 매핑을 유지함 있습니다. 탐지가 제대로 되고 있는지 확인하는 것은 유지보수 오버헤드입니다. 최신 상태로 유지됩니다

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

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

웹상의 은밀한 추적 기능을 최소화하는 것이 기존 사용자 에이전트 문자열에서 노출하는 식별 정보의 양 기존 사이트에 부당한 중단을 일으키지 않아야 합니다. 사용자 에이전트 소개 이제 클라이언트 힌트를 통해 기능이 작동해야 합니다.

결국, 사용자 에이전트 문자열의 정보가 줄어들어 기존 형식은 동일하게 높은 수준의 브라우저와 상당한 버전 정보를 제공합니다. 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

썸네일 제공: Sergey Zolkin 의 스플래시 해제