iOS版Chromeで「PC版サイトを見る」を有効にしている場合にJavaScriptでChromeであることを検知する

iOS Chrome

問題

iPhone版Chromeでは設定で「PC版サイトを見る」を有効にした場合、navigatorで取得できる情報が変化し、CriOSが含まれなくなるのでChromeであることが分からなくなる。

*Chrome 80.0.3987.95で確認。

iPhoneで取得可能なユーザーエージェント

iPhone版Chromeで「PC版サイトを見る」を有効にした場合にnavigatorで取得できる情報。CriOSが含まれておらず、他にChromeを判別するために利用できる文字列もない。

maxTouchPoints : "5"
appCodeName : "Mozilla"
appName : "Netscape"
appVersion : "5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.1 Safari/605.1.15"
platform : "iPhone"
product : "Gecko"
productSub : "20030107"
userAgent : "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.1 Safari/605.1.15"
vendor : "Apple Computer, Inc."

iPhone版Chromeで通常の「モバイルサイトをリクエスト」時にnavigatorで取得できる情報。CriOSが含まれている。

maxTouchPoints : "5"
appCodeName : "Mozilla"
appName : "Netscape"
appVersion : "5.0 (iPhone; CPU iPhone OS 13_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/80.0.3987.95 Mobile/15E148 Safari/604.1"
platform : "iPhone"
product : "Gecko"
productSub : "20030107"
userAgent : "Mozilla/5.0 (iPhone; CPU iPhone OS 13_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/80.0.3987.95 Mobile/15E148 Safari/604.1"
vendor : "Apple Computer, Inc."

これは以下に記載があるように仕様通りの動作。 developer.chrome.com

iPadで取得可能なユーザーエージェント

iPad版Chromeでは「PC版サイトを見る」の設定に関わらず、以下の情報が取得できる。CriOSが含まれている。

maxTouchPoints : "5"
appCodeName : "Mozilla"
appName : "Netscape"
appVersion : "5.0 (iPad; CPU OS 13_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/80.0.3987.95 Mobile/15E148 Safari/604.1"
platform : "MacIntel"
product : "Gecko"
productSub : "20030107"
userAgent : "Mozilla/5.0 (iPad; CPU OS 13_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/80.0.3987.95 Mobile/15E148 Safari/604.1"
vendor : "Apple Computer, Inc."

解決策

iOS版Chromeではwindow.__gCrWebが存在しているので、このオブジェクトをチェックすることでiPhone版Chromeでも設定に関わらずChromeであることを検知できる。

Chromiumでwindow.__gCrWebを追加している部分のコード https://source.chromium.org/chromium/chromium/src/+/master:ios/web/web_state/js/resources/base.js?originalUrl=https:%2F%2Fcs.chromium.org%2F

サンプル

//  iPhone, iPadの検知
if(navigator.platform.indexOf("iPhone") != -1 || navigator.appVersion.indexOf("iPad") != -1) {
  if(window.__gCrWeb != undefined) {
    //  Chrome
  }
  else {
    //  Other browsers
  }
}