Open Bug 1931340 Opened 1 year ago Updated 1 month ago

reddit.com - autofill doesn't work with usernames

Categories

(Toolkit :: Password Manager: Site Compatibility, defect)

Product:
Toolkit
Component:
Password Manager: Site Compatibility
Platform:
Desktop
All
Type:
defect

Tracking

()

Tracking Flags:
Tracking Status
firefox-esr128 --- affected
firefox132 --- affected
firefox133 --- affected
firefox134 --- affected

People

(Reporter: bhidecuti, Unassigned, NeedInfo)

References

(
URL
)

Details

Attachments

(4 files)

video showing the issue
3.90 MB, video/mp4
Details
Minimal HTML page where input is saved
250 bytes, text/html
Details
Small HTML page mimicking reddit login form
744 bytes, text/html
Details
Functional reddit-like login page
763 bytes, text/html
Details
Attached video video showing the issue —

Found in

  • 133.0b8

Affected versions

  • 134.0a1 (2024-11-13)
  • 133.0b8
  • 132.0.2
  • 128.4.0esr

Tested platforms

  • Affected platforms: Windows 11, macOS 14.7, Ubuntu 22.04
  • Unaffected platforms: none

Steps to reproduce

  1. Open Firefox and navigate to about:logins
  2. Enter a set of credentials for https://www.reddit.com/
  3. Go to https://www.reddit.com/ and click on the "Log In" button
  4. Observe the Log In form
  5. Click on the "Email or username" field

Expected result

  • The Log in form should be autofilled with the saved credentials from step 2
  • The autocomplete dropdown should be displayed for the "Email or username" field

Actual result

  • The Log in form is not autofilled with the saved credentials from step 2
  • The autocomplete dropdown is not displayed for the "Email or username" field
  • The field is also not autofilled if the autofill is triggered from the Password field

Regression range

Additional notes

  • See the attached video
  • This is also reproducing if saving the credentials from the Log In form. The Log In form is not autofilled and the autocomplete dropdown is not displayed for the Username field after logging out
  • The username is also not captured in the "Save password" doorhanger
  • Not reproducing on Chrome

Same issue on disneyplus.com/identity/login/enter-email.

Also affects current firefox 134.0.1 (tested on Linux)

Same issue on https://www.adidas.it/account-login (only password field is autofilled if you manually enter username)

Same issue on X/Twitter.

Bianca, when users start posting off-topic comments on your compatibility reports, please point them to https://webcompat.com/issues/new and lock the discussion to Mozilla employees only.

Flags: needinfo?(bhidecuti)

webcompat.com is not the right place for issues regarding the password manager, they should report the issue on bugzilla under: Toolkit/Password Manager: Site Compatibility

Note: webcompat.com is for issues regarding layouts and content that works as expected on a browser but not on the other.

Flags: needinfo?(bhidecuti)
Duplicate of this bug: 1949084

Comment: this issue appeared gradually for me on reddit, so I think the culprit may be a gradually deployed change on reddit itself, rather than a regression in the browser per se. The login field at first was filled in reliably, then became unreliable a few months ago, then completely stopped working a month or so after that.

happens on fenix 137 too.

This issue has been driving me crazy for 4-5 months.

Testing Nightly 139.0a1 Build 20250418091223
Mozilla/5.0 (X11; Linux x86_64; rv:139.0) Gecko/20100101 Firefox/139.0

Run ./firefox --ProfileManager to make a fresh new profile.
Open about:logins
Add entry for https://www.reddit.com/ = Username foo + Password bar
Load https://www.reddit.com/login/

Field "Email or username" is not autofilled.
Field "Password" is not autofilled.

Clicking once in Field "Email or username" puts the focus on that field,
with blinking cursor, but does not display a drop-down menu.
Clicking a second time in Field "Email or username" (while it has focus)
displays a drop-down menu with 1 item: foo
Clicking item "foo" fills Field "Email or username" with "foo"
but DOES NOT autofill Field "Password"
(Deleting "foo" to have both Fields empty again)

Clicking once in Field "Password" has several effects:

  1. Border of Field "Email or username" becomes red
    A circled exclamation point is displayed in Field (right justified)
    "Please fill out this field." is displayed below the Field.
  2. Drop-down menu is displayed with 2 items
    -- foo (From this website)
    -- Manage Passwords
    Clicking item "foo" fills Field "Password" with "bar" (I presume)
    but DOES NOT autofill Field "Email or username"

When https://www.reddit.com/login/ is loaded,
Multiprocess Browser Console prints the following warnings:

Content-Security-Policy warnings 6
Content-Security-Policy: Ignoring “'self'” within script-src: ‘strict-dynamic’ specified login
Content-Security-Policy: Ignoring “'report-sample'” within script-src: ‘strict-dynamic’ specified login
Content-Security-Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified login
Content-Security-Policy: Ignoring “'unsafe-inline'” within script-src: nonce-source or hash-source specified login
Content-Security-Policy: Ignoring “'report-sample'” within script-src: ‘strict-dynamic’ specified login
Content-Security-Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified login
Content-Security-Policy warnings 4
Content-Security-Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified anchor
Content-Security-Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified anchor
Content-Security-Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified anchor
Content-Security-Policy: Ignoring “'unsafe-inline'” within script-src: nonce-source or hash-source specified anchor
Ignoring unsupported entryTypes: longtask. recaptcha__en.js:244:394
The resource at “https://id.rlcdn.com/472486.gif” was blocked by OpaqueResponseBlocking. Reason: “after sniff: status code is not in allowed range”.
Partitioned cookie or storage access was provided to “https://www.google.com/recaptcha/enterprise/anchor?ar=1&k=6LfirrMoAAAAAHZOipvza4kpp_VtTwLNuXVwURNQ&co=aHR0cHM6Ly93d3cucmVkZGl0LmNvbTo0NDM.&hl=en&v=ItfkQiGBlJCsN5gUMmHbpLEb&size=invisible&cb=vbqxlnaqv7mp” because it is loaded in the third-party context and dynamic state partitioning is enabled. recaptcha__en.js:487:353
Feature Policy: Skipping unsupported feature name “identity-credentials-get”. client:270:269
Feature Policy: Skipping unsupported feature name “identity-credentials-get”. client:271:249
Content-Security-Policy warnings 4
InvalidStateError: JSWindowActorChild.document getter: Cannot access property 'document' after actor 'FormHandler' has been destroyed 5 FormHandlerChild.sys.mjs:103
Ignoring unsupported entryTypes: longtask. recaptcha__en.js:244:394
Partitioned cookie or storage access was provided to “https://www.google.com/recaptcha/enterprise/anchor?ar=1&k=6LcZL1spAAAAAIzQl_DXGakd-J2uwjnfZas9G-Rj&co=aHR0cHM6Ly93d3cucmVkZGl0LmNvbTo0NDM.&hl=en&v=ItfkQiGBlJCsN5gUMmHbpLEb&size=invisible&cb=gf5naqrnxut4” because it is loaded in the third-party context and dynamic state partitioning is enabled. recaptcha__en.js:487:353
Content-Security-Policy warnings 5
Cookie “_GRECAPTCHA” has been rejected because it is foreign and does not have the “Partitioned“ attribute. 2 reload

In the drop-down menu for Field "Email or username",
if item "foo" is deleted (using SHIFT+DEL) then Firefox
no longer displays a drop-down menu when the field
is clicked while focused. Recreating the entry in the
password manager makes item "foo" available again.

Don't know if any autofill experts see anything relevant in the logs?
I can run more tests if needed.

Maybe disabling some of the protections?

  1. DISABLING "Enhanced Tracking Protection" for
    https://www.reddit.com/ and https://id.rlcdn.com/
    => No change in behavior

Might be the way the 2 fields are handled in
https://www.redditstatic.com/shreddit/en-US/login-step-client-js-bd7b9b60.js
Sadly, I don't speak Javascript :(

applyPasswordManagerWorkaround sounds a bit odd to me...
Is this going to need some Greasemonkey magic?
Or maybe a webcompat discussion with reddit devs?

applyPasswordManagerWorkaround() {
  const t = document.querySelector('input#light-username-field'),
  e = document.querySelector('input#light-password-field');
  this.syncInput(t, this.usernameInput),
  this.syncInput(e, this.passwordInput)
}

firstUpdated() {
  this.loginForm?.addEventListener('faceplate-alert', this.onFaceplateAlert),
  this.loginAppOTPForm?.addEventListener('faceplate-alert', this.onFaceplateAlert),
  this.loginBackupOTPForm?.addEventListener('faceplate-alert', this.onFaceplateAlert),
  this.querySelectorAll('a.otp-type').forEach(
    (
      t => {
        t.addEventListener('click', this.toggleTwoFactorAuthorizationType)
      }
    )
  ),
  this.usernameInput?.addEventListener('keydown', this.submitFormOnReturnKey),
  this.usernameInput?.addEventListener('input', this.clearErrorOnInputChange),
  this.passwordInput?.addEventListener('keydown', this.submitFormOnReturnKey),
  this.passwordInput?.addEventListener('input', this.clearErrorOnInputChange),
  this.passwordInput?.addEventListener('change', this.clearErrorOnInputChange),
  this.appOtpInput?.addEventListener('keydown', this.submitFormOnReturnKey),
  this.appOtpInput?.addEventListener(
    'input',
    (
      () => this.resetInputValidity(this.appOtpInput, this.appOtpHelperText)
    )
  ),
  this.appOtpInput?.addEventListener(
    'change',
    (
      () => this.resetInputValidity(this.appOtpInput, this.appOtpHelperText)
    )
  ),
  this.backupOtpInput?.addEventListener('keydown', this.submitFormOnReturnKey),
  this.backupOtpInput?.addEventListener(
    'input',
    (
      () => this.resetInputValidity(this.backupOtpInput, this.backupOtpHelperText)
    )
  ),
  this.backupOtpInput?.addEventListener(
    'change',
    (
      () => this.resetInputValidity(this.backupOtpInput, this.backupOtpHelperText)
    )
  ),
  this.querySelector('button.login') ?.addEventListener('click', this.submitForm),
  this.querySelector('button.check-app-code') ?.addEventListener('click', this.submitForm),
  this.querySelector('button.check-backup-code') ?.addEventListener('click', this.submitForm),
  this.addEventListener('input', this.onInputChange),
  this.addEventListener('change', this.onInputChange),
  this.enableSubmitButtonIfValid(),
  this.applyPasswordManagerWorkaround()
}

Mason: The simplest workaround is to open browser developer panel/ debugger/ inspector by pressing F-12 or alt+command+i.

That brings up the password autofill.

the bug seems to be that the the light-username and light-password fields don't even exist. so the t is null in syncInput.

Further, the syncInput function sets the value of the second argument = the first argument when it should've been the other way around.

Further it adds the input and focus event listener on the first argument which only makes sense if the first argument is the visible username field, not the light username.

t = document.querySelector("input#light-username-field");
    e = document.querySelector("input#light-password-field");
    this.syncInput(t, this.usernameInput),
      this.syncInput(e, this.passwordInput);
  }
  syncInput(t, e) {
    t &&
      e &&
      ("" !== t.value &&
        ((e.value = t.value), this.enableSubmitButtonIfValid()),

Hello pwosj

I don't understand the work around you described.
(It doesn't work for me?)

I still have to type or paste a username.

Regards

Ok it only works for iCloud passwords extension that I use. It doesn't seem to work with Firefox native password manager.

If autofill isn't showing up, opening the "web developer tools" brings it up on some sites.

Cheers

(In reply to Jan from comment #4)

Same issue on X/Twitter.

I had the bug at some point on twitter, then for some reason it fixed itself

(In reply to ezjonas from comment #15)

I had the bug at some point on twitter, then for some reason it fixed itself

Twitter probably fixed the issue in their HTML code ;)

(In reply to Mason from comment #16)

(In reply to ezjonas from comment #15)

I had the bug at some point on twitter, then for some reason it fixed itself

Twitter probably fixed the issue in their HTML code ;)

Does that means there is a way to understand where the bug is coming from?

(In reply to ezjonas from comment #15)

(In reply to Jan from comment #4)

Same issue on X/Twitter.

I had the bug at some point on twitter, then for some reason it fixed itself

Yep, this is exactly right. Twitter had this problem for quite some time, and then they fixed it. Reddit has had this problem for at least 4 months, maybe longer.

(In reply to ezjonas from comment #17)

Does that means there is a way to understand where the bug is coming from?

Yes, of course.

The issue comes from a bug in the Javascript code served by reddit.com

(In reply to Mason from comment #19)

(In reply to ezjonas from comment #17)

Does that means there is a way to understand where the bug is coming from?

Yes, of course.

The issue comes from a bug in the Javascript code served by reddit.com

Do you have more information on that bug? Isn't it possible for me to hotfix it with some JS code?

Duplicate of this bug: 1933236
Summary: The autocomplete drop-down is not displayed for the username on reddit.com and the field is not autofilled → reddit.com - autofill doesn't work with usernames

Insight to this bug and maybe to recreate it:

I had many saved passwords, some were duplicates. I removed duplicates

Some saved passwords had the domain old.reddit.com instead of www.reddit.com, maybe that's the problem?

I added an user/password manually.

Now it shows when I click in the user field.

(In reply to ezjonas from comment #22)

Insight to this bug and maybe to recreate it:

I had many saved passwords, some were duplicates. I removed duplicates

Some saved passwords had the domain old.reddit.com instead of www.reddit.com, maybe that's the problem?

I added an user/password manually.

Now it shows when I click in the user field.

At least for me (Firefox 128.14.0esr on Linux & Firefox 142.0.0 on Android), this is not the case: I only have usernames and passwords saved for www.reddit.com, without duplicates, and there is no droplist for username on reddit.

(In reply to hSzVWdSU from comment #23)

(In reply to ezjonas from comment #22)

Insight to this bug and maybe to recreate it:

I had many saved passwords, some were duplicates. I removed duplicates

Some saved passwords had the domain old.reddit.com instead of www.reddit.com, maybe that's the problem?

I added an user/password manually.

Now it shows when I click in the user field.

At least for me (Firefox 128.14.0esr on Linux & Firefox 142.0.0 on Android), this is not the case: I only have usernames and passwords saved for www.reddit.com, without duplicates, and there is no droplist for username on reddit.

What I did was create a fresh profile, add credentials and it worked, although when I deleted credentials, those deleted credentials still showed up in the login form.

I then cleared all data with CTRL SHIFT DEL, and it did not work anymore, no login showed up at all. I am a bit confused.

This issue is not limited to reddit.

It also happens in a few web forms I use.

I'm thinking the issue stems from how some web/Javascript frameworks
implement certain text field input areas?

Yes, I also observed it's not specific to reddit.

There should be a list of the forms that cause this bug.

I am not good at js frameworks, but it might make it easier to find the cause of it.

I also wonder if some developers noticed that bug and now use it as some sort of dark pattern, to discourage users to use autofill if they don't like the feature for some reason.

(I suck at HTML5 & Javascript)

I can try to start from one of the broken forms I use,
and cut it down to a minimal, non-working, test-case.

Then perhaps someone with more knowledge can spot
an issue, and we can work "backwards" towards a solution.

I attached two example HTML pages:

In comment #29, a minimal page using <form><input type="text" name="author">
In this case, Firefox CORRECTLY records the input in formhistory.sqlite and suggests it subsequently.

In comment #30, I labored hours to pare down reddit's login form (result uncertain).
Their web framework uses <fieldset>...<input type="text" name="username" required="" autocomplete="username">
In this case, Firefox DOES NOT record the input in formhistory.sqlite and does not suggest it subsequently.

(In reply to Mason from comment #31)

I attached two example HTML pages:

In comment #29, a minimal page using <form><input type="text" name="author">
In this case, Firefox CORRECTLY records the input in formhistory.sqlite and suggests it subsequently.

In comment #30, I labored hours to pare down reddit's login form (result uncertain).
Their web framework uses <fieldset>...<input type="text" name="username" required="" autocomplete="username">
In this case, Firefox DOES NOT record the input in formhistory.sqlite and does not suggest it subsequently.

Appreciate the effort that went into this.

I wonder what Twitter ultimately did when they fixed the issue on their end?

Simply including the fieldset & button elements within a form element makes everything work.

Firefox saves login & password AND autofills the right password when a login is selected.

It might be possible to tweak the HTML code dynamically using Greasemonkey.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/

Great work for finding where it comes from! So it's just a missing <form> tag, then

About a proper fix, is autofill written in C++ or JS?

Is it possible to insert the <form> tag with greasemonkey for a hotfix?

(In reply to ezjonas from comment #35)

Great work for finding where it comes from! So it's just a missing <form> tag, then

Sadly, while <form> did fix my trivial made-up example, it does not seem
to fix the REAL reddit login page.

I used the DOM inspector to add <form> & </form> on several lines (at random),
but I just don't know where it should go (or even if that's the actual solution).

About a proper fix, is autofill written in C++ or JS?

I don't know, but Firefox now also includes Rust code.

Is it possible to insert the <form> tag with greasemonkey for a hotfix?

If that were the proper solution, I'm sure User scripts can add HTML elements.

Note: I have been able to add all my reddit usernames to the formhistory DB,
so I no longer have to type my username; it's just that FF doesn't tie the
username box to the password box, so I have to select the correct pair myself.

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

For more information, please visit BugBot documentation.

Flags: needinfo?(mtigley)

happens on android too.
after on password field you can select password, but on username you can't.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: