Client Rectsとは？

Client Rects は、ブラウザが提供する一連の API で、Webページ上の要素のレイアウト情報を取得するために使用されます。これには、ページ上における要素の正確な位置やサイズが含まれます。これらの情報は“矩形”（rects）の形式で返され、要素の上端、下端、左端、右端、幅、高さなどの詳細データが含まれます。



Client Rects はどのようにフィンガープリントになるのか？

Client Rects がブラウザフィンガープリント追跡技術になり得る核心的な理由は、たとえ2台のデバイスでまったく同じWebページを開いたとしても、ハードウェア構成、オペレーティングシステム、ブラウザの種類やバージョン、画面解像度、フォント設定などの違いにより、最終的にレンダリングされるWebページ要素のレイアウト情報が異なる可能性があるためです。



例を挙げると、同じ文章や同じボタンでも、あるデバイスでは少し大きく表示され、別のデバイスでは位置がわずかにずれることがあります。こうした微細な差異は肉眼では気づきにくいものですが、Client Rects API を通じて正確に捉えることができます。



Client Rects フィンガープリントの生成プロセス

Webサイトが Client Rects を通じてブラウザフィンガープリントを取得する場合、通常は以下の手順が含まれます。



ステップ1：対象要素を選択または生成する



Webサイトはまず、レイアウト情報の収集に使用する要素を選定する必要があります。それはテキストボックス、ボタン、またはページ上にすでに存在する任意の要素である可能性があります。フィンガープリントの安定性と独自性を高めるために、Webサイトがフィンガープリント収集専用の非表示要素を動的に生成することもあります。



ステップ2：要素の Client Rects を取得する



JavaScript で要素の getClientRects() メソッドを呼び出し、その要素のレイアウト情報を取得します。返されるデータには、要素の位置とサイズ情報——上端（top）、下端（bottom）、左端（left）、右端（right）、幅（width）、高さ（height）などが含まれます。



ステップ3：データを記録または処理する



Webサイトはこれらの生データを記録するか、あるいはデータに対してさらに処理を行います。たとえば、要素の面積（幅 × 高さ）を計算したり、要素と他の要素との相対的な位置関係を計算したりします。



ステップ4：ブラウザフィンガープリントを生成する



最後に、Webサイトはこれらのレイアウト情報を他のデータ（IPアドレス、ユーザーエージェント文字列など）と組み合わせ、特定のアルゴリズムによって独自のブラウザフィンガープリントを生成し、ユーザーの識別と追跡に使用します。



注意すべき点として、これはあくまで簡略化された例です。実際の運用では、Webサイトは複数の要素の Client Rects データを収集し、より複雑な統計処理や分析を行うことで、フィンガープリントの一意性と安定性を高める場合があります。



Client Rects は、Webサイトにとっての一本の“ものさし”と理解できます——それは、あなたのブラウザがページ要素をどのようにレンダリングし配置しているかを正確に測定し、その測定結果にはデバイスごとに微小ながら識別可能な差異が存在します。