User-Agent Client Hints API によるユーザーのプライバシーとデベロッパー エクスペリエンスの向上

User-Agent Client Hints は、Client Hints API の新しい拡張です。デベロッパーは、プライバシーを保護し、人間工学に基づいた方法でユーザーのブラウザに関する情報にアクセスできます。

Rowan Merewood
Yoav Weiss
Yoav Weiss
X GitHub

Client Hints を使用すると、デベロッパーはユーザーのリクエストに関する情報を積極的に ユーザーのエージェント（UA）から解析する必要はなく、 使用します。この代替ルートを提供することが、最終的に User-Agent 文字列の粒度を下げます

アプリケーションの解析に依存する既存の機能を更新する方法について 代わりに User-Agent Client Hints を使用する User-Agent 文字列。

背景

ウェブブラウザがリクエストを送信すると、ブラウザに関する情報と、 サーバーが分析を有効にし、レスポンスをカスタマイズできるようにします。 これは 1996 年（HTTP/1.0 の RFC 1945）に定義され、 User-Agent 文字列の元の定義を検索します。これには 例:

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

このヘッダーは、重要度の高い順に商品（例: （例: バージョン）。

ユーザー エージェント文字列の状態

それから 10 年の間に、この文字列はさまざまな増加をもたらしました。 リクエストを行ったクライアントの詳細（また、後戻り の互換性）が含まれます。Chrome の現在のユーザーエージェントを見ると string:

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 文字列に、個々の ID やユーザーの IP アドレス 一意に識別できます。

User-Agent 文字列によって、多くの正当なユースケースが可能になります。 デベロッパーとサイト所有者にとって重要な役割を果たします。ただし、 また、ユーザーのアプリケーションが隠れたトラッキング手法から保護されている。 UA の情報を送信すると目標に反します

また、User-Agent に関するウェブの互換性を改善する必要もあります。 使用します。構造化されていないため、解析すると不必要に複雑になります。 これがバグやサイトの互換性の問題を引き起こし、ユーザーに害を及ぼすことがよくあります。 また、これらの問題は、あまり一般的でないブラウザのユーザーに大きな損害を与えます。 サイトの構成に対するテストに失敗した可能性があります。

新しい User-Agent Client Hints の概要

User-Agent Client Hints API 同じ情報へのアクセスを、よりプライバシーに配慮した方法で ブラウザを有効にすることで、最終的に User-Agent 文字列のデフォルト すべてをブロードキャストしています。Client Hints は、 このモデルでは、サーバーがブラウザにクライアントに関するデータのセットを要求する必要があります。 ブラウザは独自のポリシーまたはユーザー設定を 返すデータを決定できますつまり、 ユーザー エージェント情報をデフォルトで保持していますが、アクセスは明示的な 提供します。デベロッパーは、標準の API ではなく、よりシンプルな API のメリットを享受できます。 表します。

現在の Client Hints の使用は、主にブラウザの表示に関するものであり、 接続機能を提供します。詳細については、Client Hints を使用したリソース選択の自動化をご覧ください。 そのプロセスを簡単におさらいします

サーバーはヘッダーを介して特定の Client Hints を要求します。

⬇️ サーバーからのレスポンス

Accept-CH: Viewport-Width, Width

メタタグ:

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

その後、次のヘッダーを後続の リクエスト:

😝?️ その後のリクエスト

Viewport-Width: 460
Width: 230

サーバーはレスポンスをさまざまに変えることができます。たとえば、 決定します。

User-Agent Client Hints API は、Sec-CH-UA でプロパティの範囲を拡大します。 Accept-CH サーバー レスポンス ヘッダーで指定できる接頭辞。すべての役職向け まず説明と 提案書全体をご覧ください

Chromium の User-Agent Client Hints API 89

Chrome バージョン 89 以降では、User-Agent Client Hints がデフォルトで有効になっています。

デフォルトでは、ブラウザのブランド、メジャー バージョン、メジャー バージョン、 クライアントがモバイル デバイスかどうかを示すインジケーターが表示されます。

⚈️ すべてのリクエスト

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
descriptions️ リクエスト ヘッダー		 😝?️ リクエスト
値の例		 説明
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 で以下を使用して User-Agent にアクセスすることもできます。 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"
}

デモ

次の URL からご自分のデバイスでヘッダーと 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" …> タグ。リクエストされたヒントは、 後続のナビゲーションではなく、ページによって開始されたリクエスト。

ヒントの範囲とクロスオリジン リクエスト

デフォルトでは、Client Hints は同一オリジンのリクエストでのみ送信されます。つまり https://example.com に関する具体的なヒントを求めると、 https://downloads.example.comで最適化したいと考えている顧客が導入しない ヒントを受け取れません。

クロスオリジン リクエストでヒントを許可するには、各ヒントとオリジンを指定する必要があります。 Permissions-Policy ヘッダーで指定。User-Agent Client Hints API に適用するには、次の操作を行います。 ヒントを小文字にし、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 Client Hints の使用場所

答えは、解析するインスタンスをリファクタリングする必要があるということです。 JavaScript 呼び出しを使用して、カスタム ユーザー エージェントを 同じ情報（navigator.userAgent、navigator.appVersion、 または navigator.platform）を指定し、代わりに User-Agent Client Hints を使用します。

さらに一歩進んで、User-Agent の使用方法を再確認する必要があります。 可能な限り他のメソッドに置き換えることをおすすめします。多くの場合、 同じ目標を達成するために、段階的な機能強化、 導入することもできます。 User-Agent データを利用する際の基本的な問題は、ユーザー エージェントを 検査対象のプロパティとその動作の間のマッピングを できます。検出が確実に再試行されるようにするためのメンテナンスのオーバーヘッドです。 最新の状態に保たれます。

これらの注意事項を念頭に置いて、User-Agent Client Hints リポジトリでサイトの有効なユースケースをいくつか紹介しています。

User-Agent 文字列はどうなりますか？

そこで、ウェブでの隠れたトラッキングを最小限に抑制する計画として、 既存のユーザーエージェント文字列によって公開される識別情報の量 既存のサイトに過度の混乱を引き起こすことがありませんUser-Agent の概要 Client Hints API では、新しい ユーザー エージェント文字列に変更が加えられる前に、この関数を呼び出します。

最終的に ユーザーエージェント文字列の情報は削減されるため、 従来のデータ形式に加え、高水準のブラウザのみを提供し、 バージョン情報が提供されます。Chromium では、この変更は 少なくとも 2022 年まで延期し、エコシステムが User Agent Client Hints の新機能を評価してください。

この機能のバージョンをテストするには、 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 によるサムネイル オン スプラッシュを解除