I want to stop people from fingerprinting my puppeteer browsers, so Im writing a canvas spoofer. The ideea is to get the actual computted dataURL, and then change a little bit of it and set the changed data. This is the code:
const originalFunction = HTMLCanvasElement.prototype.toDataURL;
const getCanvasProxyHandler = {
apply: function (target, ctx, args) {
const result = utils.cache.Reflect.apply(target, ctx, args)
let canvas_element = ctx.cloneNode()
let canvas_context = canvas_element.getContext("2d")
console.log(0)
let image = new Image()
image.src = result;
canvas_context.drawImage(image, 0, 0)
console.log(1)
let new_result = originalFunction.apply(canvas_element, args)
console.log(2)
return new_result
}
}
utils.replaceWithProxy(HTMLCanvasElement.prototype, 'toDataURL', getCanvasProxyHandler)
It prints 0 and 1 succesfully, but something happens at new_result. Nothing happens, no errors, but no result from toDataURL, and 2 doesn’t print.
I belive it runs in a loop, since it calls toDataURL when Im calling toDataURL, which is why I grab the originalFunction, but even after trying to bind it using
const originalFunction = HTMLCanvasElement.prototype.toDataURL.bind({});
it still doesn’t work
I would want originalFunction.apply(canvas_element, args) to actually work and return something, not timeout