Zenn
🐕

userAgent文字列の削減内容とuserAgentDataの使い方

2023/09/03に公開
JavaScript
TypeScript
#
ユーザーエージェント
#
useragent
#
useragentdata
tech

はじめに

この記事では、navigator.userAgentを使用してユーザーエージェント情報を取得した際に、異なるバージョンが表示される現象について説明します。
最終的に、この現象はユーザーエージェント文字列の削減によるもので、これが仕様であることが判明しました。

ユーザーエージェントとは

ユーザーエージェントは、Webページを閲覧する際に送信される情報の一部です。この情報には、モバイルデバイスの機種、OSの名前、バージョン、ブラウザの名前、バージョンなどが含まれます。

以下は実際のユーザーエージェント文字列の例です。

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

引用: User-Agent#chrome_の_ua_文字列

ユーザーエージェント情報を確認するには、ブラウザの開発者ツールのコンソールでnavigator.userAgentを入力することで、自分のデバイスから送信されるユーザーエージェント情報を表示できます。もし正確な情報が取得できない場合、この記事で説明するユーザーエージェントの削減により、情報が制限されて固定値になっている可能性があります。詳細な削減内容については、こちらのサイトをご参照ください。

userAgentの削減内容の例

一部のユーザーエージェントの削減内容を紹介します。例として、2022年5月と2023年5月のAndroidかつChromeのユーザーエージェント文字列を比較します。

2022年5月のAndroid, Chromeの例:

Mozilla/5.0 (Linux; Android <androidVersion>; <deviceModel>) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/<majorVersion>.<minorVersion> <deviceCompat> Safari/537.36

2023年5月のAndroid, Chromeの例:

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/<majorVersion>.0.0.0 <deviceCompat> Safari/537.36

Androidについて、androidVersionとdeviceModelが「10」,「K」と固定になりました。
またChromeのバージョンについて、minorVersionが0.0.0と固定されてmajorVersionしか表示されなくなりました。
これは一例であり、詳細な削減内容はこちらで確認できます。

経緯

このユーザーエージェント文字列の削減は、ブラウザ間の競争とユーザーのプライバシー保護の問題に対処するために実施されました。W3CのコミュニティグループであるWICG（Web Platform Incubator Community Group）は、ユーザーエージェント文字列を固定化・凍結させ、情報を制限化する方針を採用しています。詳細についてはこちらの記事をご覧ください。

Google Chromeは2023年5月までにユーザーエージェント文字列の削減を実施しました。この削減計画のスケジュールはこちらで確認できます。

今後のユーザーエージェントの取得方法

userAgentの代わりに、新しくNavigatorUADataが導入されました。これにより、ユーザーエージェントクライアントヒント APIにアクセスできます。

新しいNavigatorUADataの情報は、navigator.userAgentDataを使用して取得できますが、情報量は限られています。
詳細な情報を取得するには、以下のgetHighEntropyValuesメソッドを使用します。

navigator.userAgentData
  .getHighEntropyValues([
    "architecture",
    "model",
    "platformVersion",
    "fullVersionList",
  ])
  .then((values) => console.log(values));

TypeScriptでのuserAgentDataの取得方法

TypeScriptを使用する場合、標準でuserAgentData型が提供されていないため、user-agent-data-typesというライブラリを使用することで対応できます。
具体的な使用方法については、Usageを参照し、トリプルスラッシュ・ディレクティブのコメントを忘れずに追加し、パッケージの依存関係を宣言します。
/// <reference types="user-agent-data-types" />

おわりに

この記事では、ユーザーエージェントの削減について簡単に説明しました。
もし誤りがあれば、どんどんご指摘いただけると助かります。

Discussion