1532859 - Non-integer devicePixelRatio's cause blurriness with RFPTarget::WindowDevicePixelRatio

Status: NEW

(Core :: DOM: Security, defect, P3)

Description

[lilydjwg]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0

Steps to reproduce:

• set privacy.resistFingerprinting = true in about:config
• visit a Google Spreadsheet document, e.g. https://docs.google.com/spreadsheets/d/19vSPL6z2d50JlyzwxariaYD6EU2QQUQqIDOGbiGQC7Y/edit#gid=0

Actual results:

The text inside the spreadsheet is a little blur.

Expected results:

The text inside the spreadsheet should be as clear as outside (or with privacy.resistFingerprinting = false).

Comment 1

[lilydjwg]

Hey it says Firefox/60.0 but I'm actually using nightly of 20190302. That option took effect when I submitted this bug.

Comment 2

[lilydjwg]

Attachment: using builtin tool with resistFingerprinting disabled

I took screenshots with this option enabled and disabled using the builtin screenshot tool, and found that all text are clear in the screenshot but the two images have different size: the disabled one is 1.5x larger each dimension that the enabled. I've set my monitor to 120dpi, but that's 1.25x than the classic 96 dpi. I have a scaled-up monitor connected, setup with xrander --scale 0.75x0.75.

I'm attaching screenshots from the builtin screenshot tool and an OS tool.

Comment 3

[lilydjwg]

Attachment: using builtin tool with resistFingerprinting enabled

Comment 4

[lilydjwg]

Attachment: using OS tool with resistFingerprinting disabled

Comment 5

[lilydjwg]

Attachment: using OS tool with resistFingerprinting enabled

Comment 6

[Ethan Tseng [:ethan]]

I can reproduce this problem. Tim, do you have any idea why would this happen?

Comment 7

[Daniel Veditz [:dveditz]]

In the first two pictures it's clearly using a different font entirely. We may be disabling downloadable fonts, and the built-in default one is terrible?

Comment 8

[lilydjwg]

I don't think it's a different font, and I don't have such a blurry one in the fonts the page uses. It seems the page incorrectly scales the rendered text, making it blurry. You can see in the second picture all text is blurry, which is not what I see (the last picture).

Comment 9

[Ethan Tseng [:ethan]]

1. Open a Google Spreadsheet in Firefox
2. Open [Tools] > [Inspector] and search "canvas" element.

privacy.resistFingerprinting = false

<canvas style="position: absolute; top: 0px; left: 0px; z-index: 2; width: 1428px; height: 405px; padding-top: 0.183334px; padding-left: 0px;" moz-opaque="" width="2856" height="810" dir="ltr"></canvas>

privacy.resistFingerprinting = true

<canvas style="position: absolute; top: 0px; left: 0px; z-index: 2; width: 1428px; height: 405px; padding-top: 0px; padding-left: 0px;" moz-opaque="" width="1428" height="405" dir="ltr"></canvas>

When resistFingerprinting is turned on, the width and height values in the canvas element are reduced to half.

It seems this effect was caused by bug 418986 (window.screen and CSS media queries provide a large amount of identifiable information). But I am not 100% sure yet.

Comment 10

[Tim Huang[:timhuang]]

Sorry for the late response.

I believe this blur is caused by the spoofing of window.devicePixelRatio when RFP is on: we spoof this value into 1.0. I believe that Window.devicePixelRatio could affect the setting of canvas in Google Spreadsheet [1]. Given that the ratio of 'width' and 'height' between RFP is on and off in comment 9 is 2, could you check the real window.devicePixelRatio value of your testing device, Ethan? I think it should be 2.0.

[1] https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

Comment 11

[lilydjwg]

Hi Tim, I can confirm that my real window.devicePixelRatio corresponds to the ratio of the canvas size changes. (I don't know why it's 1.5 but it is.)

Comment 12

[Bruno Pagani]

This seems similar to https://bugzilla.mozilla.org/show_bug.cgi?id=1428331.

Comment 13

[Ethan Tseng [:ethan]]

(In reply to Tim Huang[:timhuang] from comment #10)

I believe this blur is caused by the spoofing of window.devicePixelRatio when RFP is on: we spoof this value into 1.0. I believe that Window.devicePixelRatio could affect the setting of canvas in Google Spreadsheet [1]. Given that the ratio of 'width' and 'height' between RFP is on and off in comment 9 is 2, could you check the real window.devicePixelRatio value of your testing device, Ethan? I think it should be 2.0.

Sorry for being super late for this response.
Yes, the real devicePixelRatio on my device is 2.

Comment 14

[Ethan Tseng [:ethan]]

Several similar blur issues are caused by spoofing window.devicePixelRatio.
I filed bug 1554751 as a central place to track the investigation and decision-making.

Comment 15

[shizunge]

I got the same problem on wetty which uses xterm.js.

Comment 16

[kcdaglia]

Have the exact same problem with the ESR release 93. weird

Comment 17

[lilydjwg]

Hi, after bug 1554751, Google Spreadsheet text is still a little blurry (and some text has color edges) with GTK's text scale factor=1.25, especially noticeable with Chinese. I would prefer letting the webpage know the real scale of my device (rather than keep resistFingerprinting disabled because of this bug).

Comment 18

[Fatih Kilic [:fkilic] (OOO -> Aug 12)]

What is your actual devicePixelRatio value? What do you see when you run window.devicePixelRatio in console without RFP? I'm not sure what can be done about 1.something/2.something device pixel ratios. The only solution I can think of is, (that is, without disabling devicePixelRatio protection), modifying your resolution and text scale factor until you get a sharp looking result, which is probably not the most ideal solution, but I also can't think of another way to fix blurry text.

I would prefer letting the webpage know the real scale of my device

I was going to suggest using fingerprinting protection with granular overrides instead of resist fingerprinting but I realized that I can't reproduce the issue with fingerprinting protection, it only happens with RFP on my end.

Can you set your prefs accordingly and let me know if it still happens?
Go to about config and set your prefs according:

• privacy.fingerprintingProtection = True
• privacy.fingerprintingProtection.overrides = +AllTargets
• privacy.resistFingerprinting = False

Open the google spreadsheet you mentioned and report if it is still blurry. In theory, both RFP and FPP with +AllTargets should yield the same result, but I don't know what's causing the issue.

I tried manually changing my devicePixelRatio 1.0, and viewing the Rust spreadsheet, and it looks blurry ONLY with RFP, which is quite interesting. devicePixelRatio is also not spoofed with FPP with +AllTargets. So the issue is almost certainly devicePixelRatio protection, but FPP can't control it for some reason. I'll try to find the reason as it might be a bigger issue.

EDIT:

Welp, that's interesting, I can't reproduce FPP v RFP difference now. I'll follow up with a fixed for google spreadsheets since you said "I would prefer letting the webpage know the real scale of my device"

Comment 19

[Fatih Kilic [:fkilic] (OOO -> Aug 12)]

Well, I believe there's something wrong with workers and granular overrides. I'll try to see if I can figure it out. Unfortunately, this means you have to expose your DPI to all websites if you wish to use spreadsheets without blurring.

So, if you want to expose your device pixel ratio, and increase fingerprintability at the cost of sharper texts, you can set your prefs as the following

• privacy.fingerprintingProtection = True
• privacy.fingerprintingProtection.overrides = +AllTargets,-WindowDevicePixelRatio
• privacy.resistFingerprinting = False

Comment 20

[lilydjwg]

I can't reproduce this issue anymore. My devicePixelRatio is 2, and in console it always prints 2. But I find resistFingerprinting causes font size issues on a map site. I'm going to open an issue for that.

Comment 21

[lilydjwg]

Oops, reading my previous comments, I realize that I have no issues with my desktop computer and external screen, but it has issues with my laptop.

devicePixelRatio is 1.25 there (not sure previously, but it's what I'm using now). With privacy.resistFingerprinting = false the text is sharp, no matter what's in privacy.fingerprintingProtection.overrides. So I guess +AllTargets provides more privacy?

Comment 22

[Fatih Kilic [:fkilic] (OOO -> Aug 12)]

With privacy.resistFingerprinting = false the text is sharp, no matter what's in privacy.fingerprintingProtection.overrides

Did you set privacy.fingerprintingProtection = True? Also I have not compared the two, but privacy.resistFingerprinting is supposed to be used by the Tor browser, while privacy.fingerprintingProtection is supposed to be used by Firefox's strict mode or standard mode in private browsing. So my assumption is, privacy.resistFingerprinting would be more aggressive/comprehensive in terms of privacy.

Comment 23

[Fatih Kilic [:fkilic] (OOO -> Aug 12)]

devicePixelRatio is 1.25 there

Yeah so that was my assumption too. Your device has a 1.something device pixel ratio. If it was 1 (or 2), I think it would play nicer with the scaling. Unfortunately, I can't think of solution other than zooming in/out of websites, or changing GTK's scaling factor of 1.25 you mentioned earlier, or changing resolution until you get a sharp looking text (doing one or some of these should bring your device pixel ratio to 1 or 2) IF you don't want to give up on your privacy.

However, based on your previous comment "I would prefer letting the webpage know the real scale of my device," you have the choice to disable this protection alone. To do it, setting your preferences as the following should fix it. Do note that this will affect all websites, so all of the websites will be able to read your real devicePixelRatio (I'm still trying to figure out why website specific overrides don't work for google sheets, if it was working then we could just exempt google sheets from this protection). So, it is totally up to you to decide.

privacy.fingerprintingProtection = True
privacy.fingerprintingProtection.overrides = +AllTargets,-WindowDevicePixelRatio
privacy.resistFingerprinting = False

Comment 24

[lilydjwg]

privacy.fingerprintingProtection = True was set always.

but privacy.resistFingerprinting is supposed to be used by the Tor browser

I didn't know this. I'll stick with this pref off then and use Tor browser when I want max privacy. Being too aggressive breaks websites now and then.... So, this bug can be closed?

Comment 25

[Fatih Kilic [:fkilic] (OOO -> Aug 12)]

It is a matter of preference you may keep privacy.resistFingerprinting enabled if you wish.

I think I want to keep this bug open because all the other bugs related to devicePixelRatio were fixed by changing the previously spoofed value of 1 to 2 because their real devicePixelRatio was also two, but that doesn't account for 1.something 2.something devicePixelRatio's and I assume that's something we'll have to address somehow. Personally, I don't see any solutions, but I'm also not great at graphics/scaling.

There's also another issue with the granular overrides not applying to google sheets, but we already follow worker related issues in other bugs, so I'll just change the title of this bug to non-integer devicePixelRatio's cause blurriness. (technically if your real device pixel ratio is 3 and we spoof it to 2, I think (?) it should also be blurry but this is the easiest way to convey the issue in the title)

Comment 26

[Fatih Kilic [:fkilic] (OOO -> Aug 12)]

Hello,

I got a new update! I didn't find a general solution to devicePixelRatio issue, but you can exempt google from it using the following prefs. It turns out you have to use google.com instead of docs.google.com

privacy.resistFingerprinting = False
privacy.fingerprintingProtection = True
privacy.fingerprintingProtection.overrides = +AllTargets
privacy.fingerprintingProtection.granularOverrides = [{"firstPartyDomain":"google.com","overrides":"-WindowDevicePixelRatio"}]

Comment 27

[lilydjwg]

Yes, it works, thanks!