canvas(帆布)指纹添加噪点反爬

canvas指纹介绍

Canvas指纹脚本会利用浏览器的Canvas API，通过绘制一些特定的图形和测量图形的尺寸来生成一个唯一的Canvas指纹。这个指纹可以包含浏览器类型、分辨率、插件、字体等信息。

代码实现：

function getCanvasId() { 
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var txt = 'www.xxx.com';
    ctx.textBaseline = "top";
    ctx.font = "14px 'Arial'";
    ctx.textBaseline = "tencent";
    ctx.fillStyle = "#f60";
    ctx.fillRect(125,1,62,20);
    ctx.fillStyle = "#069";
    ctx.fillText(txt, 2, 15);
    ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
    ctx.fillText(txt, 4, 17);
    console.log(canvas.toDataURL())
}

结果：

这里当我们条用canvas.toDataURL()转换base64，它会获取用户设备，操作系统，浏览器，三合一的唯一标识，除非其他用户这三个信息和你是一样的才会生成一样的canvas指纹，但是这样的概率是相当低的。可以通过下面网站查看自己的canvas唯一性。

画布指纹识别 - BrowserLeakshttps://browserleaks.com/canvas

canvas指纹防止检测

这里通过重写Node canvas.getContext() 随机添加人眼看不到的噪点，进而随机改变canvas指纹。代码如下：

// npm install canvas
const {Canvas} = require('canvas')

// 指定范围内的随机整数
function randInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

//重写 Node Canvas 添加噪点
class myCanvas {
    constructor() {
        this.CanvasNode = new Canvas();
    }

    getContext() {
        this.width && (this.CanvasNode.width = this.width);
        this.height && (this.CanvasNode.height = this.height);
        let ctx = this.CanvasNode.getContext.apply(this.CanvasNode, arguments);
        // 添加噪点，干扰指纹
        if (this.width && this.height) {
            for (let i = 0; i < randInt(20, 80); i++) {
                let color = Math.floor(Math.random() * 150);
                ctx.fillStyle = "rgba(" + color + "," + color + "," + color + ",1)";
                ctx.fillRect(randInt(0, this.CanvasNode.width), randInt(0, this.CanvasNode.height), 0.2, 0.2)
            }
        }
        return ctx
    }

    toDataURL() {
        return this.CanvasNode.toDataURL()
    }
}

然后再次获取canvas指纹，可以发现每次canvas.toDataURL()得到的base64图片链接都是不一样的，但是浏览器打开，我们通过人的肉眼是看不出有任何变化的。

如有侵权请联系删除！