Include intercepted canvas attempts in the site summary

[michaelmcleodnz]

Summary

Canvas fingerprinting protection has recently been added to this extension, and if I understand correctly, this intercepts attempts to use Canvas APIs like getImageData. What I really like about this extension is that it has a summary of all the trackers it has blocked on a site, but I see nothing in the summary indicating that Canvas APIs have been intercepted. That means that it looks like the extension has made no changes to the website, but really it has.

Motivation

I recently noticed a problem with text-rendering in Phaser that turned out to be because Phaser reads Canvas APIs to determine the size of text before it positions it, and this extension was causing those APIs to return incorrect data. It was harder to diagnose because the extension didn't report that it was doing anything on the site.

This would also help diagnose other issues that are caused by this interception, such as the ones with Konva.js.

Additional context

Priority: This feature isn't critical itself, but I feel that being able to fix issues caused by the fingerprint protection code is critical, and this is one way of helping catch and fix those issues.

Impact: Anyone who is trying to use sites that legitimately manipulate canvas could potentially benefit from knowing that this extension is interfering with those attempts.

[jonathanKingston]

Thanks for the detailed description, I think that's a good idea to expose that fingerprint resistance is enabled. I'll talk with our UX folk and see if there's anything we can do here.

The issue highlights the same in Brave and Tor which makes a lot of sense, perhaps we could surface when a site is doing this using the badging api from extensions perhaps.

[drecali]

@jonathanKingston I just wanted to mention another use case to consider for the UX/UI. My company makes a precision medical annotation tool. Users paint areas of the canvas to annotate clinically-relevant features of the medical image. In our case, it's important that annotations include only specified RGB values.

This extension adds a seemingly random number of pixels that add 1 value to each RGB channel. I included screenshots showing a summary of the RGBA values on the canvas after the same 3 annotations with and without the extension. I didn't know about canvas fingerprinting but as I learned about it I understood why you'd want to mitigate that privacy risk. However, it might help to include a tooltip or something that informs the user about this feature and enables them to disable it (temporarily or permanently) or whitelist that particular site if canvas pixel accuracy is important for their use case. Another option could be to overlay an actionable button with half-opacity in the corner of every canvas. When the user hovers, it can give details about the canvas fingerprinting protection, when that protection could impact work, an option to turn it off when needed, and maybe an option to never show that button forever or for X days. I imagine people are likely to hide the button without reading the description, and then they wouldn't know what's causing precision canvas issues. Did you have a chance to consult with the UX/UI people yet?

I realize this sounds like a bit of an edge case, but troubleshooting it was quite difficult because no one on our team knew that an extension could/would alter canvas data, so we it wasn't one of the first things we asked. From now on, we'll ask for a list of installed extensions at the start of troubleshooting, but I wonder how many other precision canvas use cases are silently impacted by this feature.

Stock Chrome	DuckDuckGo extension

[jonathanKingston]

Thanks for the detailed explanation @drecali!

We do already allowlist certain sites due to breakage when they reach a certain level of severity. Do you have anything I can investigate @drecali in terms of URLs of the scripts with this issue? (jkingston [@] duckduckgo.com if you need this to be private)

• Additionally for certain APIs calls we allowlist the usage and provide a path through the code that ignores the protection; it may be for your code we could do the same if there's only these small number of colours needed.
  • Largely the values that differ between rendering engines are where anti-aliasing provides different values of artefacts rendered, if you're only ever seeing fixed values it should be safe to also disable protections.
• As you can see from the return values we only modify pixels by one bit on each channel this may however change overtime; however for now these should all correlate to the same fixed value.

I think we would prefer not to complicate the user with exposing details of our implementation (our motto is 'privacy simplified') however we could consider adding a console warning for the first modification of canvas data on the page to assist developers looking into the issue.