什么是瀏覽器指紋
瀏覽器指紋可以通過瀏覽器對網站可見的配置、設置信息,來跟蹤 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])
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
vertexPosBuffer.itemSize = 3
vertexPosBuffer.numItems = 3
var program = gl.createProgram()
var vshader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vshader, vShaderTemplate)
gl.compileShader(vshader)
var fshader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fshader, fShaderTemplate)
gl.compileShader(fshader)
gl.attachShader(program, vshader)
gl.attachShader(program, fshader)
gl.linkProgram(program)
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) {
}
如何防止被生成“用戶指紋”
文章開頭也提到了,很多人對瀏覽器這項技術是又愛又恨。因為一大堆網站使用各種技術來“生成”用戶指紋,以便給網站用戶帶來更精準的推薦和符合用戶的瀏覽習慣。而用戶在享受技術帶來便利的同時,也不免會有“隱私泄露”的焦躁和不安感。那么我們如何防止被生成“用戶指紋”呢?
混淆 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;
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);
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);
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function() {
if (script.dataset.active === 'true') {
try {
this.manipulate();
}
catch(e) {
console.warn('manipulation failed', e);
}
}
return toBlob.apply(this, arguments);
}
});
Object.defineProperty(HTMLCanvasElement.prototype, 'toDataURL', {
value: function() {
if (script.dataset.active === 'true') {
try {
this.manipulate();
}
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 的各個函數來阻止網站獲取各種信息,或返回一個假的數據,以此來保護我們的隱私信息。