この記事は次を目標としています。
- UAとUA-CHの概要について知っている
- UAとUA-CHの確認と変更ができる
User-Agent（UA）の概要
UAとは？
- HTTPクライアントがサーバーにリクエストを送る際に、UAを送信している
- UAでリクエストに使用したブラウザ（バージョン）、OS（バージョン）、モバイル端末かなどの情報が送信されている
- サーバーは受け取ったUA文字列の情報を元に様々な処理を実装できる。
例 PC用とSP用でサイトの表示を変えるなど - UAは偽装できる。
User-Agent - HTTP | MDN
User-Agent リクエストヘッダーは、サーバーやネットワークピアがアプリケーション、オペレーティングシステム、ベンダーや、リクエストしているユーザーエージェントのバージョン等を識別できるようにする特性文字列です。
developer.mozilla.org
UAスニッフィングと偽装の歴史
ChromeのUA文字列にChromeとは関係ない文字列（safariなど）があるのは疑問に思うかもしれないが、ブラウザ戦争の影響で他のブラウザなどの文字列がある。
世界中を巻き込んだブラウザ戦争と「ユーザーエージェント文字列」をめぐる複雑怪奇な変遷とは？
ユーザーエージェントとは、ユーザーの代理としてプロトコルに基づいて通信を行い、結果を通知する機能を持ったソフトウェアのことで、一般的にはウェブブラウザのことを指します。ウェブブラウザは1990年代初頭から激しい競争が開始し、ブラウザを識別するユーザーエージェント文字列の名称も大きな変遷を遂げてきました。
gigazine.net
UAの確認方法
次の確認方法がある
- 確認くんなどのサイトで確認する
- ブラウザの開発ツールのネットワークを開きリクエストヘッダーから確認する
- ブラウザの開発ツールのコンソールからjavascriptで確認する
navigator.userAgent
UserAgentからOS/ブラウザなどの調べかたのまとめ - Qiita
WEBサイトにアクセスしてくる利用者の情報をUserAgentから調べることが出来るが、どんな情報がわかるか調べてみた。より詳しい情報は参考に使ったサイトを参照で。はじめにGoogleがChro…
qiita.com
UAの変更方法
大体はブラウザの開発ツールからUAを変更できる。Curlなどを使用する場合もリクエストヘッダーでUAを任意に指定して送信できる。
Google ChromeでUserAgentを変更する - Qiita
この記事についてGoogle Chromeに備わった機能を使ってUserAgentを偽装する方法を2種類紹介します。特定のOSだったら○○する、特定の機種だったら☓☓するといった処理の動作確認に…
qiita.com
UA判定処理実装時の注意点
UA文字列で判定する実装はできるだけ避けなければならない
ユーザーエージェント文字列を用いたブラウザーの判定 - HTTP | MDN
ブラウザーによって異なるウェブページまたはサービスを提供するのは、ふつうは良いことではありません。ウェブは使用しているブラウザーや機器に関係なく、誰からでもアクセスできるものです。ウェブサイトを開発する方法として、特定のブラウザーを対象にするのではなく、機能が利用できるかどうかに基づいたプログレッシブエンハンスメントに...
developer.mozilla.org
User-Agent Client Hints(UA-CH)の概要
UA-CHとは？
- Chromeで提供される機能。今後UAを停止・凍結しUA-CHを使うようになる方針
- UA文字列は個人情報特定の判断材料になる可能性があるなどの理由からUA-CHを代替として使用する機能を提供する
- UA-CHではリクエストヘッダーの
sec-ch-uaにブラウザの情報が送信される。更に情報が欲しい場合はサーバーがAccept-CHヘッダーに欲しい情報を指定して返す。
経緯や仕様の概要は以下のリンク
Improving user privacy and developer experience with User-Agent Client Hints | Privacy & Security | Chrome for Developers
developer.chrome.com
User-Agent Client Hints
wicg.github.io
Client Hints の最新情報を追ってみた - Tech Inside Drecom
これはドリコム Advent Calendar 2021の18日目です。 17日目はハヤブサさんの闇の錬金術~Elixirよもやま話~です。 はじめに こんにちは、enza サーバーサイドエンジニアの小林です。 新卒2年…
tech.drecom.co.jp
Accept-CHヘッダーで指定できる情報
CPUアーキテクチャ、OS、モバイルデバイスなどの情報を指定して取得できる
HTTP クライアントヒント - HTTP | MDN
クライアントヒント (Client hints) は、サーバーがクライアントに積極的にリクエストすることで、端末、ネットワーク、ユーザー、およびユーザーエージェント固有の環境設定に関する情報を取得することができる HTTP リクエストヘッダー フィールド群です。
サーバーは、クライアントが提供することを選んだ情報に...
developer.mozilla.org
UA-CHの確認方法
次の確認方法がある
- ブラウザの開発ツールのネットワークを開きリクエストヘッダーから確認する
- ブラウザの開発ツールのコンソールからjavascriptで確認する
navigator.userAgentData
ユーザーエージェントクライアントヒント API - Web API | MDN
ユーザーエージェントクライアントヒント API (User-Agent Client Hints API) は、クライアントヒントを拡張し、 User-Agent レスポンスおよびリクエストヘッダー、および JavaScript API によってブラウザーとプラットフォーム情報を公開する方法を提供します。
developer.mozilla.org
User-Agent Client Hints(UA-CH)を取得する - Qiita
Googleがユーザーエージェント（UA）文字列を凍結・非推奨するということで、代替として仕様策定中のUser-Agent Client Hints(UA-CH)を今のうちに試してみます。Use…
qiita.com
UA-CHの変更方法
UAの変更方法と同じでChromeの開発ツールの「More Tools」 > 「Network conditions」からUA-CHの指定も変更できる
まとめ
UAの概要を理解し変更方法を知っておくとUAを判定してPCとSPの表示を切り替えるようなサイトを作成した場合にPCから簡単にSP用の表示をテストできるため便利です
