Googleがユーザーエージェント（UA）文字列を凍結・非推奨するということで、
代替として仕様策定中のUser-Agent Client Hints(UA-CH)を今のうちに試してみます。
User-Agent Client Hints(UA-CH）とは
Google ChromeがUserAgent文字列の非推奨・凍結を計画したことにより、
将来的に、UserAgent文字列から、ブラウザのバージョンなどの情報が正確に取得することが出来なくなってしまう。
代替手段として、User-Agent Client Hintsの機能が検討中であり、Google Chromeでは実験的な機能として試すことができる。
従来のUserAgent文字列と同じようにHTTPリクエストヘッダーやJavascriptを使って情報を取得することが可能です。
User-Agent Client Hints(UA-CH)を有効にする
chrome://flags/ から、Experimental Web Platform featuresを有効にすることで使用できます。Chrome79以降だと使えるみたいです。
Chrome 90以降は標準で対応済みのようです。
Chromeを再起動したあと、適当なページを開いて、Chrome デベロッパーツールを開きます。
Network>Doc>Headersタブを開いてRequest Headersの箇所を見ると、sec-ch-uaの項目が取得されています。
さらに詳しい情報を欲しい場合は、Accept-CHヘッダーを返してあげる必要があります。
またはmetaタグにも対応しているようです。
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width, Downlink">
Webサーバーを用意してAccept-CHヘッダを出力する
Accept-CHヘッダーを返すためのWebサーバーを用意します。
まず、Node.jsをインストールしておきます。
適当なディレクトリ上にExpressサーバーをインストールします。
npm install express
下記の通りAccept-CHヘッダーに「UA, Platform」を出力するように記載します。
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.setHeader('Accept-CH', 'UA, Platform');
// res.setHeader('Accept-CH', 'UA, Platform, Model, Mobile, Arch');
res.send('Hello World!');
});
app.listen(8000, () => {});
サーバーを起動します。
node main.js
これで、http://localhost:8000にアクセスすると、リクエストヘッダーに下記の項目が追加されることが確認できます。
sec-ch-ua: Google Chrome 81.0.4042.0
sec-ch-ua-arch: Intel
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: Mac OS X
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4042.0 Safari/537.36
ただし、１回目のリクエストでは表示されないので、２回目のリクエストもしくは、iframeなどを使ってサブリエクストを行う必要があります。
Javascriptで取得
Javascriptだと Chromeにnavigator.getUserAgent()が用意されているようだ。
実際確認してみたところ、上記では無く、navigator.userAgentDataというのが存在しているようだ。
chrome://flags/ から、Experimental Web Platform featuresを有効にすることで使用できる。
以下のua.mobileの部分は今まで常にfalseだったが、Chrome87だと、Developerツールでモバイル表示設定にするとtrueに切り替わるようになっていた。
const ua = navigator.userAgentData;
console.log(ua.mobile); // false
console.log(ua.brands[0].brand); // Google Chrome
console.log(ua.brands[0].version); // 84
navigator.userAgentData.getHighEntropyValues([
"platform",
"platformVersion",
"architecture",
"model",
"uaFullVersion"
]).then(res => console.log(res));
/*
{ "architecture":"Intel",
"model":"",
"platform":"Mac OS X",
"platformVersion":"10_15_4",
"uaFullVersion":"84.0.4133.0"
}
*/
Chrome以外のChromium系ブラウザの場合
ここでChrome以外のChromium系ブラウザでどうなるか見てみます。
Operaの元CEOによる高機能ブラウザ・Vivaldiが「ユーザーエージェント文字列をChromeに見せかける」ことを余儀なくされた理由とは？
にあるようにUserAgentをChromeと同じに変えたVivaldiですが、Experimental Web Platform featuresを有効にしてsec-ch-uaの値を見てみると・・・
sec-ch-ua: Vivaldi 79
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.131 Safari/537.36
こっちはVivaldiと出ていますね。
UA文字列はChromeと同じですが、sec-ch-uaは独自のものが設定されています。
Chromiumだと、UA文字列はChromeと同じ、sec-ch-uaは独自
sec-ch-ua: Chromium 79
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3914.0 Safari/537.36
Operaだと、UA文字列は独自、sec-ch-uaはChromiumと同じ
sec-ch-ua: Chromium 79
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36 OPR/66.0.3515.44
Microsoft Edgeだと、UA文字列は独自、sec-ch-uaも独自、EdgではなくEdge表示
sec-ch-ua: Microsoft Edge 80
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.66 Safari/537.36 Edg/80.0.361.40
Braveだと、UA文字列はChromeと同じ、sec-ch-uaは独自
sec-ch-ua: Brave Browser 79
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.131 Safari/537.36
という風にUserAgentは変わらなくてもsec-ch-uaだと識別できるようになっているものもありますね
その他
# CocCoc
sec-ch-ua: CocCoc 79
# Yandex
sec-ch-ua: Yandex 80
# SRWare Iron
sec-ch-ua: Chromium 79