ClientRects 指紋是甚麼？多帳號環境一致性核對指南

核心結論：檢測頁的 ClientRects 讀的是網頁元素的佈局盒子，一組帶小數點的寬高及座標。兩個環境讀數對不上，通常源於字體渲染、螢幕縮放或系統差異。它屬於環境一致性的一部分，無法單獨停用，處理方式是指紋設定內的檔位選擇加實測。

「一致性自查做到指紋這一層，兩個環境的 ClientRects 讀數不一致。」或者倒過來：檢測頁這一欄標了黃，不知道算不算問題。這類疑問的共同點是，參數名字見過，但它量度的是甚麼、改動後會影響甚麼，心裏沒底。

這篇文章按排查次序回答四件事：這個讀數是甚麼、為何兩個環境會對不上、它在環境一致性裏說明甚麼，以及在 MostMate 指紋瀏覽器裏如何配置及驗證。MostMate 為每個帳號準備一套彼此隔離的瀏覽器環境，ClientRects 是指紋設定裏的一項。

ClientRects 指紋到底是甚麼

一句話：ClientRects 指紋讀取的是網頁元素的精確盒子座標。呼叫 getBoundingClientRect() 可以取得元素的寬度、高度及相對視窗的位置，MDN 文件的定義是「回傳元素的大小及其相對於視窗的位置」；折行的行內元素則用 getClientRects() 讀取，每行一個矩形。

關鍵在於數值形態。座標不是整數，而是小數點後多位的浮點數，例如 147.359375。網站無須任何權限：一段腳本在頁面內建立隱藏元素、填入固定文字，讀回矩形就能拼出簽名，整個過程混在正常的佈局計算之中。

營運者要在意它有三個理由。它無法被停用，佈局計算是網頁正常運作的基礎；它跨工作階段穩定，同一部裝置的讀數基本不變；它與字體、螢幕參數一樣，屬於環境聲明的一部分，風控會拿來做交叉核對。

為何兩個環境的讀數會對不上

一行文字的寬度由整條排版管線決定，每層都會留下差異：

• 文字排版引擎：Windows、macOS、Linux 各有一套，同一款字體、同一串字元，算出的字距不同。
• 螢幕縮放：高解像度螢幕及系統縮放會改變取整粒度，小數位隨之變化。
• 後備字體：頁面要求的字體未安裝，改用後備字體，寬度隨之改變。
• 瀏覽器引擎與頁面縮放：不同核心的斷行演算法不同，頁面縮放會直接進入排版管線。

這些差異都不大，單看一個數字說明不了甚麼。組合起來，卻能描述「這部裝置跑的是甚麼系統、甚麼渲染堆疊」。它與字體指紋是近親：字體枚舉直接問名單，ClientRects 量度的是渲染結果，兩者可以互相印證。裝置級、視窗級的尺寸參數已在螢幕解像度那篇寫過，ClientRects 是更深一層的元素級訊號。

這個讀數在環境一致性裏擔當甚麼角色

它最大的價值在於交叉驗證：為環境聲明找一個能夠對得上的實測參照。環境聲明自己是 Windows、掛著一組常見字體，量出來的文字寬度卻是另一種系統的取整風格，兩個訊號便互相矛盾。風控無須看懂原理，只需要發現矛盾。

配置的一致性比單項參數的罕見度更值得核對。排查兩個環境會否被判為同一人時，矩形讀數應該與指紋面板聲明的作業系統、字體清單放在一起對照；四維度自查的邏輯，就是把聲明與實測對齊。

還有一個常被忽略的用途：縮放檢測。矩形的取整方式可以反推頁面目前的縮放級別及系統縮放設定，這些資訊與裝置聲明的螢幕參數又是一組可以互查的訊號。環境之間縮放行為差別很大時，讀數差異屬正常，先確認縮放狀態再下結論。

MostMate 裏怎樣配置

在 MostMate 的指紋設定表單裏，ClientRects 獨佔一項，旁邊就是 Canvas、AudioContext、SpeechVoices 及 WebGL 圖像。它只有兩檔：Real 檔返回本機真實排版，Noise 檔即噪音模式。

按場景選檔。同時滿足兩個條件可以選 Real：這部電腦的配置就是目標受眾的主流配置，例如常見的 Windows 加預設字體組合；業務頁面對排版精度要求高，不容許佈局數值被改動。Real 檔的代價是本機真實渲染特徵原樣暴露，如果電腦安裝了大量冷門字體，特徵辨識度會隨之上升。

多個環境共用同一部電腦，選 Noise。各環境的讀數不再指向同一部本機，這是它主要的適用場景。代價是要接受一個約束：矩形值之間存在算術關係。整盒座標要與內部文字的矩形對得上，相同字串的寬度要能成比例。假如噪音只落在部分讀數上，這些關係會被打破，反而製造更顯眼的矛盾訊號。所以選完檔位必須實測，而不是預設配好便沒問題。

切換到 Noise 檔之後，指紋預覽面板的 ClientRects 一欄會變成帶六位代號的取值。代號只是噪音配置的標識，實際暴露的哈希要開啟環境跑一次檢測頁才看得到。

配置之後怎樣驗證

驗證分兩步：先看數值有沒有變，再看變完之後是否自洽。

第 1 步：雙環境對比讀數。建立兩個環境，一個選 Real、一個選 Noise，分別開啟 BrowserLeaks 的 Client Rects 檢測頁。同一部機器上，Real 環境的矩形值應該一致；Noise 環境應與 Real 不同，兩個 Noise 環境之間也應有區分。記錄時重點看小數點後第三位開始的部分，差異通常由這裏開始。把每個環境的讀數記下來，作為這份環境的基準線。

第 2 步：核對自洽性。變更之外，還要過交叉檢查：

• 跨工作階段再測一次，同一環境的取值應當穩定，跳來跳去的讀數本身就是異常。
• 與指紋面板聲明的作業系統、字體清單對照，渲染風格要能夠匹配，不能一個訊號說 Windows、另一個說 macOS。
• 正常瀏覽幾個常用頁面，確認排版沒有可見的錯亂，尤其是表單、按鈕及折行文字。

三步都過，這項參數才算配置完成；否則先回指紋設定核對檔位。

常見問題

檢測頁 ClientRects 標紅，一定是環境有問題嗎？

不一定。先看兩件事：環境聲明的系統及字體與讀數風格是否匹配，縮放狀態是否與螢幕參數對得上。兩處都正常，單項標紅不必緊張；讀數風格與聲明明顯衝突，才需要進入指紋設定核對檔位。

調整瀏覽器縮放會改變 ClientRects 指紋嗎？

會。縮放直接進入排版管線，矩形取整隨之變化。但縮放是所有用戶都有的正常行為，風險在另一處：縮放狀態與環境聲明的螢幕參數對不上。跨工作階段穩定的部分仍然由渲染堆疊決定。

ClientRects 能夠被停用嗎？

不能。佈局計算是網頁正常運作的基礎，排版、彈出視窗定位、動畫都依賴它，瀏覽器也沒有提供關閉開關。業界的做法是降低精度而不是停用，Tor 瀏覽器就把測量值取整以減少可識別的差異。

無頭瀏覽器為何容易在元素尺寸上露餡？

無頭環境的預設視窗尺寸很固定，文字渲染堆疊單一，量出來的矩形與它聲明 UA 所聲稱的裝置經常對不上。風控拿 rect 與其他聲明參數做交叉檢查，這類環境很容易被挑出來。

結語

ClientRects 在一致性核對中的角色很具體：把環境聲明與實測排版放在一起對，矛盾就是訊號。檢測頁標紅時，先對照聲明參數及縮放狀態，確認屬於一致性缺口，再進入指紋設定處理。

MostMate 把 ClientRects 連同其他渲染參數放進同一張指紋設定表單，Real 與 Noise 兩檔控制讀數來源，產品功能的完整面貌可以到 MostMate 官網看一遍。環境建立之後，用雙環境對照把讀數基準線記下來，比任何配置技巧都實在。也可以下載 MostMate，親自量一遍 Real 與 Noise 的差異。