1754086 - With "reveal password" pref enabled, there are duplicate 'reveal' buttons on some sites (our button and the site's button)

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[Daniel Holbert [:dholbert]]

I've been browsing with these prefs enabled

layout.forms.reveal-password-button.enabled
layout.forms.reveal-password-context-menu.enabled

...to test in preparation for these pref-flips shipping at some point in bug 1743046; and I've encountered a few sites (and in one case, an add-on) that end up showing a now-redundant custom 'reveal' button (which ends up looking kinda broken for us to show two reveal buttons).

I assume we'll address this via a mix of outreach (getting sites fixed), or some sort of heuristic that causes our internal button to hide, or something else. But for now, I wanted to at least have a spot to track known-breakage.

I'm marking this as blocking bug 1743046, but it may not need to be a "strong" blocker; it likely depends on how pervasive this issue is.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of double 'reveal' button on UniFi OS (Ubiquiti routers / networking equipment)

One place I've hit this: Ubiquiti "UniFi" line of products (their official website[1] as well as the the local web UI for their router / network equipment[2]).

[1] You can see this on their website by e.g. going to https://store.ui.com/ and clicking "Log In" at top right
[2] see attached screenshot of the login page for my Ubiquiti "UniFi Dream Machine Pro" aka "UDM Pro", i.e. my fancy router

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of double 'reveal' button on Bitwarden extension

This affects Bitwarden (password manager add-on):
https://addons.mozilla.org/en-US/firefox/addon/bitwarden-password-manager/

If you install the add-on and click through to log in to a Bitwarden account (in their sidebar or toolbar button that automatically appears), you'll see this on the password field there (see screenshot).

This also affects the password field that they show for individual saved logins (e.g. if you click the "+" button to add some login, after you're signed in to the add-on). It also affects their live website,
https://vault.bitwarden.com/#/ (where they show an eye 'reveal' icon to the right of the password field).

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot of double 'reveal' button on Washington Post website

This also affects https://www.washingtonpost.com , where they display the word "show" on the right side of the password field, which overlaps our own built-in reveal-password button.

(Note: to reproduce this one, you need to at least know the email address for some valid account. Their login flow is two-part, and they won't prompt you for a password until you've first given them a recognized email address.)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screenshot of double 'reveal' button on USBank (top) and Vanguard (bottom)

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: screenshot of double 'reveal' button on Coinbase

At Coinbase, there's a site-provided "reveal" button that looks nearly the same as (and is superimposed with) our own reveal button, as shown in screenshot here.

(STR: with the pref enabled, visit https://www.coinbase.com/signin and focus the password field and type in at least one character)

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: screenshot of double 'reveal' button on PayPal

PayPal adds a "show" button at the right edge of their login field (to the right of our reveal button), as shown here.

STR (with pref enabled): Visit https://www.paypal.com/signin , type in any email address (e.g. [e-mail]) and click through, and then type anything into the password field.

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 8

[Daniel Holbert [:dholbert]]

Triaging as S3. For now, this is a non-issue since these prefs aren't enabled by default, but we do intend to eventually enable them in bug 1743046.

(Once we do get to that point, we may need to come up with some sort of solution here.)

Comment 9

[Luke Warlow]

I would like to echo that there should be some way to avoid the double buttons.

In MS Edge there's an ::-ms-reveal pseudo element that can be used to hide custom reveal buttons. See https://docs.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal

In JS I run CSS.supports('selector(::-ms-reveal)') and show or hide my custom button accordingly.

It would be good if Firefox could support an equivalent pseudo element, or alternatively if they could directly implement the MS prefixed one (this has the added benefit of just working on sites that already account for Microsoft Edge) that would allow for developers to hide their custom buttons.

I understand this has the added downside of allowing sites to hide the default browser button which isn't ideal (and to be clear isn't my aim for having access to this pseudo). Potentially you could ignore the CSS properties and only add it for the good case of detecting and hiding the custom button.

An alternative approach would be to add some read only property that allows for feature detection but doesn't allow for disabling the browser button.

Comment 10

[Daniel Holbert [:dholbert]]

(In reply to Luke from comment #9)

In JS I run CSS.supports('selector(::-ms-reveal)') and show or hide my custom button accordingly.

It would be good if Firefox could support an equivalent pseudo element, [...]
An alternative approach would be to add some read only property that allows for feature detection but doesn't allow for disabling the browser button.

Thanks. It looks like there was a long CSSWG discussion about this (including mention of a pseudo-class which could be used for feature-detection), with IRC minutes in https://github.com/w3c/csswg-drafts/issues/3934#issuecomment-498712344 .

There's also a proposed input-security property which theoretically would control this field, which could be used for feature-detection, though per the more-recent discussion minuted in https://github.com/w3c/csswg-drafts/issues/6788#issuecomment-1016634878 and the "ISSUE" box on https://andreubotella.com/csswg-auto-build/css-ui-4/#input-security , that property will probably be removed from the draft spec.

But yeah - in any case, we'll definitely need some standardized/agreed-upon method of feature-detection before this can ship.

Comment 11

[Daniel Holbert [:dholbert]]

Attachment: screenshot at kitchenwarehouse.com.au

This affects https://secure.kitchenwarehouse.com.au/kwh-store/checkout.ssp#login-register ; the site has their own password field reveal icon which overlaps Firefox's.

Comment 12

[Daniel Holbert [:dholbert]]

Attachment: screenshot at https://nextdoor.com/login/

Comment 13

[Daniel Holbert [:dholbert]]

Attachment: screenshot at https://www.fedex.com/secure-login/en-us/

Comment 14

[Daniel Holbert [:dholbert]]

Attachment: screenshot at https://www.ups.com/lasso/login

Comment 15

[Daniel Holbert [:dholbert]]

Attachment: screenshot at https://soundcloud.com/signin (w/ email-address-and-password login flow)