Help us understand the problem. What is going on with this article?

User-Agent Client Hints(UA-CH)を取得する

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以降だと使えるみたいです。

ChromeFlags.png

Chromeを再起動したあと、適当なページを開いて、Chrome デベロッパーツールを開きます。
Network>Doc>Headersタブを開いてRequest Headersの箇所を見ると、sec-ch-uaの項目が取得されています。

devtool.png

さらに詳しい情報を欲しい場合は、Accept-CHヘッダーを返してあげる必要があるらしいが、とりあえずここまで。

Webサーバーを用意してAccept-CHヘッダを出力する

Accept-CHヘッダーを返すためのWebサーバーを用意します。

まず、Node.jsをインストールしておきます。

適当なディレクトリ上にExpressサーバーをインストールします。

npm install express

下記の通りAccept-CHヘッダーに「UA, Platform」を出力するように記載します。

main.js
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

ただし、1回目のリクエストでは表示されないので、2回目のリクエストもしくは、iframeなどを使ってサブリエクストを行う必要があります。

Javascriptで取得

Javascriptだと Chromeにnavigator.getUserAgent()が用意されているようだ。

実際確認してみたところ、上記では無く、navigator.userAgentDataというのが存在しているようだ。
chrome://flags/ から、Experimental Web Platform featuresを有効にすることで使用できる。

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

参考サイト

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした