userAgent文字列の削減内容とuserAgentDataの使い方
はじめに
この記事では、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