什麼是Client Rects？

Client Rects 是瀏覽器提供的一組 API，用於取得網頁元素的版面配置資訊，包括元素在頁面上的精確位置和尺寸大小。這些資訊以“矩形”（rects）的形式返回，包含了元素的頂部、底部、左側、右側、寬度和高度等詳細資料。



Client Rects 如何成為指紋？

Client Rects 之所以能夠成為一種瀏覽器指紋追蹤技術，核心原因在於：即使兩台裝置開啟的是完全相同的網頁，由於硬體配置、作業系統、瀏覽器類型和版本、螢幕解析度、字型設定等因素的差異，最終渲染出的網頁元素版面配置資訊也可能各不相同。



舉個例子：同一段文字或同一個按鈕，在一台裝置上可能顯示得稍大一些，在另一台裝置上則可能位置略有偏移。這些細微的差異肉眼難以察覺，但透過 Client Rects API 卻可以被精確捕捉。



Client Rects 指紋的生成流程

網站透過 Client Rects 取得瀏覽器指紋，通常包含以下步驟：



第一步：選擇或生成目標元素



網站首先需要選定一個用於採集版面配置資訊的元素，可以是一個文字框、一個按鈕，或者頁面上任何既有的元素。為了提高指紋的穩定性和獨特性，網站也可能會動態生成一個專門用於指紋採集的隱藏元素。



第二步：取得元素的 Client Rects



透過 JavaScript 呼叫元素的 getClientRects() 方法，取得該元素的版面配置資訊。返回的資料中包含了元素的位置和尺寸資訊——頂部（top）、底部（bottom）、左側（left）、右側（right）、寬度（width）和高度（height）等。



第三步：記錄或處理資料



網站會記錄這些原始資料，或者對資料進行進一步處理。例如，計算元素的面積（寬度 × 高度）、計算元素與其他元素的相對位置關係等。



第四步：生成瀏覽器指紋



最後，網站將這些版面配置資訊與其他資料（如 IP 位址、使用者代理字串等）結合起來，透過特定演算法生成一個獨特的瀏覽器指紋，用於識別和追蹤使用者。



需要注意的是，這只是一個簡化的範例。在實際操作中，網站可能會採集多個元素的 Client Rects 資料，並進行更複雜的統計和分析，以提高指紋的唯一性和穩定性。



可以把 Client Rects 理解為網站的一把“尺子”——它精確測量你的瀏覽器如何渲染和排列頁面元素，而這些測量結果在不同裝置之間存在微小但可識別的差異。