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

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

<<:  我々は自らの力でIE6を絶滅に追い込んでいる

>>:  jquery+springbootでファイルアップロード機能を実現

推薦する

Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...

HTML における Div と table の違い (あらゆる側面から詳細に説明)

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...

メモリの原則に関する詳細な説明: JS では変数はヒープに保存されるのか、スタックに保存されるのか?

目次1. 冷蔵庫に入りきらない象2. シャドウクローン文字列3. 実際に見た「奇妙なボール」 4. ...

Linux での MySQL のアンインストールとインストールのグラフィック チュートリアル

ブログを書くのは初めてです。開発に携わって2年になります。仕事の後に何か有意義なことを見つけたいと思...

MySQL 8.0.24 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.24のインストールチュートリアルを参考までに紹介します。具体的な内...

Ubuntu 18.0.4 MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.20 のインストールおよび設定方法は、参考としてグラフィック チュートリアルにま...

DockerにMySQL 8.0をインストールする方法

環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....

CSS 表示属性のインラインブロックレイアウト実装の詳細な説明

CSS 表示プロパティ注: !DOCTYPE が指定されている場合、Internet Explore...

MySQL でテーブルを削除する 3 つの方法 (要約)

ドロップテーブルドロップはテーブル情報を直接削除するため、最も高速ですが、データを取得することはでき...

docker compose の使い方の詳しい説明

目次Docker Compose の使用シナリオ基本的なデモ基本的な操作とメンテナンスdocker-...

MySQL からエクスポートされた scv ファイル内の文字化けやジャンプ行の問題をすばやく解決します

仕事上の理由により、完全なオンライン化(​​つまり、すべてのデータがオンラインで完了し、インポートや...

高品質なコードを書く Web フロントエンド開発実践書の抜粋

(P4) Web 標準は一連の標準で構成されています。中心となる概念は、Web ページの構造、スタイ...

HTML ハイパーリンク タグ_Powernode Java アカデミー

HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...

jsはテーブルの追加と削除の操作を動的に実装します

この記事の例では、jsでテーブルを動的に追加および削除するための具体的なコードを参考までに共有してい...

Docker 大規模プロジェクトのコンテナ化変革

仮想化とコンテナ化は、クラウドベースのプロジェクトでは避けられない 2 つの問題です。仮想化は純粋な...