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

User-Agent 클라이언트 힌트로 이전

사용자 에이전트 문자열에서 사용자 에이전트 클라이언트 힌트입니다.

Rowan Merewood

사용자 에이전트 문자열이 상당한 패시브 디지털 지문 수집이 표시 경로와 같은 처리하기 어려울 수 있습니다. 그러나 모든 종류의 유효한 사용자 에이전트 데이터를 수집하고 처리해야 하는 이유이므로 더 나은 솔루션으로 나아갈 수 있습니다 사용자 에이전트 클라이언트 힌트는 에서 데이터를 반환하는 사용자 에이전트 데이터 및 메서드가 쉽게 사용할 수 있습니다.

이 도움말에서는 사용자 에이전트 데이터에 대한 액세스를 감사하는 방법을 안내하고 user-agent 문자열 사용을 User-Agent 클라이언트 힌트로 이전합니다.

사용자 에이전트 데이터 수집 및 사용 감사

모든 형태의 데이터 수집과 마찬가지로 데이터를 수집하는 이유를 항상 수집 중입니다. 첫 번째 단계는 가장 중요한 것은 사용자 에이전트 데이터를 사용하는 위치와 이유를 이해하는 것입니다.

사용자 에이전트 데이터가 사용되는지 여부나 사용되는 위치를 알 수 없는 경우 navigator.userAgent 사용을 위한 프런트엔드 코드와 User-Agent HTTP 헤더 사용 또한 프런트엔드 코드도 navigator.platform 및 navigator.appVersion입니다.

기능적인 관점에서 볼 때 현재 코드가 어디에 위치하고 있는지 녹화 또는 처리:

브라우저 이름 또는 버전
운영체제 이름 또는 버전
기기 제조업체 또는 모델
CPU 유형, 아키텍처 또는 비트율 (예: 64비트)

또한 서드 파티 라이브러리나 서비스를 사용하여 user-agent를 처리합니다. 이 경우 다음과 같이 업데이트하고 있는지 확인합니다. 사용자 에이전트 클라이언트 힌트 지원

기본적인 사용자 에이전트 데이터만 사용하고 있습니까?

사용자 에이전트 클라이언트 힌트의 기본 세트에는 다음이 포함됩니다.

Sec-CH-UA: 브라우저 이름 및 주요 버전/주요 버전
Sec-CH-UA-Mobile: 휴대기기를 나타내는 불리언 값입니다.
Sec-CH-UA-Platform: 운영체제 이름 <ph type="x-smartling-placeholder">
- 이 내용은 사양에서 업데이트되었으며 Chrome 다른 Chromium 기반 브라우저도 곧 지원할 예정입니다.

제안된 사용자 에이전트 문자열의 축소된 버전도 이전 버전과 호환되는 방식으로 이 기본 정보를 저장할 수 있습니다 예를 들어 Chrome/90.0.4430.85 문자열에는 Chrome/90.0.0.0가 포함됩니다.

사용자 에이전트 문자열에서 브라우저 이름, 메이저 버전, 사용하는 경우, 코드는 계속 작동하지만 를 참조하세요

User-Agent Client Hints로 이전할 수 있으며 이전해야 하지만 리소스 제약조건으로 인해 발생합니다 정보 감소가 이전 버전과 호환되는 방식으로 user-agent 문자열은 기존 코드는 덜 세부적인 정보를 받지만, 여전히 기본 기능을 유지합니다.

전략: 주문형 클라이언트 측 JavaScript API

현재 navigator.userAgent를 사용 중인 경우 다음으로 전환해야 합니다. 파싱으로 대체하기 전에 navigator.userAgentData를 선호함 user-agent 문자열입니다.

if (navigator.userAgentData) {
  // use new hints
} else {
  // fall back to user-agent string parsing
}

모바일 또는 데스크톱을 확인하는 경우 불리언 mobile 값을 사용합니다.

const isMobile = navigator.userAgentData.mobile;

userAgentData.brands는 brand 및 version가 있는 객체의 배열입니다. 브라우저가 이러한 속성과의 호환성을 나열할 수 있는 속성 있습니다. 배열로 직접 액세스하거나 some() 호출을 사용하여 특정 항목이 있는지 확인합니다.

function isCompatible(item) {
  // In real life you most likely have more complex rules here
  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
}
if (navigator.userAgentData.brands.some(isCompatible)) {
  // browser reports as compatible
}

드림

userAgentData.brands에는 다양한 값이 다양한 순서로 포함되므로 특정 색인에 표시되는 항목에 의존하지 마세요.

더 상세하고 엔트로피가 높은 사용자 에이전트 값 중 하나가 필요한 경우 이를 지정하고 반환된 Promise에서 결과를 확인해야 합니다.

navigator.userAgentData.getHighEntropyValues(['model'])
  .then(ua => {
    // requested hints available as attributes
    const model = ua.model
  });

또한 기존 고객 목록에서 클라이언트 측 처리에서 클라이언트 측 처리로 전환하는 것입니다. JavaScript API는 HTTP 요청 헤더에 대한 액세스를 요구하므로 언제든지 확인할 수 있습니다.

전략: 정적 서버 측 헤더

서버에서 User-Agent 요청 헤더를 사용하고 있고 요구사항이 있는 경우 데이터가 전체 사이트에서 비교적 일관성이 있다는 점을 알고 있다면 원하는 클라이언트 힌트를 응답의 정적 세트로 지정하세요. 이것은 일반적으로 한 가지 방법으로만 구성해야 하므로 볼 수 있습니다 예를 들어 이미 웹 서버 구성에 있을 수 있습니다. 헤더, 호스팅 구성 또는 프레임워크 또는 플랫폼을 사용하는 것이 좋습니다

응답을 변환하거나 맞춤설정하는 경우 이 전략을 고려하세요. 사용자 에이전트 데이터를 기반으로 게재됩니다

브라우저나 다른 클라이언트는 다른 기본 힌트를 제공하도록 선택할 수 있으므로 일반적으로 비록 공급업체에서 제공하더라도 필요한 모든 것을 지정하는 것이 기본값입니다.

예를 들어 Chrome의 현재 기본값은 다음과 같이 표시됩니다.

⬇️ 응답 헤더

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

응답으로 기기 모델을 받으려면 전송:

⬇️ 응답 헤더

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA

드림

서버 측에서 이를 처리할 때는 먼저 Sec-CH-UA 헤더를 전송한 후 User-Agent 헤더로 대체합니다. 파싱합니다.

전략: 교차 출처 요청에 힌트 위임

교차 도메인 또는 사용자 에이전트 클라이언트 힌트가 요청 시 전송되면 권한 정책을 사용하여 원하는 힌트를 명시적으로 지정할 수 있습니다.

예를 들어 https://blog.site이 특정 기기에 최적화된 리소스를 반환할 수 있는 https://cdn.site입니다. https://blog.site에서 Sec-CH-UA-Model 힌트를 요청할 수 있지만 다음을 실행해야 합니다. Permissions-Policy를 사용하여 https://cdn.site에 명시적으로 위임합니다. 헤더를 클릭하세요. 정책에 따라 제어되는 힌트 목록은 클라이언트 힌트에서 확인할 수 있습니다. 인프라 초안

⬇️ 힌트를 위임한 blog.site의 응답

Accept-CH: Sec-CH-UA-Model
Permissions-Policy: ch-ua-model=(self "https://cdn.site")

🏠️ cdn.site의 하위 리소스 요청에 위임된 힌트 포함

Sec-CH-UA-Model: "Pixel 5"

ch-ua 범위뿐만 아니라 여러 출처에 여러 힌트를 지정할 수 있습니다.

⬇️ 여러 힌트를 여러 출처에 위임하는 blog.site의 응답

Accept-CH: Sec-CH-UA-Model, DPR
Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
                    ch-dpr=(self "https://cdn.site" "https://img.site")

드림

위임된 각 힌트를 Accept-CH에 포함할 필요는 없습니다. 하지만 최상위 수준에서 직접 사용하지 않더라도 각 힌트에 self를 포함해야 합니다.

전략: iframe에 힌트 위임

교차 출처 iframe은 교차 출처 리소스와 유사한 방식으로 작동하지만 allow 속성에서 위임할 힌트를 지정합니다.

⬇️ blog.site님의 응답

Accept-CH: Sec-CH-UA-Model

blog.site의 ↪️ HTML

<iframe src="https://widget.site" allow="ch-ua-model"></iframe>

🏠️ widget.site 요청

Sec-CH-UA-Model: "Pixel 5"

iframe의 allow 속성은Accept-CH widget.site가 스스로 전송될 수도 있으므로 iframe'된 사이트에 필요할 수 있습니다.

전략: 동적 서버 측 힌트

사용자 경험에서 더 많은 선택 항목이 필요한 특정 부분이 있는 경우 사이트 전체가 아닌 나머지 부분보다 전체 사이트에서 정적인 것이 아니라 필요에 따라 게재할 수 있습니다 이 방법은 이미 경로별로 다른 헤더를 설정한 경우 있습니다.

여기서 기억해야 할 중요한 점은 Accept-CH의 각 인스턴스는 기존 세트를 덮어쓰게 됩니다. 따라서, 동적으로 헤더를 설정하면 각 페이지에서 필요한 모든 힌트를 요청해야 합니다.

예를 들어 사이트에 제공하고 싶은 하나의 섹션을 사용자의 운영체제와 일치하는 아이콘 및 컨트롤을 포함합니다. 이를 위해 다음을 수행할 수 있습니다. Sec-CH-UA-Platform-Version를 추가로 가져와 적절한 광고를 게재하려는 경우 하위 리소스도 제공합니다

⬇️ /blog 응답 헤더

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

⬇️ /app 응답 헤더

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA

전략: 첫 번째 요청 시 서버 측 힌트 필요

경우에 따라 매우 드물게 발생할 수 있으므로 반드시 이유도 검토했습니다

첫 번째 요청은 실제로 해당 출처에 대한 첫 번째 최상위 요청을 의미합니다. 전송됩니다. 기본 힌트에는 브라우저 플랫폼, 모바일 표시기가 표시됩니다. 그렇다면 질문은 초기 페이지 로드 시 확장 데이터가 필요한가요?

첫 번째 요청에서 추가 힌트를 얻으려면 두 가지 옵션이 있습니다. 먼저, Critical-CH 헤더를 활용합니다. Accept-CH와 같은 형식을 사용합니다. 그러나 첫 번째 요청이 발생하면 즉시 요청을 다시 시도하도록 경보도 중요한 힌트 없이 전송되었습니다.

⁑️ 초기 요청

[With default headers]

⬇️ 응답 헤더

Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model

🔃 브라우저가 추가 헤더를 사용하여 초기 요청을 다시 시도합니다.

[With default headers + …]
Sec-CH-UA-Model: Pixel 5

이로 인해 첫 번째 요청에서 재시도의 오버헤드가 발생하지만 구현 비용이 상대적으로 낮습니다 추가 헤더 및 브라우저 전송 나머지는 자동으로 처리됩니다

모든 Critical-CH 값은 Accept-CH에 있는 값의 하위 집합이어야 합니다. Accept-CH는 페이지에 적용할 모든 값이고 Critical-CH는 반드시 보유해야 하거나 페이지를 제대로 로드할 수 없는 값의 하위 집합입니다.

에 대한 추가 힌트가 정말로 필요한 상황의 경우 클라이언트 힌트 안정성 제안 는 연결 수준 설정에서 힌트를 지정하기 위해 경로를 배치합니다. 이 애플리케이션 레이어 프로토콜 Settings(ALPS) 확장 프로그램을 TLS로 1.3을 지원하여 HTTP/2 및 HTTP/3 연결에 대한 힌트 조기 전달을 사용 설정합니다. 이 아직 초기 단계이지만 자체 TLS와 연결 설정에 기여하기에 이상적인 시기입니다.

전략: 기존 지원

사이트에 다음과 같은 기존 코드 또는 서드 파티 코드가 있을 수 있습니다. navigator.userAgent: 감소합니다. 장기적으로 이에 상응하는 서비스로 이전해야 합니다. navigator.userAgentData가 호출되지만 임시 솔루션이 있습니다.

UA-CH 재구성은 navigator.userAgent를 새 문자열로 덮어쓸 수 있는 라이브러리 요청된 navigator.userAgentData 값에서 빌드됩니다.

예를 들어 이 코드는 'model'이 포함 힌트:

import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
  .then(() => { console.log(navigator.userAgent); });

결과 문자열은 Pixel 5 모델을 표시하지만 여전히 축소된 92.0.0.0 uaFullVersion 힌트가 요청되지 않음:

Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36

추가 지원

이러한 전략으로 사용 사례를 해결할 수 없는 경우 privacy-sandbox-dev-support 저장소 함께 문제를 살펴볼 수 있습니다

사진 제공: Ricardo 로차 Unsplash 제공