Offers を運営している株式会社 overflow の あほむ でございます。
本記事は Chrome Platform Status からなんとなく Proposed なステータスのフィーチャーを取り上げて、そのプロポーザルを眺めてみるシリーズです。前回は CSS Custom Highlight API でした。
prefers-reduced-data データーセーバー設定を検出するメディアクエリ
今回は Media Queries Level 5 prefers-reduced-data を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。
Editor's Draft ですが Working Draft にもあがっています。Chrome Platform Status で Proposed ですが仕様がリリースされてからはそれなりの年月が経っています。その上で、いずれかのレンダリングエンジンにおける実装が先行しまくっている状況ではないようです。
CSS におけるデータセーバーの検出
プラットフォームのシステム環境におけるいわゆるデータセーバー的な設定が有効になっていることを検出して、それに応じた処理を CSS で記述できるようにするメディアクエリの機能です。
既に各レンダリングエンジンからリリース済みでお馴染みの prefers-reduced-motion は OS のアクセシビリティ機能でエフェクトやモーションの類をなくす設定が有効かどうかを検知しますが、それのデータセーバー版です。
なぜ ship されていないのか
MDN によれば正確には Chromium であれば #enable-experimental-web-platform-features フラグを有効にすることで利用できます。ユースケースは限られるものの見切り発車で ship してしまっても問題なさそうな親切機能のようにも思えます。ではなぜ、Chromium でさえもフラグなしで ship せず、他のベンダーでも実装が進んでいないのでしょうか。
Finger Printing に使われる懸念
1.4. Prefers-* Media Features Security and Privacy として下記のように書かれています。
Information about a user can be used as an active fingerprinting vector. Analysis of impact pending, more information to be provided before spec is published.
User agents and developers implementing this specification need to be aware of this vector and take it into consideration when deciding whether to use the feature. Specificallyprefers-reduced-motion,prefers-color-schemeandprefers-reduced-dataare currently of concern for exploitation.
フィンガープリントのベクタとして使えてしまう懸念が表明されており、仕様を公開する前に何らか分析のうえ議論を着地させる必要がありそうなステータスです。こうなってくると、Mozilla や Apple といったベンダの普段からの態度としてネガティブな立場の可能性もありえます。
実際選考して実装している Chromium の当該チケット においても CSSWG の動き待ちで長期間ペンディングしているような様子が伺えます。
HTTP でも公開してるやん...とはいえ
Chrome 等では既に Network Client Hints のひとつとして Save-Data HTTP リクエストヘッダに乗せて送信されるようサポートされています。
また同じく Chrome 等では navigator.connection.saveData として JavaScript からもアクセスできます。
Chrome の周辺世界においてはとっくに公開している情報だし便利そうだから ship しちゃおうぜという意志決定もありえそうですが、昨今のプライバシー/セキュリティーに関する動向を踏まえると CSSWG で結論が出されていないものを独断専行するには憚られるのかもしれません。
ちなみに同じく Chromium を使っている Brave では navigator.connection が無効になっています。おそらく Save-Data HTTP ヘッダーも同様でしょう。これはレンダリングエンジンとして可能だが、ブラウザのポリシーとしてやらない、といった事情が垣間見えます。
本稿執筆時点で提案されている API
メディアクエリのフィーチャーが増えただけなので、使い方、記述方法そのものに新奇性はありません。
@media (prefers-reduced-data: reduce)
仕様書の当該箇所 のサンプルコードをそのまま紹介します。
.image {
background-image: url("images/heavy.jpg");
}
@media (prefers-reduced-data: reduce) {
/* Save-Data: On */
.image {
background-image: url("images/light.jpg");
}
}
prefers-reduced-data: reduce つまりデータ通信量を減らす設定にしているときは背景画像に images/light.jpg を読み込むようにするという記述です。
値の指定バリエーションは no-preference | reduce となっていて、no-preference はユーザーがシステムに対してなにも設定を明示していないことを示します。
まとめ
以上、簡単ですが prefers-reduced-data のご紹介でした。一見してあったら便利そうで無害に見える機能も先鋭化したユーザートラッキング技術に絡むと色々ありそうですねという事例でした。
日本国内含めて近年の各国におけるインターネット上のプライバシーに関する議論を鑑みるに、我々開発者も自分たちがどんなツールを使っていて、どのような情報を収集し、何と連携しているのか把握する必要が一定あるように感じます。
関連記事
副業転職の Offers 開発チームがお送りするテックブログです。【エンジニア積極採用中】カジュアル面談、副業からのトライアル etc 承っております💪 jobs.overflow.co.jp
Discussion