HTML+CSSを使用してマウスの動きを追跡する

ユーザーがプライバシーを意識するようになり、オンライン トラッキングに対する予防策を強化するにつれて、JavaScript トラッキング スクリプトをブロックするために広告ブロッカーやスクリプト ブロッカーを使用するようになっています。現在、研究者は HTML と CSS を使用して Web サイト訪問者のマウスの動きを追跡し、追跡保護を回避する新しい方法を発見しました。

1 新しい攻撃手法

ほとんどのオンライン トラッキングは、Web サイトや広告に読み込まれる JavaScript スクリプトを通じて行われます。これにより、広告主や Web サイトは、ユーザーがオンラインでどこにアクセスしたか、Web サイトをどのように使用したか、その他のオンライン行動を追跡できます。

これらのスクリプトは、広告ブロッカー、ブラウザのトラッキング保護（Firefox のコンテンツ ブロックなど）、または JavaScript 全体をブロックすることでブロックできます。

Firefox でのコンテンツ ブロック

研究者は、JavaScript を一切使用せず、HTML と CSS のみを使用して Web ページ上の Web サイト訪問者のマウスの動きを追跡する新しい方法を発見しました。これにより、この追跡をブロックすることが非常に困難になります。

セキュリティ研究者のデイビー・ワイビラル氏は、ウェブサイトが HTML と CSS を使用して、あるブラウザ ウィンドウ内のマウスの動きを別のブラウザ ウィンドウで観察する方法を Twitter で実演しました。

Wybiral は、CSS を活用した HTML DIV のグリッドを作成することでこれを実現しました。マウスがグリッド上のボックスの上に移動すると、ホバー セレクターが新しい背景画像を要求できるようになりました。画像リクエストはバックグラウンドで実行されるため、ブラウザは接続が行われていることを示さず、すべてのリクエストはユーザーから隠されます。

HTMLソースコード

ユーザーがボックスの上にマウスを移動して新しい背景画像を要求すると、スクリプトはマウスのホバー位置を記録します。別のブラウザのユーザーは、/watch URL を使用してリアルタイムで監視できます。

この手法は、Web サイト上のホット スポットの特定やユーザー インターフェイスの調査など、さまざまな用途に使用できます。さらに、このテクノロジーを使用して、動的（歩行）分析を実行し、他の訪問者の行動特性に関する洞察を得ることができます。

研究者らはまた、ホバーセレクターに加えて、他のセレクターを使用してブラウザの動作を追跡できるとも述べています。

2 その他のCSSトラッキングテクニック

Wybiral が発見した方法は、CSS と HTML を使用して Web サイトのユーザーを追跡する方法を示す唯一の方法ではありません。

昨年、CrookedStyleSheets と呼ばれるプロジェクトがリリースされました。これにより、Web サイトは画面解像度、使用中のブラウザ、ユーザーがリンクをクリックしたタイミングなどのユーザー情報を収集し、サポートされているフォントに基づいてユーザーが使用しているオペレーティング システムを推測できるようになります。

Wybiral のアプローチと同様に、これはすべて HTML と CSS を使用して行われ、JavaScript は使用されません。

要約する

以上が、HTML + CSS を使用してマウスの動きを追跡する方法についてご紹介しました。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。