CSSベースのフィンガープリント

ウェブサイトの指紋認識技術は心配です。これは、ユーザーを識別するのに十分なユーザーメタデータを収集することを指します。 JavaScriptは、さまざまな指紋認識の可能性を提供し、サーバーがアクセスしたIPアドレスと組み合わせて、指紋認識を非常に一般的にします。

ただし、一般に、人々はCSSをフィンガープリントの媒体とは考えていないため、ある程度は「安全」であると考えられています。ただし、Oliver Brotchieは、ある程度の指紋認識に対してのみCSSを使用するソリューションを提案しました。

私たちが持っているすべての@mediaクエリを考慮してください。 any-pointerを使用して、ポインタータイプをテストできます。各値について、サーバーから完全に一意の背景画像を要求すると想像してください。画像が要求された場合、これらの@mediaクエリが真であることがわかります。次のような方法を使用して、指紋の指定を開始できます。

 .pointer {
  背景画像：url（ '/sique-id/pointer = none'）
}

@media（任意のポインター：粗い）{
  .pointer {
    背景イメージ：url（ '/unique-id/pointer =粗'）
  }
}

@media（any-pointer：fine）{
  .pointer {
    背景画像：url（ '/sique-id/pointer = fine'）
  }
}

ダークモードの好みをテストするためにprefers-color-schemeができるという事実と組み合わせて、指紋認識はより明確です。実際、オリバーが最も心配しているのは、現在のCSSユーザー優先メディアクエリのドラフトです。

今後のドラフトは、このアプローチをスケーラブルにするだけでなく、その精度を向上させるだけです。現在、他の方法がなければ、最終的に各要求を特定の訪問者に関連付けることは困難です。その起源を決定する唯一の実行可能な方法は、接続のIPアドレスでリクエストをグループ化することです。ただし、新しいドラフトを使用して、ランダムな文字列を生成し、各訪問者のURLタグに挿入することにより、その訪問者からのすべてのリクエストを正確に識別できます。

それを行う方法はもっとあります。メディアクエリを1ピクセル離して作成し、各クエリの背景画像をリクエストして、訪問者のウィンドウサイズを完全に推測できます。あまり知られていないオッドメディアクエリが12個あるかもしれませんが、CSSを使用したフィンガープリントに非常に役立ちます。さまざまな@supportsクエリでこれを使用すると、正確なブラウザを効果的に推測することができます。特定のローカルフォントインストールをテストする古典的な手法と組み合わせることで、かなり優れた指紋認識マシンを入手できます。

 @font-face {
  font-family： 'some font';
  src：local（some font）、url（ '/unique-id/some-font'）;
}

.some-font {
  font-family： 'some font';
}

生成されたCSSコードは非常に大きい（これはSASSコードを生成するSASSコードです）が、URLでカスタムプロパティを使用できるようになったら、明らかに大幅に削減されます。

この問題についてはあまり心配していません。これは、主にJavaScriptを無効にしていないためです。さらに、アクセスされたリンク（ブラウザによって解決された）、キーログ、ユーザー生成インラインスタイル、その他の他の人が別の投稿で指摘したものなど、他のタイプのCSSセキュリティの脆弱性があります。

しかし、指紋認識に関するオリバーの研究は優れており、私よりも良いサイバーセキュリティを知っている人からの注目に値します。

以上がCSSベースのフィンガープリントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。