:hover を使ったマウスカーソルの追跡とプライバシー問題

投稿

JavaScript を使わず CSS の :hover 疑似クラスでマウスカーソルの動きを追跡するというプライバシー面の話題。

Grid 状に細かく区分けしたボックスのそれぞれに :hover 疑似クラスで別々の画像を background-image などで指定し、その画像のアクセスログをチェックすることで、マウスカーソルの動きを把握することができるというものですね。

簡単なコード例を挙げるとこんな感じです。

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  width: 200px;
}

.box {
  height: 100px;
  width: 100px;
  color: #fff;
  background: #000;
}

.box1:hover {
  background-image: url(box1_hover.png);
}

.box2:hover {
  background-image: url(box2_hover.png);
}
</style>

<div class="grid">
  <div class="box box1">BOX1</div>
  <div class="box box2">BOX2</div>
</div>

これで BOX1 の上をマウスカーソルが通過したら box1_hover.png の画像が読み込まれ、 BOX2 を通過したら box2_hover.png が読み込まれるので、それらの画像ファイルのアクセスログを監視すればマウスカーソルの動きがある程度分かってしまうわけです。

実は似たような話はずっと昔から言われていて、以前は :visited を使ったプライバシー上の問題がありました。

<style>
.link1:visited {
  background-image: url(link1_visited.png);
}
</style>

<a href="https://example.com/1" class="link1">Link</a>

このようなページを用意すると、 link1_visited.png へのアクセスログを見ることによって、ユーザーがそのリンク先にアクセス済みかどうか分かってしまう事象がありました。

この対策のため、2010年〜2011年にかけて各ブラウザは :visited に指定できるスタイルを color や background-color など色関係のものだけに制限する方針が取られました。

このプライバシー上の問題は仕様にも書かれており、「Selectors Level 3」では下記のような記述があります。

Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

6.6.1.1. The link pseudo-classes: :link and :visited(W3C)
  • ちなみに、いつ頃からこういう話題があったのか遡ってみたのですが、 CSS 2.1 の2003年1月28日版 Working Draft では既に似たような記述が見られる(W3C) んですね。

:visited のプライバシー問題が話題になっていた頃は、多少の不便があることを承知の上でブラウザが指定可能なスタイルを制限するという対策が取られたわけですが、さすがに :hover でそれをやるのは影響が大きすぎて現実的でない気がします。どのような解決策があるのでしょうか。