Overriding Canvasrenderingcontext2d.getimagedata()

I am trying to override the built in method CanvasRenderingContext2D.getImageData(). I would like to override the implementation so that the modified function uses the canvas conte

Solution 1:

You are returning a new empty ImageData object.

I guess what you want is to return the filled one. Since you already modified the data array, you can simply return the original ImageData, your modifications will have been made.

// shortened version
(function(){
 const ori = CanvasRenderingContext2D.prototype.getImageData;
 CanvasRenderingContext2D.prototype.getImageData = function(){
  let imageData = ori.apply(this, arguments);
  // modify the Uint8Array
  imageData.data.forEach((v, i, a) => a[i]+=1);
  // return the now modified ImageDatareturn imageData;
  };
 })()
 
var ctx = document.createElement('canvas').getContext('2d');
console.log(ctx.getImageData(0,0,1,1));

If you really want to create a new ImageData, then it's

new ImageData(imageData, image.width, image.height);
//             ^^//           pass the data to fill the new ImageData object

But note that browser support is not great, and that you won't win anything by doing so.

Solution 2:

You can not remove the fingerprint.

For more The Web never forgets

You can not circumvent fingerprinting. The best you can do is return the most common fingerprint (which is not easily ascertained) increasing the set of devices you may belong to.

Returning a random set of pixels (or incrementing each pixel channel by one) is about the worst you can do if you are the only one doing it. It would absolutly mark your browser as unique and would let traking software know that the browser that returns changed data is just one, or one of a very small set.

The best way to stop fingerprinting is via a common and widely adopted data return strategy. If every browser returned all zero (transparent black) then there would be no uniqueness and thus no way to track the device based on the canvas.

Canvas fingerprinting is only part of a fingerprint, there are many more sources of data the help identify a device. The browser, browser version, OS, OS version, screen resolution, and a long list of others. Even if you eliminate the canvas as a source of uniqueness it is pointless unless you do the same with the rest of the information.

Mitigation

So with that said the code to return zeroed data is as follows.

(function () {
    if (window.CanvasRenderingContext2D) {
        const gid = CanvasRenderingContext2D.prototype.getImageData;
        CanvasRenderingContext2D.prototype.getImageData = function (x, y, w, h) {
            var data = gid.bind(this)(x, y, w, h);
            data.data.fill(0);  // fill with zeroreturn data;
        }
        // Token way to avoid JS from finding out that you have overwritten the prototype overwrite// the toString method as well (note ctx.getImageData.toString.toString() will// still show you have changed the prototype but over writing Object.toSting is not worth the problems)CanvasRenderingContext2D.prototype.getImageData.toString = function () {
            return"function getImageData() { [native code] }";
        }
    }
}());