CSS を使用してユーザーを追跡する方法を教えます

それを使ってできること

画面解像度（ブラウザが最大化されているとき）やユーザーが使用しているブラウザ（エンジン）など、ユーザーに関するいくつかの基本情報を収集できます

さらに、ユーザーを監視することもできますリンクがクリックされたか、マウスが要素の上に置かれているかに関係なく、ユーザーがマウスを置いたリンクを追跡するために使用でき、さらにはユーザーがマウスをどのように動かしたか（ページ上の非表示のフィールドを使用）も追跡できます。ただし、私の現在の方法では。ユーザーの最初のクリックまたはホバーを追跡することしかできません。このメソッドを変更すると、最終的にはユーザーのすべてのクリックを追跡できると思います

最後に、この情報に基づいて、ユーザーが特別なフォントをインストールしたかどうかを監視することもできます。 Windows の Calibri など、オペレーティング システムによって使用されるフォントも若干異なるため、ユーザーが使用するフォントを追跡できます

これはどのように実装されていますか

一般的なアプローチ

CSS を使用する url("foo.bar " を使用できます) ) 属性は、画像を追加するための外部リソースを参照します。興味深いことに、このリソースは必要なとき (リンクをクリックしたときなど) にのみ読み込まれます

したがって、CSS を使用して、ユーザーがリンクをクリックしたときにセレクターを作成できます。特定の UPL

#link2:active::after {
  content: url('track.php?action=link2_clicked');
}

サーバーを呼び出すと、PHP スクリプトは URL を呼び出すときにタイムスタンプを保存します

ブラウザ監視

ブラウザ監視は @supports Media-Query に基づいており、ブラウザのプロパティのいくつかの特別な機能を監視できます。 -webkit-Appearance

@supports (-webkit-appearance: none) {
  #chrome_detect::after {
    content: url('track.php?action=browser_chrome');
  }
}

フォント監視

フォント監視では、新しいフォントを定義する必要があります。ただし、フォントが存在する場合、テキストはそのフォントをシステム上で見つけられない場合に使用します。フォントに到達すると、定義されたフォントがバックアップとして使用されます。この場合、ブラウザーは定義されたフォントをロードし、サーバー上の追跡スクリプトを呼び出そうとします

/** Font detection **/
@font-face {
  font-family: Font1;
  src: url('track.php?action=font1');
}
 
#font_detection1 {
  font-family: Calibri, Font1;
}

ホバー監視

ホバー監視用(に基づいています)。 jeyroik アイデア)、キーフレームを定義する必要があり、このキーフレームを使用するたびに URL をリクエストする必要があります

@keyframes pulsate {
  0% {
    background-image: url('track.php?duration=00');
  }
  20% {
    background-image: url('track.php?duration=20');
  }
  40% {
    background-image: url('track.php?duration=40');
  }
  60% {
    background-image: url('track.php?duration=60');
  }
  80% {
    background-image: url('track.php?duration=80');
  }
  100% {
    background-image: url('track.php?duration=100');
  }
}

その後、定義されたキーフレームを使用してアニメーションを作成し、アニメーションの長さを定義できます。測定した最大時間も

#duration:hover::after {
  -moz-animation: pulsate 5s infinite;
  -webkit-animation: pulsate 5s infinite;
  /*animation: pulsate 5s infinite;*/
  animation-name: pulsate;
  animation-duration: 10s;
  content: url('track.php?duration=-1');
}

キーフレーム設定を補うことで解像度モニタリングを最適化できます

入力モニタリング

ユーザーが特定のチェックボックスを選択することをモニタリングするには、CSSによって提供される:selectedセレクターを使用できます

#checkbox:checked {
  content: url('track.php?action=checkbox');
}

In文字列を監視するために、基本的な入力検証を解決するのに役立つ HTML パターン属性と組み合わせます。また、:valid セレクターと組み合わせると、入力が正常に一致したときにブラウザーが追跡サイトをリクエストします

<input type="text" id="text_input" pattern="^test$" required=""/>
#text_input:valid {
  background: green;
  background-image: url(&#39;track.php?action=text_input&#39;);
}

属性コンテンツの背後には何も表示されず、PHP 警告も表示されません。これは、この属性の値が false であるか、ユーザーがページまたはリンクにアクセスしていないことを意味します (これは本当に面倒ですが、これらのメソッドの原理を知ることができます)

さらに、現在最も一般的に使用されている画面幅のみを監視できるため、解像度の監視は特に正確ではありません。最後に、ユーザーの実際の画面幅を監視することは想像ほど簡単ではないと言いたいのです。CSS によって監視される高さはブラウザ ウィンドウの高さであり、通常はシステム パネル/タスクバーのせいで、ブラウザ ウィンドウはブラウザ ウィンドウの高さよりも小さいからです。モニター

上記の方法を使用して追跡を防ぐ方法はありますか

私が今のところ知っている唯一の方法は、CSSを完全に無効にすることです(これを実現するには、uMatrixなどのプラグインを使用できます)が、コストも非常に膨大です, CSS がないと、Web ページは以前ほど見た目に美しくなくなったり、使い物にならなくなったりするため、プライバシーを本当に心配しない限り (たとえば、次のような場合)、CSS を無効にするという選択肢はありません。 Tor ブラウザを使用する場合は、CSS を無効にする必要があるかもしれません)

より良い解決策は、Web ページがロードされるときに、ブラウザが必要な外部リソースをロードしないことです。この方法では、ユーザーの個人的な行動を監視することができなくなります。コンテンツの読み込みはブラウザを通じて実行できます 実現するには、プラグイン (NoScript や uMatrix と同様) を通じて実装することもできます

上記の方法には明らかな問題があります。つまり、パフォーマンスに一定の影響を及ぼします。ブラウザはページの初期化時に大量のコンテンツをロードするためです (一部のコンテンツはページにまったく必要ありません)

以上がCSS を使用してユーザーを追跡する方法を教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。