1867335 - Firefox shows autofill dropdown when input is in `opacity: 0` layer

Status: NEW

(Toolkit :: Form Autofill, defect, P3)

Description

[ISHIKAWA, Chiaki]

Attachment: Under linux, a suggestion to log into the site using google account is shown.

This sounds so bizarre.
And be careful, the site in question could be a phishing site to siphon e-mail account information and phone nubmers from the browser via hitherto unknown bug. But I doubt it.
Still it is very uncomfortable that my e-mail addresses and A TELEPHONE number is shown even for a second or so. (I am afraid that it can be shown much longer under program control. Shoulder surfing will be easy in a cafe or other public places.)

Here is a fact that prompted my post here.

I visited a site found in Facebook post using Firefox under windows 10.
I post the site URL at the end.
CAUTION: Don't click on the site until you read the gory details.

When I visited it (the page is very darkish), I thought I saw a strange white rectangular box floating on the screen before the screen is filled with the images from the web site.

I thought something was strange and I re-visited the site.

A real surprise!
I noticed that the white rectangle inside the FF window shown in the dark background contained my e-mailes address AND my smartphone TELEPHONE NUMBER.
Whoa?

I had to check further.
On my Linux PC, where I use FF occasionally (but I don't think I have stored my google e-mail accounts, etc. there), I notice that the visit to the website results in a suggestion box that is shown on the screen that says (in Japanese. I am using Japanese locale) that you can log into the site using google account. (It says, you don't have to remember the password.)
I am attaching the screen on Linux version to this post.

So I thought maybe the Windows version somehow fails to show this
suggestion to let me login to use the google e-mail addresses into the site.
And usually, such a prompt shows the list of available google e-mail addresses.
(Why the telephone number was there is beyond me. Have I used the telephone number to be the account name in Google service?
I don't think so. But who knows.
Well, at least when I search for my telephone number in the remembered login account/password from the tools menu of FF, I could not find it. So if the number is fetched from somewhere, it must be from some remembered cookie or local storage of JavaScript.

I am going to show the screen of Windows 10 which was captured by screen capture program in the next attachment. (with properly hidden addresses and a telephone number)
Strange thing is that while the white rectangle is shown on the screen, the image of the site, except for the menu bar near the top is gone, it's black.
So the white rectangle was quite visible for a second.

What is causing this display?

As I mention above, FF may be trying to list the google e-mail addresses, but

• a suggestion to login using google account is not shown under Windows 10 although it was shown on linux PC, and
• I wonder why a telephone number is in the list in the white rectangle that disappear after a second or so. My telephone number is NOT a google e-mail address name (or is it?)

It seems very fishy.
I wonder if someone can explain this as a programming mistake that occurs under Windows 10 only.

But at the same time, I do get suspicious that someone is trying to obtain information from cookies (but the-same-origin principle should preclude the access to google cookies?) and/or java storage very earnestly for private information gathering.

I am reporting this as security issue. And I think we better keep it that way until someone figures out why such a display of google e-mail addresses and a telephone number occurred.

The site in question was:
https://www.artstation.com/artwork/J9RzVa
I tried to record it using webarchive, but failed. Maybe there is a robots.txt or something that made webarchive not to try to crawl the URL.
So the next time you visit the website, you may not see it...
At least, it has been reproducible for the last few hours.

EDIT: Fixed a few typos and the initial misconception that the e-mail addresses shown were all googles. There is one non-google e-mail address, so my initial theory that FF is tricked into divulging google e-mail address was wrong, I think.

Comment 1

[ISHIKAWA, Chiaki]

Attachment: A white rectangle with three e-mail addresses on separate lines and a telephone number on the second line appears.

When I visit the site in question using FF under Windows 10,
a white rectangle appears for a second or so.
Since the box with characters inside disappears rather quickly,
I have to capture the screen image as a video clip and tried to read off the characters from the white rectangle box.
I have found that It contains

an e-mail address A
a telephone number 
an e-mail address B
an e-mail address C

The telephone number is my smartphone number.
Address B and C are google e-mail addresses.
Address A is another valid address that I use.
Pretty much an unauthenticated IDs of mine.

The watermark AM4v near the lower-left corner is inserted by a free version of screen video recorder., amarec version 4.20.

Now, I have not noticed when I began writing this entry, but there is a telltale sign of what might be causing the display.
In the lower-left corner, there is a message that says in Japanese, that
data is being trasferred from tracking.epicgames.com
Click on the attached figure and you see the message at the lower-left corner.

So is it possible that somehow JavaScript or whatever is clever enough to find out my e-mail addresses that I have used and even a telephone number during the web access?

This makes me uncomfortable.

Wait, I have a few plugins when this happened. Adblock+, NoScript, etc. to name a few.
Let me disable the plugin and see what happens if I visit the site without such plugins.

EDIT: you have to click on the attached graphics to see the really the lower-left. The thumbnail doesn't show it.

Comment 2

[:Gijs (he/him)]

So is it possible that somehow JavaScript or whatever is clever enough to find out my e-mail addresses that I have used and even a telephone number during the web access?

They're probably focusing a form field that isn't visible, and the white popup is the autofill popup. I'd guess the form field has a username id or something similar, and so form autofill is providing a list of things you've previously filled in such form fields. The website can't access the values in the autofill popup (the email/phone) unless you interact with the autofill popup to put the value in the form field.

This probably isn't a security bug. There are other bugs on file about similar situations where the autofill form field is not visible/obvious to the user -- but it's very difficult for the browser to ascertain that this is the case.

Comment 3

[ISHIKAWA, Chiaki]

In the trouble shooting mode under Windows 10, the strange whitish rectanble box still appears, but
in the end, the suggestion box that let me log in to the site using google account is shown.
The suggestion box was not shown with plugins such as AdBlock+, NoScript, etc.

So it seems that the account information (three e-mail addresses and one smartphone number in my special case. I think
YMMV) is shown in either normal and trouble shooting mode.

I checked my profile and found no mention of "epicgames.com" in the stored login information.
Then where and how does the site manage to access the three e-mail accounts and my telephone number and show it in the white rectangular box?
If it can do so using JavaScript, I am afraid that it can store them in thei site cookie or Browser Storage?
Hmm...

Comment 4

[ISHIKAWA, Chiaki]

(In reply to :Gijs (he/him) from comment #2)

So is it possible that somehow JavaScript or whatever is clever enough to find out my e-mail addresses that I have used and even a telephone number during the web access?

They're probably focusing a form field that isn't visible, and the white popup is the autofill popup. I'd guess the form field has a username id or something similar, and so form autofill is providing a list of things you've previously filled in such form fields. The website can't access the values in the autofill popup (the email/phone) unless you interact with the autofill popup to put the value in the form field.

This probably isn't a security bug. There are other bugs on file about similar situations where the autofill form field is not visible/obvious to the user -- but it's very difficult for the browser to ascertain that this is the case.

It may be indeed the case.
However, how a user can be protected from "interacting with the autofill popup" by mistake.
Hmm...
I wonder if a template-like approach can be used to detect such unintended usage. Maybe it might be a task for a company like symantec which includes safe web browsing add-on.
It did not warn me, though.

OH, another funny thing is, Edge and Chrome does not seem to show the white rectangle when I visited the site.
Maybe I have not used the form filling too much or too often in other browsers and so the field name did not match and autofill popup didn't happen.

Thank you for a possible explanation, I feel much better. But still I wonder if there is a single user in the world who is unlucky enough to hit the mouse button in undesirable position at the unfortunate moment to fill in the invisible form and interact with whichever sites is doing this and the information (e-mail address, etc.) is gone into wrong hand forever...

Comment 5

[Daniel Veditz [:dveditz]]

I checked my profile and found no mention of "epicgames.com" in the stored login information.

"Form" autofill has more generic categories based on field names and types, and I don't believe it's limited by the domain. Your name is your name, your email is your email.

There have been security bugs against autofill in the past (mostly misdirecting user attention so they can lure the user into selecting one of the items) but this doesn't look like one of those. Let's treat it as a non-hidden issue.

Comment 6

[Sergey Galich [:serg]]

Attachment: image.png

Website has this sign in modal at this place and instead of showing/hiding it, they set opacity: 0 to make it invisible.

The suggestions you see are suggestions from your Form History, any email you previously used on the web. Firefox shows that suggestion list automatically, while Chromium based browsers require you to make an effort of pressing ArrowDown. When I open that site in Microsoft Edge, after page loads I press Shift+Tab to focus invisible input and ArrowDown to see list of suggestions.

Comment 7

[:Gijs (he/him)]

Given comment 6 could use element.checkVisibility({checkOpacity: true, checkVisibilityCSS: true}) to determine if the form element is visible before showing the autofill popup.

Comment 8

[ISHIKAWA, Chiaki]

(In reply to Sergey Galich [:serg] from comment #6)

Created attachment 9366294 [details]
image.png

Website has this sign in modal at this place and instead of showing/hiding it, they set opacity: 0 to make it invisible.

The suggestions you see are suggestions from your Form History, any email you previously used on the web. Firefox shows that suggestion list automatically, while Chromium based browsers require you to make an effort of pressing ArrowDown. When I open that site in Microsoft Edge, after page loads I press Shift+Tab to focus invisible input and ArrowDown to see list of suggestions.

Thank you for the investigation.

So that means

• the "invisible" form is still there (?) when I thought the content is fetched and the screen image has stabilized?

  Not sure why then the whitebox with user information appears for about a second.
  Oh, now I see this is the suggestion list... So my question should be why it DISAPPEARS after being visible for a second or two.

(In reply to :Gijs (he/him) from comment #7)

Given comment 6 could use element.checkVisibility({checkOpacity: true, checkVisibilityCSS: true}) to determine if the form element is visible before showing the autofill popup.

Whatever it takes to make the web experience less surprising, I think the user would appreciate it being implemented.

BTW, if the form input for user account and password is shown with opacity:0, it seems to be that the web designer screwed up here. It should be visible in the first place. I wonder why such a blunder was overlooked.
But that is up to the web creator.
The web browser should be robust against idiosyncrasies of web pages to protect users and make the user experience as smooth as possible, and this is a good example to implement a safety feature against such a quirk (be it a programming mistake, a bad design, a malicious behavior, etc.)

Comment 9

[Sergey Galich [:serg]]

• the "invisible" form is still there (?) when I thought the content is fetched and the screen image has stabilized?

Yes, it's there and technically it's visible, in the sense that you can TAB into it. Users who needs to use screen reader will hear about that input too, opacity means little to them. This website has a few other forms as well.

Not sure why then the whitebox with user information appears for about a second.
Oh, now I see this is the suggestion list... So my question should be why it DISAPPEARS after being visible for a second or two.

When web page loads, there is a brief moment in time when this transparent input is focused and Firefox shows autocomplete suggestions for it. Then site finishes loading and moves focus somewhere else, which closes autocomplete popup.

BTW, if the form input for user account and password is shown with opacity:0, it seems to be that the web designer screwed up here. It should be visible in the first place. I wonder why such a blunder was overlooked.

I'd recommend to use display: none or visibility: collapse instead of opacity: 0. It's easy to check for opacity:0, even though it's not the input itself but the grand-grand-parent of the input. It will not be that easy if web developer sets opacity: 0.1 - some people can see it, some can't. It will be impossible to say what is really visible and what is not.

The web browser should be robust against idiosyncrasies of web pages to protect users and make the user experience as smooth as possible, and this is a good example to implement a safety feature against such a quirk (be it a programming mistake, a bad design, a malicious behavior, etc.)

There are many ways to hide content on the web :( opacity is just one of the tricks. Web devs can play with 0.0001px width or height, offset to -10 million or obscure it with some overlays... I agree, we should try and assist user with some quirks when we can.