Puppeteer 指纹模拟

Question

通过进行测试，我面临着 JavaScript 指纹识别，例如：

• 音频上下文指纹
• opengl指纹识别
• 画布指纹
• 安装字体指纹
• 已安装的插件指纹
• 网页版

我想用模拟结果替换指纹识别的结果。

指纹如何工作以及如何模拟/伪造指纹结果？

Answer 1

要改变这些指纹的结果，您必须了解它们的工作原理。让我们看一个例子：browserleaks.com的Canvas 指纹。

这个怎么运作

该网站将使用浏览器 API 通过将一些文本绘制到画布中来生成画布图像。由于渲染方式的不同，指纹在不同的浏览器和机器上略有不同。有关更多详细信息，请查看页面的“它是如何工作的”部分。

模拟（或伪造）指纹

要更改指纹，您需要检查页面的指纹 JavaScript 正在使用哪些 API，并将它们替换为适配版本。

代码示例

以下代码HTMLCanvasElement.prototype.toDataURL使用自定义函数替换本机函数（在页面上执行任何其他代码之前）。如果该函数检测到该网站正在绘制宽度为220px和高度为的图像30px，则会返回一个假指纹。否则，它会运行原始toDataURL函数，以免干扰任何其他功能。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    await page.evaluateOnNewDocument(() => {
        const originalFunction = HTMLCanvasElement.prototype.toDataURL;
        HTMLCanvasElement.prototype.toDataURL = function (type) {
            if (type === 'image/png' && this.width === 220 && this.height === 30) {
                // this is likely a fingerprint attempt, return fake fingerprint
                return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAeCAAAAABiES/iAAACeElEQVRYw+2YzUtUURjGf47OmDPh5AyFomUiEeEmyghXtWsh4dcswlYV2KYWfZh/QRBUVLhTCCJXEgmKUCIkFhJREARBkbkyKBlTRmUC82lxZ7z3TjM4whwXwz2ry3vO87znx33Pey4XFfHAg/PgPDgPzoPz4Dy4rFIKscSkAfmnsUY+iTfXFhxue4Zm4QpfaKbg8k+EsZNsGG6iNVzRMrkZeRPmjp6eCgcae5f+3wJIgtWLldG+DUnfzoail1etaVsEa1f2lUqw2hPd3T7nCrkMtlkQ24YDwP8+FZkI+gY3uq2cTcu54GIA/dJCDUAnSE4RdAESdALUxZ0hl4E5OMs49iE528E5a+cj5YFhDVI3vLA2c4K+zLXpvR37tNRDs3STg1OJqXqQSwS14wlJUD+VeHWAW86Qy8BwQ5Ek/WK/JBgqC72UTvJakmY5lAvurTRPSDrMmKRRcIvgeUo2KmmEI86Qy8DwmVu/ezQIBCSBLzwjKZhujv5cZZmUNkAq57ekRXCLYDG12pre5Qy5DAzDXbPfIOB/JqmCzNafCZd+dMA5RfZxdsBlNTAMF+FJfD2eSvSI0iGpmXe5GnbG3qyyHAO3yCZxlGV2uBLWDcJVMZKc7UrnfIBvQI+pHpxbS34ZaNkK7gYN0yvTDSCXyCZxNJTscFFe/DUH1w3QvpnzPiUPdTXfsvxZDdBGmeQU2SQd9lWQHS5m9J6Ln4/suZCwc96D25qM1formq5/3ApOX1uDkZ7P7JXkENkkK5eqQm3flRtuvitSYgCucKOf0zv01bazcG3Tyz8GKukvSjjrlB3/U5Rw42dqAo29yypKOO8figeX1/gH+zX9JqfOeUwAAAAASUVORK5CYII=';
            }
            // otherwise, just use the original function
            return originalFunction.apply(this, arguments);
        };
    });
    await page.goto('https://browserleaks.com/canvas');
})();

结果

下面是页面截图。通常，页面会显示指纹图像，但在我们的例子中，它显示的是“假指纹”。这样，我们就欺骗了页面，使其认为这是我们浏览器的指纹。

其他指纹方法的工作原理

其他指纹方法的工作原理类似。他们调用现有的浏览器 API 并根据结果创建指纹。通过替换所有使用的功能，您可以更改浏览器的指纹。不过，这是一项大量工作，因为您必须检查网站如何使用 API，然后提出替换这些 API 的功能。