了解瀏覽器指紋如何透過 Canvas、WebGL、字型與音訊訊號識別你,並學習用 BrowserInsight 檢測、降低指紋追蹤,切實保護你的線上隱私。
什麼是瀏覽器指紋?
瀏覽器指紋(Browser Fingerprinting)是一種透過收集瀏覽器與裝置的各種特徵資訊來識別與追蹤使用者的技術。與傳統的 Cookie 不同,瀏覽器指紋不需要在使用者的裝置上儲存任何資料,因此即使使用者清除了瀏覽器資料,網站仍然可以透過指紋資訊識別出同一位使用者——參見持久訪客 ID:無痕、VPN、清快取都殺不死它,了解為什麼清除 Cookie、切換無痕模式或更換 VPN 都無法重置這種方式建構的 ID。
瀏覽器指紋的運作原理
當你造訪一個網站時,你的瀏覽器會自動向伺服器傳送大量資訊,包括:
- User-Agent:瀏覽器類型、版本、作業系統資訊
- 螢幕解析度:顯示器的大小與色彩深度
- 時區:裝置的本地時間設定
- 已安裝字型:系統中可用的字型清單
- Canvas 指紋:透過 HTML5 Canvas 繪製的圖形在不同裝置上的細微差異
- WebGL 指紋:顯示卡與圖形驅動程式的資訊
- 音訊指紋:音訊處理器的特徵
- 版面配置幾何資訊:頁面元素與文字位置的次像素級量測,透過普通 DOM 版面配置 API(而非 Canvas)讀取——參見 ClientRects 指紋
- 媒體裝置:透過
enumerateDevices()讀取的已連接攝影機、麥克風的數量、ID,以及一旦取得權限後的型號標籤——參見媒體裝置指紋了解授權前後分別會洩露什麼 - 已安裝語音:透過
speechSynthesis.getVoices()揭露的作業系統和瀏覽器文字轉語音清單,無需任何權限提示——參見語音合成指紋了解該語音清單如何因平台而異 - CSS 樣式規則:
prefers-color-scheme、pointer等媒體查詢,以及@font-face規則,能單純透過瀏覽器是否請求了樣式表所引用的某個資源,洩漏出偏好設定與已安裝字型——完全不需要任何 JavaScript——參見 CSS 指紋技術了解這項機制的原理 - 權限狀態:
navigator.permissions.query()能辨識約 15 種權限名稱中的哪些,以及每種解析為granted、denied還是prompt——全程不會跳出任何對話框;參見Permissions API 指紋了解支援模式與狀態向量如何疊加 - 網路資訊:透過
navigator.connection讀取的粗略連線狀態——effectiveType、downlink、rtt、saveData——無需任何權限提示,且僅在 Chromium 上可用;參見Network Information API 指紋了解這些分桶數值如何增加熵,又如何兼作瀏覽器引擎檢測
針對瀏覽器指紋的研究發現,組合足夠多的這類特徵後,絕大多數瀏覽器都能被唯一識別。實際上,你的瀏覽器指紋可能幾乎和現實世界中的指紋一樣獨特。
每一項訊號單獨來看都很微弱——有許多人與你共用相同的螢幕解析度或時區。指紋技術之所以奏效,是因為這些數值大致上彼此獨立,組合起來便能讓獨特性倍增。用資訊理論的話來說,每一項屬性都會增添幾個位元的熵,而一旦合併後的熵超過約 33 個位元,這個瀏覽器在全世界所有人之中就幾乎是獨一無二的了——這個門檻最早由 EFF 的 Panopticlick 研究(Eckersley, 2010)大規模證實,後續研究如 Laperdrix et al. 也予以印證。光是 User-Agent、字型清單、Canvas 與 WebGL 這樣常見的組合,往往就足以跨過這道門檻。
WebRTC 是相關但獨立的另一種風險——而且有兩種不同的形式。 它最廣為人知的問題是一種網路洩漏,即使在 VPN 背後也可能暴露你的真實 IP 位址。關於如何檢測並封堵它,請參閱 WebRTC 洩漏防護。此外,WebRTC 還透過它所支援的編解碼器與 SDP 結構,暴露出另一個獨立的小型指紋面,與你的 IP 無關——參閱 WebRTC 指紋技術,了解這項訊號的原理,以及為什麼堵住洩漏並不能消除它。
這些訊號在不同裝置上的權重並不相同。量產的手機硬體會拉平 Canvas、WebGL 與字型的熵值,遠不如桌面 PC 組態那樣千差萬別——但螢幕幾何資訊、觸控點與動作感測器,又帶來了桌面裝置大多不具備的訊號。參見行動裝置瀏覽器指紋識別,了解 Android 與 iOS 裝置具體是如何被追蹤的。
時區與語系值得特別一提,因為它們不只是裝置訊號,同時也是地區訊號——想知道你的連線實際來自哪個國家的服務,可以把你回報的時區、語系拿來跟 IP 地理位置比對,而只改變 IP 的 VPN 會讓這種矛盾原形畢露。參見應用程式如何在 VPN 之下辨識你的真實地區,了解這項具體檢測機制的原理。
Canvas 指紋技術詳解
Canvas 指紋是目前最強大的瀏覽器指紋技術之一。它的運作原理是:
- 網站在隱藏的 Canvas 元素上繪製特定的圖形與文字
- 將 Canvas 內容轉換為影像資料
- 計算影像資料的雜湊值
- 由於不同裝置的顯示卡、驅動程式與瀏覽器算繪引擎存在細微差異,產生的雜湊值也不同
Canvas 指紋的範例程式碼
// Canvas 指紋採集範例
function getCanvasFingerprint() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 繪製文字與圖形
ctx.textBaseline = 'top';
ctx.font = '14px Arial';
ctx.fillStyle = '#f60';
ctx.fillRect(0, 0, 100, 20);
ctx.fillStyle = '#069';
ctx.fillText('BrowserInsight', 2, 15);
// 取得影像資料並計算雜湊
return canvas.toDataURL();
}
WebGL 指紋技術
WebGL 指紋利用 WebGL(Web Graphics Library)API 來讀取你的圖形硬體細節,以及它算繪 3D 內容的方式。由於不同裝置之間的 GPU、驅動程式與算繪管線差異極大,這些細節是追蹤者所能收集到熵值最高的訊號之一。
一段指令碼實際上會讀取兩種截然不同的東西:
1. 回報的參數。 WebGL 透過 getParameter() 暴露出數十項數值——並可藉由 WEBGL_debug_renderer_info 擴充功能取得未經遮蔽的 GPU 廠商與算繪器字串:
const gl = document.createElement('canvas').getContext('webgl');
const dbg = gl.getExtension('WEBGL_debug_renderer_info');
gl.getParameter(dbg.UNMASKED_VENDOR_WEBGL); // 例如 "Google Inc. (NVIDIA)"
gl.getParameter(dbg.UNMASKED_RENDERER_WEBGL); // 例如 "ANGLE (NVIDIA, NVIDIA GeForce RTX 3060 Direct3D11 vs_5_0 ps_5_0, D3D11)"
光是這樣一個算繪器字串,就足以把你縮限到某個特定的 GPU 系列。再結合最大紋理尺寸、支援的擴充功能清單、著色器精度範圍以及鋸齒線寬限制,這組參數本身往往就已具備唯一性。
2. 算繪輸出。 就像 Canvas 一樣,指令碼可以在離螢幕的情況下算繪一個 3D 場景,再對產生的像素計算雜湊。浮點運算、抗鋸齒與驅動程式最佳化上的微小差異,會讓這個雜湊對你的機器而言保持穩定,卻又與大多數其他機器不同——即使算繪器字串被遮蔽也是如此。
因此,WebGL 指紋通常包含以下資訊:
- 顯示卡廠商與型號(未經遮蔽的算繪器字串)
- WebGL 算繪器與版本資訊
- 支援的 WebGL 擴充功能
- 著色器精度與數值限制
- 最大紋理與視口尺寸
- 算繪測試場景的雜湊值
由於這些數值來自硬體與驅動程式,而非你能隨手切換的設定,WebGL 是最難防範的黏著性訊號之一。想更深入了解,請閱讀 WebGL 指紋深度剖析。算繪器字串在架構層面也與你的作業系統緊密綁定——舉例來說,Direct3D 後端權杖只可能來自 Windows——這正是為什麼某些 GPU/OS 組合不只是罕見,而是在物理上不可能存在,並會立即被標記。
如何解讀你自己的指紋
要理解自己的暴露程度,最好的方法就是看看你自己的指紋。BrowserInsight 的指紋檢測功能完全在你的瀏覽器中執行——絕不會將任何指紋資料傳送到伺服器(IP 查詢則由另一個獨立的工具處理)——並會向你展示:
- 你的 Canvas 與 WebGL 雜湊值,以及它們看起來是常見還是罕見
- 你完整的 WebGL 算繪器字串,以及它所揭露的 GPU
- 偵測到的音訊指紋特徵
- 追蹤者所能讀取的全部標頭與 JavaScript 暴露屬性
- 一個匿名性評分,估算你目前的設定有多獨特,並附上具體建議
先在你平常使用的瀏覽器中執行一次檢測,再在啟用隱私瀏覽器或擴充功能後執行一次,然後比較兩次的評分。這種前後對照是最快的方式,讓你看清楚哪些防護真正對你的裝置產生了實質影響——因為答案會因每台機器而異。若想用一套結構化、逐項核對的方式來做這個比較,可參見瀏覽器指紋一致性自查清單。
如何保護你的瀏覽器指紋
沒有任何單一開關能讓你變得匿名,而現有的防護手段遵循著兩種截然相反的理念:看起來和大家一樣(一致化)或每次都看起來不一樣(隨機化)。理解某個工具採用的是哪一種,能幫助你避免以適得其反的方式把它們混用。
1. 使用隱私保護瀏覽器
Tor 瀏覽器採取一致化的做法:它將螢幕尺寸、字型、Canvas 與 WebGL 輸出標準化,讓所有 Tor 使用者看起來幾乎一模一樣,藉此縮小你顯得突出的那群人。Brave 採取隨機化的做法——它的「farbling」會在 Canvas、WebGL 與音訊讀數中注入微小的雜訊,並依每個網站、每個工作階段分別播種,因此每個網站看到的數值都不一樣,而這些數值也會在不同工作階段之間不斷變化。Firefox 則提供 privacy.resistFingerprinting(RFP),借用了 Tor 的一致化技術,並且在 Tor Browser 中預設就是開啟的。它們以不同的方式降低可被指紋識別的程度,但都具備一個關鍵共通點:改變高熵的算繪訊號——而這正是最關鍵之處。
2. 使用瀏覽器擴充功能
有一些瀏覽器擴充功能可以幫助抵禦指紋追蹤:
- CanvasBlocker:阻擋或偽裝 Canvas 指紋
- Privacy Badger:自動阻擋追蹤器
- uBlock Origin:阻擋廣告與追蹤指令碼
不過要謹慎挑選:擴充功能會以廣泛的權限存取你造訪的每一個頁面,一個粗心或惡意的擴充功能本身就可能變成追蹤管道。在安裝任何新擴充功能之前,請先參閱瀏覽器擴充功能的隱私風險。
3. 停用 JavaScript
雖然這會嚴重影響網頁功能,但停用 JavaScript 可以有效阻擋大多數指紋技術。你可以使用 NoScript 等擴充功能選擇性地為信任的網站啟用 JavaScript。
4. 使用虛擬機器或容器
為不同的線上活動使用不同的虛擬機器或瀏覽器容器,可以隔離不同的瀏覽器指紋,防止追蹤者將你的不同線上身分關聯起來。
反指紋的悖論
有一個值得理解的陷阱:一項罕見或過度客製化的防護,可能讓你更容易被辨識,而非更難。如果你是唯一一個執行某款特定偽裝擴充功能、又搭配不尋常 User-Agent 的訪客,那麼這個組合本身反而成了一個獨特的指紋。這正是為什麼像 Tor 和 Firefox RFP 這類一致化工具會試圖把你放進一個龐大且彼此相同的人群中,而不是讓你變得與眾不同——也是為什麼堆疊大量量身打造的調整,往往弊大於利。一般原則是:寧可選擇隱私瀏覽器那條久經考驗的預設組態,也不要自行拼湊一堆擴充功能。反偵測瀏覽器——整體替換指紋設定檔的工具——將這一悖論推向了極致:偽造的模式本身也會成為特徵,詳見網站如何偵測反偵測瀏覽器與指紋偽造。想了解偵測系統具體依賴哪些信號——TLS、Canvas 雜訊、字型、UA-CH 等——來分辨偽造設定檔與真實裝置,參見反偵測瀏覽器 vs 真實瀏覽器:偵測系統能看到的 12 個信號。
瀏覽器指紋的合法用途
雖然瀏覽器指紋常被用於廣告追蹤,但它也有合法的用途:
| 用途 | 說明 |
|---|---|
| 安全防護 | 檢測帳戶異常登入,防止詐騙 |
| 反爬蟲 | 識別與阻擋自動化程式 |
| 使用者體驗最佳化 | 根據裝置特性最佳化網頁顯示 |
| 版權保護 | 追蹤內容外洩來源 |
其中反爬蟲是技術上最複雜的一項——關於網站如何把自動化流量和真實訪客區分開來(往往正是運用這些相同的指紋訊號),請參閱機器人偵測技術。
常見問題
瀏覽器指紋和 Cookie 是同一回事嗎?
不是。Cookie 是儲存在你裝置上的小型檔案,你可以查看、封鎖或刪除它們。而指紋則是從你的瀏覽器與裝置特徵推導出來的——你這一端不會儲存任何東西,因此清除 Cookie 或換到一個全新的瀏覽器設定檔都無法重設它。這正是指紋比起以 Cookie 為基礎的追蹤更難擺脫的原因。另一種技術——彈跳追蹤——用完全不同的方式繞過 Cookie 封鎖:透過一次重新導向,讓追蹤者自家網域短暫變成第一方,全程不觸及你裝置的任何特徵。還有一種不靠 Cookie 的手法藏在 HTTP 快取本身裡:參見ETag 與快取超級Cookie,了解伺服器如何把普通的快取重新驗證變成一個追蹤識別碼。
無痕或隱私模式能阻止指紋採集嗎?
大致上不能。隱私模式會讓瀏覽器不在本機儲存歷史記錄、Cookie 和網站資料,但它並不會改變指紋所依據的那些特徵——你的螢幕尺寸、字型、Canvas 輸出和 GPU 在隱私視窗裡看起來都一模一樣。網站往往仍能跨越一般工作階段與隱私工作階段認出你。有些網站甚至能直接判斷出你正處於隱私視窗中——背後所利用的儲存 API 手法,可參考網站如何偵測無痕與隱私瀏覽模式。
瀏覽器指紋中哪一部分最具識別性?
這會因情況而異,但算繪類訊號——Canvas 與 WebGL——通常是最難改變的,因為它們源自你的 GPU 與驅動程式,而非某個你能隨手切換的設定。這也讓它們成為防護時最具價值的目標:阻擋或隨機化 Canvas 與 WebGL 的輸出,比起調整你的 User-Agent 或時區,能消除更多獨特性。BrowserInsight 會顯示哪些訊號對你自己瀏覽器的貢獻最大,讓你知道力氣該花在哪裡最值得。
VPN 能阻止瀏覽器指紋採集嗎?
不能。VPN 會改變你的 IP 位址和表面上的所在位置,但指紋是從你的瀏覽器與裝置運算出來的,而非你的網路——無論換到哪個 IP,你看起來都一模一樣。VPN 確實有助於解決以 IP 為基礎的追蹤和 WebRTC 洩漏這些另外的問題,但它對指紋本身毫無作用。還有一種值得了解的相關但不同的技術:TLS 指紋識別——它透過 TLS 握手而非瀏覽器 API 來識別你的客戶端軟體,同樣能穿透 VPN 隧道。
總結
瀏覽器指紋是一種強大而隱蔽的追蹤技術,它利用瀏覽器與裝置的固有特性來識別使用者。了解瀏覽器指紋的運作原理是保護線上隱私的第一步。透過使用 BrowserInsight 等工具檢測你的瀏覽器指紋,並採取適當的防護措施,你可以更好地掌控自己的數位身分。
請記住,完全的匿名在網際網路上是很難實現的,但我們可以透過了解技術與採取適當的措施來最大限度地保護自己的隱私。
推薦閱讀:
- resistFingerprinting:Firefox 與 Tor 反指紋機制
- 指紋一致性:為何訊號矛盾會讓你被標記
- 行動裝置瀏覽器指紋識別:Android 與 iOS 如何被追蹤
- WebRTC 洩漏防護:VPN 使用者的必修課
- WebRTC 指紋技術:編解碼器與 SDP 如何暴露你的瀏覽器
- Canvas 指紋檢測:網站如何識別你的裝置
- 音訊指紋:AudioContext 如何識別你的裝置
- 彈跳追蹤解析:不靠 Cookie 也能追蹤的重新導向手法
- 字型指紋:已安裝字型如何暴露你
- ClientRects 指紋:次像素版面配置如何成為識別碼
- 媒體裝置指紋:enumerateDevices 會洩露什麼
- 語音合成指紋:已安裝語音作為一種訊號
- CSS 指紋技術:無需 JavaScript 也能追蹤你
- Permissions API 指紋:權限狀態如何追蹤你
- Network Information API 指紋:downlink 與 RTT 會洩露什麼

