詳解瀏覽器指紋

什麼是瀏覽器指紋

瀏覽器指紋可以通過瀏覽器對網站可見的配置、設置信息，來跟蹤 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/Tracking...]》中更是詳細研究了各個指標的信息熵和穩定性。

從該論文中可以看出，時區、屏幕分辨率和色深、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 接口描述了<Canvas>元素的一個隱含像素數據的區域，可以由 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所生成的CanvasRenderingContext2D
  const 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 的各個函數來阻止網站獲取各種信息，或返回一個假的數據，以此來保護我們的隱私信息。

詳解瀏覽器指紋

什麼是瀏覽器指紋

指紋採集

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

Visual Studio Code 1.76 發佈

【轉】3個容易混淆的前端框架概念

給數字添加千位分隔符

編程語言70年：誰是世界上最好的編程語言？

探討 React Native 的未來：它可能不再是最佳選擇

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結