ChromeとFirefoxのバージョン100対策、JavaScriptのバージョン判定で不具合が起こる方法とそれを直す方法

ChromeとFirefoxのバージョンがいよいよこの5月に、100になります。
参考: ChromeのスケジュールFirefoxのスケジュール

100になることで2桁から3桁になり、JavaScriptでuserAgentからユーザーエージェント文字列を検出してバージョン判定をしていると、期待通りに動作しないかもしれません。バージョン100で不具合が起こる検出方法、そしてそれを直す方法を紹介します。

ユーザーエージェント(userAgent)文字列検出の不具合が起こる方法とそれを直す方法

Encyclopedia Of Broken UserAgent String Detections
by Karl Dubost
Karl氏は、Mozillaのエンジニアマネージャーです。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

ユーザーエージェント文字列を正しく検出していますか?

この記事は包括的な百科事典ではありませんが、将来壊れたり、失敗するであろうユーザーエージェント文字列を特定するパターンを解説します。
もしこれらを使用しているなら、必ず修正してください。

1. 数値の代わりに文字列を比較する

これはSlack is optimized for Firefox version 520で詳しく説明したものです。

userAgentのバージョン番号を整数ではなく、文字列で抽出します。

上記のより良い方法は整数を抽出することです。

2. 位置に応じた部分文字列のスライス

ここでの前提は、数値を表す部分文字列(substring)がスラッシュの2文字後にあることです。8Firefox/の場合です。

上記のより良い方法は次のとおりです。

3. 正規表現が2桁にしかマッチしない

これはかなり一般的な間違いです。
ブラウザのバージョンが1桁から2桁に変わったときに、検出アルゴリズムのほとんどは修正されましたが、固定長に依存するコードがはまだ存在しています。

上記のより良い方法は次のとおりです。

4. iOS上のFirefoxをAndroidとして検出する

多くのサイトでは、各ブラウザでサポートされる最小バージョン番号のグリッドがあります。現在、iOS版のFirefoxのuserAgentの文字列は下記の通りです。

Mozilla/5.0 (iPhone; CPU OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/33.0 Mobile/15E148 Safari/605.1.15

FxiOS/33.0は、iOSバージョン33のFirefoxを意味します。Webデベロッパーは、次のように返すライブラリをよく使用していました。

一応大丈夫ですが、問題はサイトが「これはスマホ版Firefoxだから、Androidですね」となることです。Android版のFirefoxは78以降からサポートされています。そして、サイト全体や動画へのアクセスをブロックしたり、iOS版のFirefoxの最新版を使用しているユーザーにブラウザのアップグレードを求めてしまいます。

上記のより良い方法は、ブラウザが動作しているOSやエンジンを検出し、サポートマトリックスを調整することです。さらに良い方法は、ブラウザのバージョンに応じて、サイトに適切な劣化を処理させることです。

終わりに

質問や疑問点、私が見落としたかもしれないことなどがあれば、GitHubにお気軽にコメントをください。

sponsors

top of page

©2022 coliss