Puppeteer fingerprint simulation

Question

By doing tests I am faced with JavaScript fingerprinting such like:

• audio context fingerprinting
• opengl fingerprinting
• canvas fingerprinting
• installed fonts fingerprinting
• installed plugins fingerprinting
• webrtc

I want to replace the results of the fingerprinting with simulated results.

How do fingerprints work and how can I simulate/fake the fingerprinting results?

Housefather

What do you mean by "outputing specific values"? Are you looking for a collection of fingerprints or do you want to know how fingerprints work? – Cila

I know what is this. I'm asking how to change fingerprint outputs from headless browser that are used in puppeteer. For example webgl fp: browserleaks.com/webgl or canvas fp: browserleaks.com/canvas . I found that are exist some plugins that can make unique fp, for example "CanvasFingerPrintBlock" or AudioContext Fingerprint Defender". Is is possible to run such plugins or make tweaks so fingerprint will be unique? – Housefather

It could be helpful to get know how fingerprinting works in headless browser and if there are colletion of fp's exist - is it possible to change fp to one from collection? How to manage this? Thanks – Housefather

I see, I added an answer showing an example how these kind of fingerprints work. – Cila

@Housefather Did you find proper solution? Can you share it? Have you considered to run puppeter in a different docker container with different configurations/fonts etc? – Rumble

@Rumble that exactly what I want to achieve but did not really have tested yet. Thomas Dondorf answer below was really an example of mechanism, you can find how Chrome report other fingerprints in chrome extensions such as WebGL/Font/etc Fingerprint Defender. But I could not found any framework or tool to work with all fingerprints. – Housefather

Answer 1

To change the outcome of these fingerprints, you have to understand how they work. Let's look at an example: The Canvas Fingerprint of browserleaks.com.

How it works

The website will use the browser APIs to produce a Canvas image by painting some text into a canvas. The fingerprint slightly varies in different browsers and machines due to differences in how the rendering is done. For more details check out the "How does it work" part of the page.

Simulate (or fake) the fingerprint

To change the fingerprint, you need to check out which APIs the fingerprint JavaScript of the page is using and replace them with a adapted version.

Code Sample

The following code, replaces the native HTMLCanvasElement.prototype.toDataURL function with a custom function (before any other code is executed on the page). If the function detects that the website is painting an image with a width of 220px and a height of 30px, it returns a fake fingerprint. Otherwise, it runs the original toDataURL function to not mess with any other functionality.

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

Result

Below is the screenshot of the page. Normally, the page would display an image of the fingerprint, but in our case it shows the "Fake Fingerprint" instead. That way, we tricked the page into thinking this is the fingerprint of our browser.

How other fingerprint methods work

Other fingerprint methods work similar. They call existing browser APIs and create a fingerprint based on the results. By replacing all used functions, you could change the fingerprint of the browser. This is a lot of work though, as you have to check how the website is using the APIs and then come up with functions to replace these.

Cila

Great answer, but can't a website tell that it wasnt their image used for the fingerprint or that it is faked? – Kiehl

@Kiehl The whole point of the fingerprint is that the image is different for different browsers and systems. But yes, if the image is too different (like my example image) then it's trivial to detect. That's why in reality you should not use the "Fake fingerprint" image I used and rather copy an image from the browser you are trying to imitate or create an image with Photoshop on your own that looks similar. – Cila

Thank you for taking the time to get back to me. Chance-wise speaking, wouldn't manually changing the image a tiny bit result in a very unique fingerprint because it's unlikely that any other device will ever legitimately produce the image in that way? Wouldn't the best choice be to take a few of the most commonly used PC's, use them to create the fingerprint image, and then just use those images instead? Or am I misunderstanding this? – Kiehl

@Kiehl It depends on what your goal is. If you want a unique fingerprint, you should create one on your own. If you are trying to imitate an existing browser, it's best to copy the fingerprint from that browser. – Cila