沒登入網頁也能個人化推薦？一文詳解瀏覽器指紋

{ "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" }}

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()

// 部份程式碼 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) */ }

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

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); } });