日常生活中，生物識別技術已經是多數智能手機的標配，大多數手機具備人臉識別、指紋識別等功能，目前的指紋識別技術已經非常成熟。但我們今天要聊的并不是生物識別技術中的指紋識別，而是瀏覽器指紋。很多人對這項技術是又愛又恨，這究竟是為什么呢？那我們今天就來深入了解下瀏覽器指紋。

什么是瀏覽器指紋

瀏覽器指紋可以通過瀏覽器對網站可見的配置、設置信息，來跟蹤 Web 瀏覽器，它就像我們人手上的指紋一樣，具有個體辨識度，只不過現階段瀏覽器指紋辨別的是瀏覽器。

瀏覽器指紋辨識的信息可以是 UA、時區、地理位置或者是使用的語言等等，瀏覽器所開發的信息決定了瀏覽器指紋的準確性。

對于網站而言，拿到瀏覽器指紋并沒有實際價值，真正有價值的是瀏覽器指紋對應的用戶信息。作為網站站長，收集用戶瀏覽器指紋并記錄用戶的操作，是一個有價值的行為，特別是針對沒有用戶身份的場景。

例如一個視頻網站，未注冊該網站的用戶 A 喜歡瀏覽二次元的視頻，通過瀏覽器指紋記錄這個，那么下次可以直接向該瀏覽器推送二次元的視頻。因為現在的上網設備大都是私人的，這樣的推送方式很容易獲得大部分用戶的好感，從而使之成為網站的用戶。

瀏覽器指紋的發展

瀏覽器指紋技術的發展跟大多數技術一樣，并非一蹴而就的，現有的幾代瀏覽器指紋技術是這樣的：

• 第一代是狀態化的，主要集中在用戶的 cookie 和 evercookie 上，需要用戶登錄才可以得到有效的信息。

• 第二代才有了瀏覽器指紋的概念，通過不斷增加瀏覽器的特征值從而讓用戶更具有區分度，例如 UA、瀏覽器插件信息等

• 第三代是已經將目光放在人身上了，通過收集用戶的行為、習慣來為用戶建立特征值甚至模型，可以實現真正的追蹤技術。但是目前實現比較復雜，依然在探索中。

目前瀏覽器指紋的追蹤技術可以算是進入 2.5 代，這么說是因為跨瀏覽器識別指紋的問題仍沒有解決。

指紋采集

信息熵（entropy）是接收的每條消息中包含的信息的平均量，信息熵越高，則能傳輸越多的信息，信息熵越低，則意味著傳輸的信息越少。

瀏覽器指紋是由許多瀏覽器的特征信息綜合起來的，其中特征值的信息熵也不盡相同。因此，指紋也分為基本指紋和高級指紋。

基本指紋

基本指紋就是容易被發現和修改的部分，如 http 的 header。

{ "headers": { "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3", "Accept-Encoding": "gzip, deflate, br", "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8", "Host": "httpbin.org", "Sec-Fetch-Mode": "navigate", "Sec-Fetch-Site": "none", "Sec-Fetch-User": "?1", "Upgrade-Insecure-Requests": "1", "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"}}

除了 http 中拿到的指紋，還可以通過其他方式來獲得瀏覽器的特征信息，例如：

• 每個瀏覽器的UA

• 瀏覽器發送的 HTTP ACCEPT 標頭

• 瀏覽器中安裝的瀏覽器擴展/插件，例如 Quicktime，Flash，Java 或 Acrobat，以及這些插件的版本

• 計算機上安裝的字體。

• 瀏覽器是否執行 JavaScript 腳本

• 瀏覽器是否能種下各種 cookie 和 “super cookies”

• 是否瀏覽器設置為“Do Not Track”

• 系統平臺（例如 Win32、Linux x86）

• 系統語言（例如 cn、en-US）

• 瀏覽器是否支持觸摸屏

拿到這些值后可以進行一些運算，得到瀏覽器指紋具體的信息熵以及瀏覽器的 uuid。

這些信息就類似人類的體重、身高、膚色一樣，有很大的重復概率，只能作為輔助識別，所以我們需要更精確的指紋來判斷唯一性。

高級指紋

普通指紋是不夠區分獨特的個人，這時就需要高級指紋，將范圍進一步縮小，甚至生成一個獨一無二的跨瀏覽器身份。

用于生產指紋的各個信息，有權重大小之分，信息熵大的將擁有較大的權重。

在論文《Cross-Browser Fingerprinting via OS and Hardware Level Features [http://yinzhicao.org/TrackingFree/crossbrowsertracking_NDSS17.pdf]》中更是詳細研究了各個指標的信息熵和穩定性。

從該論文中可以看出，時區、屏幕分辨率和色深、Canvas、webGL 的信息熵在跨瀏覽器指紋上的權重是比較大的。下面我們就來看看這些高級指紋都包含了些什么信息。

Canvas 指紋

Canvas 是 HTML5 中的動態繪圖標簽，也可以用它生成圖片或者處理圖片。即便使用 Canvas 繪制相同的元素，但是由于系統的差別，字體渲染引擎不同，對抗鋸齒、次像素渲染等算法也不同，Canvas 將同樣的文字轉成圖片，得到的結果也是不同的。

實現代碼大致為：在畫布上渲染一些文字，再用 toDataURL 轉換出來，即便開啟了隱私模式一樣可以拿到相同的值。

function getCanvasFingerprint () { var canvas = document.createElement('canvas'); var context = canvas.getContext("2d"); context.font = "18pt Arial"; context.textBaseline = "top"; context.fillText("Hello, user.", 2, 2); return canvas.toDataURL("image/jpeg"); } getCanvasFingerprint()

流程很簡單，渲染文字，toDataURL 是將整個 Canvas 的內容導出，得到值。

WebGL 指紋

WebGL（Web圖形庫）是一個 JavaScript API，可在任何兼容的 Web 瀏覽器中渲染高性能的交互式 3D 和 2D 圖形，而無需使用插件。WebGL 通過引入一個與 OpenGL ES 2.0 非常一致的 API 來做到這一點，該 API 可以在 HTML5 元素中使用。這種一致性使 API 可以利用用戶設備提供的硬件圖形加速。網站可以利用 WebGL 來識別設備指紋，一般可以用兩種方式來做到指紋生產：

WebGL 報告——完整的 WebGL 瀏覽器報告表是可獲取、可被檢測的。在一些情況下，它會被轉換成為哈希值以便更快地進行分析。

WebGL 圖像 ——渲染和轉換為哈希值的隱藏 3D 圖像。由于最終結果取決于進行計算的硬件設備，因此此方法會為設備及其驅動程序的不同組合生成唯一值。這種方式為不同的設備組合和驅動程序生成了唯一值。

可以通過 Browserleaks test 檢測網站來查看網站可以通過該 API 獲取哪些信息。

產生WebGL指紋原理是首先需要用著色器（shaders）繪制一個梯度對象，并將這個圖片轉換為Base64字符串。然后枚舉WebGL所有的拓展和功能，并將他們添加到Base64字符串上，從而產生一個巨大的字符串，這個字符串在每臺設備上可能是非常獨特的。

例如fingerprint2js庫的 WebGL 指紋生產方式：

// 部分代碼 gl = getWebglCanvas() if (!gl) { return null } var result = [] var vShaderTemplate = 'attribute vec2 attrVertex;varying vec2 varyinTexCoordinate;uniform vec2 uniformOffset;void main(){varyinTexCoordinate=attrVertex+uniformOffset;gl_Position=vec4(attrVertex,0,1);}' var fShaderTemplate = 'precision mediump float;varying vec2 varyinTexCoordinate;void main() {gl_FragColor=vec4(varyinTexCoordinate,0,1);}' var vertexPosBuffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer) var vertices = new Float32Array([-0.2, -0.9, 0, 0.4, -0.26, 0, 0, 0.732134444, 0]) // 創建并初始化了Buffer對象的數據存儲區。 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW) vertexPosBuffer.itemSize = 3 vertexPosBuffer.numItems = 3 // 創建和初始化一個WebGLProgram對象。 var program = gl.createProgram() // 創建著色器對象 var vshader = gl.createShader(gl.VERTEX_SHADER) // 下兩行配置著色器 gl.shaderSource(vshader, vShaderTemplate) // 設置著色器代碼 gl.compileShader(vshader) // 編譯一個著色器，以便被WebGLProgram對象所使用var fshader = gl.createShader(gl.FRAGMENT_SHADER) gl.shaderSource(fshader, fShaderTemplate) gl.compileShader(fshader) // 添加預先定義好的頂點著色器和片段著色器 gl.attachShader(program, vshader) gl.attachShader(program, fshader) // 鏈接WebGLProgram對象 gl.linkProgram(program) // 定義好的WebGLProgram對象添加到當前的渲染狀態 gl.useProgram(program) program.vertexPosAttrib = gl.getAttribLocation(program, 'attrVertex') program.offsetUniform = gl.getUniformLocation(program, 'uniformOffset') gl.enableVertexAttribArray(program.vertexPosArray) gl.vertexAttribPointer(program.vertexPosAttrib, vertexPosBuffer.itemSize, gl.FLOAT, !1, 0, 0) gl.uniform2f(program.offsetUniform, 1, 1) // 從向量數組中繪制圖元 gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertexPosBuffer.numItems) try { result.push(gl.canvas.toDataURL()) } catch (e) { /* .toDataURL may be absent or broken (blocked by extension) */ }

如何防止被生成“用戶指紋”

文章開頭也提到了，很多人對瀏覽器這項技術是又愛又恨。因為一大堆網站使用各種技術來“生成”用戶指紋，以便給網站用戶帶來更精準的推薦和符合用戶的瀏覽習慣。而用戶在享受技術帶來便利的同時，也不免會有“隱私泄露”的焦躁和不安感。那么我們如何防止被生成“用戶指紋”呢？

混淆 Canvas 指紋

我們已經了解了是如何獲取 canvas 指紋的，那么應該如何防范被惡意獲取呢？想混淆 Canvas 指紋，只需要在 toDataURL 得到的結果上做手腳就可以。

toDataURL() 將整個canvas的內容導出，我們需要將 Canvas 中的部分內容修改，這個時候可以通過 getImageData() 復制畫布上指定矩形的像素數據，然后通過 **putImageData()**將圖像數據放回，然后再使用 toDataURL() 導出的圖片就有了差異。

CanvasRenderingContext2D.getImageData() 返回一個ImageData對象，用來描述 Canvas 區域隱含的像素數據。這個區域通過矩形表示，起始點為(sx, sy)、寬為sw、高為sh。

ImageData 接口描述了元素的一個隱含像素數據的區域，可以由 ImageData() 方法構造，或者由canvas 在一起的 CanvasRenderingContext2D 對象的創建方法：createImageData() 和 getImageData()。

ImageData 對象存儲著canvas對象真實的像素數據，它包含幾個只讀屬性：

• width 圖片寬度，單位像素

• height 圖片高度，單位像素

• data

Uint8ClampedArray 類型的一位數組，包含著 RGBA 的整型數據，范圍在 0~255。它可以視作初始像素數據，每個像素用 4 個 1 bytes 值（按照 red、green、blue、alpha 的順序），每個顏色值用0~255 中的數字代表。每個部分被分配到一個數組內的連續索引，左上角第一個像素的紅色部分，位于數組索引的第 0 位。像素從左到右從上到下被處理，遍歷整個數組。

Unit8ClampedArray 包含 高度寬度4 bytes數據，索引值從 0 ~ (wh4)-1 。

例如，讀取圖片中位于第 50 行，200 列的像素的藍色部分，則：

const blueComponent = imageData[50*(imageData.width * 4) + 200*4 + 2]

下面是實現混淆 Canvas 指紋的方法：

const toBlob = HTMLCanvasElement.prototype.toBlob; const toDataURL = HTMLCanvasElement.prototype.toDataURL; HTMLCanvasElement.prototype.manipulate = function() {const {width, height} = this;// 拿到在進行toDataURL或者toBlob前的canvas所生成的CanvasRenderingContext2Dconst context = this.getContext('2d'); const shift = {'r': Math.floor(Math.random() * 10) - 5,'g': Math.floor(Math.random() * 10) - 5,'b': Math.floor(Math.random() * 10) - 5};const matt = context.getImageData(0, 0, width, height);// 對getImageData生成的imageData（像素源數據）中的每一個像素的r、g、b部分的值進行進行隨機改變從而生成唯一的圖像。for (let i = 0; i < height; i += Math.max(1, parseInt(height / 10))) {for (let j = 0; j < width; j += Math.max(1, parseInt(width / 10))) {const n = ((i * (width * 4)) + (j * 4));matt.data[n + 0] = matt.data[n + 0] + shift.r; // 加上隨機擾動matt.data[n + 1] = matt.data[n + 1] + shift.g;matt.data[n + 2] = matt.data[n + 2] + shift.b;}}context.putImageData(matt, 0, 0); // 重新放回去 // 修改prototype.toBlob Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {value: function() {if (script.dataset.active === 'true') {try {this.manipulate(); // 在每次toBlob前，先混淆下ImageData}catch(e) {console.warn('manipulation failed', e);}}return toBlob.apply(this, arguments);} }); // 修改prototype. toDataURL Object.defineProperty(HTMLCanvasElement.prototype, 'toDataURL', {value: function() {if (script.dataset.active === 'true') {try {this.manipulate(); // 在每次toDataURL前，先混淆下ImageData}catch(e) {console.warn('manipulation failed', e);}}return toDataURL.apply(this, arguments);} });

混淆其他指紋

與前面混淆canvas指紋混淆的思路是一致的，都是更改被獲取對象的原型的方法。

比如混淆時區，就是更改 Date.prototype.getTimezoneOffset 的返回值。

混淆分辨率則是更改documentElement.clientHeight documentElement.clientWidth

混淆 WebGL 則要更改 WebGLbufferData getParameter方法等等。

當然，我們也有一些簡單的方法來防止被生成用戶指紋。例如我們可以通過瀏覽器的擴展插件（Canvas Blocker、WebGL Fingerprint Defender、Fingerprint Spoofing等），在網頁加載前執行一段 JS 代碼，更改、重寫 JS 的各個函數來阻止網站獲取各種信息，或返回一個假的數據，以此來保護我們的隱私信息。

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的没登录网页也能个性化推荐？一文详解浏览器指纹的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。