ユーザーエージェントとは。文字列の確認方法や利用方法、固定化される件
ユーザーエージェントとは、WEBサーバーへのリクエストの際に明かす自身側の端末情報を示す文字列の事です。
文字列にはOSやブラウザなどの閲覧側のプライバシー情報が明記されています。
ユーザーエージェント情報は簡単に偽装できるので、固定化・凍結される方針です。
ユーザーエージェントとは
ユーザーエージェントとは、WEBサイトサーバーにアクセスした時に伝える「こちら側の情報」のことです。
PCやスマホでWEBサイトを表示する場合、サーバーへ情報を取得しにいきますよね。
この時サーバーに対して「受け取り側は誰なのか」を開示しなければなりません。
閲覧をする側の身分を文字列で明かす
例えば相手に電話を掛ける時、普通はまず自分の氏名を相手に名乗りますよね。あれと同じです。
これがユーザーエージェントと呼ばれるもので、以下の様な文字列で表現されています。
ユーザーエージェント例
mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/87.0.9999.233 safari/537.36 edg/87.0.9999.233
上記ユーザーエージェントは、Windows10の新Edgeブラウザで開いた場合の例です。
この様にMACやWindows10などのOSの種類やブラウザ名、スマホならiPhoneだったりと、自分側の端末情報が記載されます。
OSやブラウザだけでなく、一定の仕様に基いたHTMLの表示エンジンやその他のコンポーネント情報が含まれます。
この様な文字列情報を、毎回WEBサーバー側に提供している訳ですね。
ユーザーエージェントの主な使い方
サーバーはブラウザが持参してきたこの文字列に応じて、異なるアクションを起こす事ができます。
例えばブラウザごとに違うページを返したり、OSごとに異なるリンクを表示するなどです。
ユーザーエージェントによる条件分岐
一番の用途としては「PC端末とスマホ端末の判別」でしょう。
PCなら「mac」「windows」、スマホなら「iPhone」という文字がユーザーエージェントに明記されるからです。
例えばユーザーがスマートフォンからアクセスしているのであれば、スマホ向けページを表示する事ができます。
iPadからアクセスしていれば、iPad向けのレイアウトページを表示できる訳ですね。
ユーザーエージェントによる表示分けコード例
今はあまり使いませんが、以前は以下の様なコードをHTMLソース上部に入れて条件分岐させていました。
<script type="text/javascript"> if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { location.href = 'スマホ専用URL'; } </script>
上記の場合ユーザーがiPhoneやAndoroidの端末であれば、スマホ専用ページへ飛ばします。
そうでなければ通常通りPC用のページを表示させるという条件分岐です。
この様にユーザーエージェントは、ユーザーに最適な情報を表示するために重要な役割を果たしているのですね。
ユーザーエージェントを調べる方法
自分が使うブラウザがWEBサーバーに送信するユーザーエージェント文字列を、自分で確認する事ができます。
ユーザーエージェント文字列を表示させる方法
どこでもいいのでWEBページを開いて、F12を押して管理者ツール（Developer Tools）を開きましょう。
「console」のパネルを開いて、カーソル欄に「const ua = navigator.userAgent;」と入れます。
const ua = navigator.userAgent;
その下に続けて「ua」と入力し、Enterを押しましょう。
そうすると、ユーザーエージェントの文字列が表示されます。
文字列の下にカーソルが来るまで、何回かEnterを押す場合があります。
HTMLページに表示させる方法
下記の様にHTMLソースを記載し、そのページを開くとWEBページ上に文字列が表示されます。
HTMLソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>UserAgent</title> </head> <body> <span id="userAgent"></span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function () { var userAgent = window.navigator.userAgent.toLowerCase(); $('span#userAgent').text(userAgent); }); </script> </body> </html>
WEBページ表示例
WEBページに表示されたユーザーエージェント
検索ロボットにもユーザーエージェントがある
WEBサイトサーバーを閲覧しにいくのは何もユーザーだけではありません。
SEOの検索順位を判定するGoogle（Yahoo・Bing）などの検索クローラーも、同じ様にサーバーを訪れます。
クロールの際はきちんと自分の身分を明かして、各WEBサイトを巡回する訳です。
Googleがユーザーエージェント文字列を変更
Googleは2019年12月に、Googleのユーザーエージェント文字列を変更しました。
実行している「Chromeのバージョン」を明記するようにしたのです。
GoogleBotがWEBサイトをクロールする際は、使用しているChromeのその時点のバージョンが表示されます。
変更前
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Safari/537.36
変更後
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Chrome/76.0.3809.100 Safari/537.36
変更後は、Chrome/76.0.3809.100バージョンが表示されているのがわかります。
ユーザーエージェントとビューポート
今レスポンシブルサイトを構築する時によく使われるのが、CSSのメディアクエリです。
これはユーザーの端末が「PC」か「スマホ」かを、ユーザーエージェントで判別するのではありません。
ビューポート、つまり「表示画面の幅」で判別しているのです。
端末の名前ではなく画面幅
例えば表示させる画面の幅が「スマホ枠」だった場合、スマホ専用のCSSレイアウトで上書きして反映させます。
こうする事でHTMLページがスマホ向けのレイアウトに変わります。
メディアクエリによりスマホ以外の端末も複数設定する事ができるため、1つのHTMLページで複数の画面幅に対応できるメリットがあります。
1つのHTMLページで対応できる
ユーザーエージェントを判別して個別のページを見せる場合、PC用とスマホ用とでそれぞれ別々にページを用意しなければなりません。
複数の端末に対応させるとなると、それこそ管理が大変になりますよね。
それに対しCSSのメディアクエリ（ビューポートの判定）であれば、複数のページを用意しなくて済む訳です。
ユーザーエージェントは偽装できる
昨今のWEB制作の主流は、今述べた通り確かにCSSメディアクエリによるレスポンシブデザイン制作です。
あまり採用されない原因の一つに、ユーザーエージェント文字列自体が簡単に偽装できる事が挙げられます。
文字列を偽装する事で、自分の身分を偽る事が容易にできてしまう訳です。
PC環境で「自分はスマホだ」と偽装する
この利用用途は実際に根強くあり、一番の例が管理者ツールによるスマホ版ページの確認で使われます。
例えばWindowsPCでスマホページを見る場合、GoogleChromeの開発者ツールでスマホになりすまして確認しますよね。
これは一般的な方法であり、偽装しても問題なく確認できます。
スマホ画面の確認方法
先ほど同様にどこかのWEBページを開いて、F12で管理者ツールを開きます。
上記のアイコンを押して一度ページを更新すると、左側にスマホ用プレビューが表示されます。
この状態でユーザーエージェント文字列を確認してみましょう。
コンソールでユーザーエージェントを確認する
先ほど同様にツールの「Console」を開き、「const ua = navigator.userAgent;」と入れます。
既に一度設定済みであれば、Uncaught SyntaxError: Identifier 'ua' has already been declaredと、ガイダンスが出る場合があります。
下に続けて「ua」と入力し、Enterを押して実行してみましょう。
Mozilla/5.0 (Linux; Android 6.0.1; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.9999.233 Mobile Safari/537.36 Edg/87.0.9999.233
文字列内の表示端末が「Android」になっている事がわかります。
本来はPCブラウザなのですが、管理者ツールでユーザーエージェントを「スマホ端末」に書き換えている事例です。
この様に簡単な設定で自分の端末を偽装する事が可能なのです。
ユーザーエージェントが固定化される
W3CのコミュニティグループであるWICG（Web Platform Incubator Community Group）が、ユーザーエージェントの固定化・凍結を進めています。
理由としてはまず、ユーザーエージェント文字列にブラウザ名を表記する・しないでシェア争いが起きる事。
それからユーザーのプライバシーが守られていない事、などが懸念されています。
こういった問題の解決のため、公開情報を限定する方針なのですね。
2021年Google Chromeが実施予定
2021年にGoogle Chromeで、本格的にユーザーエージェント文字列の固定化が実施される予定です。
FirefoxやSafariなどのブラウザもGoogle Chromeに追従していく予定になっています。
これが実装されると、ユーザーエージェントを偽装・書き換える事ができなくなりますね。
これに対する救済案が、以下でご紹介するUA-CHです。
新しいユーザーエージェント判別方法：User-Agent Client Hints
User-Agent Client Hints（以下：UA-CH）は、WICGによって提案されている仕様です。
UA-CHはJavaScript APIとして公開されていて「navigator.userAgentData」オブジェクトでデータを参照できるようになります。
Google ChromeによるUA-CHデータ参照の方法
今のままではこのUA-CHを利用する事ができませんので、まずは設定を開放する必要があります。
まずは、Chromeのアドレスバーに「chrome://flags/」と入力しましょう。
開いたページの中で「Experimental Web Platform features」を探して、「Enabled」に変更します。
これで「navigator.userAgentData」オブジェクトが実行できる様になりました。
コンソールでの実行
const ua = navigator.userAgentData;
先ほどと同様「console」パネルで今度は上記のコードを実行し、あらためて「ua」と入れてEnterを押しましょう。
すると「NavigatorUAData」というデータ情報が返ってきます。
表示されたデータは階層型に収納されていて、三角マークを押すと様々な情報が格納されています。
紹介する「NavigatorUAData」データは現時点のものであり、正式リリース時に仕様が変わる場合があります。
UA-CHの表示項目について
NavigatorUADataを一部展開した状態
・brands…ブラウザーの種類・バージョン情報が格納された配列
・mobile…モバイル端末で閲覧しているかどうか？
brands配列の中には、3つのオブジェクトが格納されています。
その下にあるmobileがtrueになっています。これは開いているWEBページがスマホ版ページであるためです。
UA-CHの特徴・メリット
UA-CHの特徴
・brand情報はランダムに並べ替えられる
・要求が無い限りリクエスト側の情報を制限する
・ユーザーエージェント・スニッフィングを避けるため、ダミーの値を格納する
brand情報はランダムで並べ替えされる様になっており、項目の場所指定がされにくくなっています。
さらにサーバー側がAccept-CHというヘッダーを付与して情報を要求しない限り、リクエスト側が送る情報を制限します。
UA-CHではユーザーエージェント・スニッフィングがされないように、ダミー値が入ります。
ユーザーエージェント・スニッフィングとは
ユーザーエージェントに明記される文字列を利用すれば、WEBサイトの管理者が許可したブラウザのみが訪問できる様に制限できます。
この仕組みをユーザーエージェント・スニッフィングと呼びます。
ブラウザ制限による独占が起きる
例えば文字列に「Google Chrome」とあるユーザーエージェントのみに限定されると、そのページはGoogle Chromeでしか見れない訳です。
こういったサイトが増えるとGoogle Chromeに有利になります。これでは公平なシェア争いができませんよね。
これを防止する措置がUA-CHには導入されています。
UA-CHのメリット
UA-CHにより提供される情報が制限されるため、プライバシーの強化が図れます。
さらにひとつの文字列としてではなく、情報が細分化されオブジェクトがプロパティ化して返却されます。
非常に細分化されている事が管理者ツール上の表記でもわかると思います。
管理者側としても、必要な情報だけをスマートに取得できるようになるメリットがあります。
まとめ：固定化が実施されたら
以上ユーザーエージェントについてご紹介しました。
ユーザーエージェント文字列が固定化されると、既存システムに対して対応が必要な場合も出てきます。
ユーザーエージェントでの処理分岐が実装されているのであれば、路線変更が必要になりますね。
UA-CHの様に、ブラウザが使用したい機能のAPIをサポートしているかどうかで判別するよう改変するべきです。
