Saved username/password appear in the wrong fields on Firefox - html

I have this strange bug on Firefox, not Chrome (both updated).
On the login page of my website, the fields are :
<div class="input text required">
<label for="ArchUtilisateurUsername">Identifiant :</label>
<input name="data[ArchUtilisateur][username]" id="ArchUtilisateurUsername" type="text">
</div>
<div class="input password">
<label for="ArchUtilisateurPassword">Mot de passe :</label>
<input name="data[ArchUtilisateur][password]" id="ArchUtilisateurPassword" type="password">
</div>
Then on another page, I have a form to create "readers" accounts, which are different than users accounts. It uses read ID and password as login informations, but in this form, both aren't next to each others.
So I have this :
<div class="group-content">
<div id="DivFieldLecteurFormCompteActif" class="input checkbox ">
<input name="data[LecteurForm][compte_actif]" value="" type="hidden">
<input name="data[LecteurForm][compte_actif]" id="FieldLecteurFormCompteActif" value="1" type="checkbox">
<label for="FieldLecteurFormCompteActif">Compte actif</label>
</div>
<div id="DivFieldLecteurFormPassword" class="input password ">
<label for="FieldLecteurFormPassword">Mot de passe</label>
<input name="data[LecteurForm][password]" id="FieldLecteurFormPassword" autocomplete="off" type="password">
</div>
<div id="DivFieldLecteurFormPasswordConfirm" class="input password ">
<label for="FieldLecteurFormPasswordConfirm">Confirmation</label>
<input name="data[LecteurForm][password_confirm]" id="FieldLecteurFormPasswordConfirm" autocomplete="off" type="password">
</div>
</div>
The strange problem is, if a user validates the Firefox's "save my login datas" popup when he logs in the website, when he opens the "reader" form,
the "password" field is filled with the user's password
the first previous text input field to the password field is filled with the user's username
Starting to the password field : if the previous one is a checkbox, select, radio, it's ignored and go further. If I remove the input field with the username from my source, when I reload the page it's the next previous input field that get the username.
All seems to be linked to the password field :
Login form and Reader form have different password field names, but it's still doing this
If I delete this password field in the code, after reloading the "password confirm" field is filled with the user password
If I delete both, the user password appear nowhere, so do the username.
If I change the password field type from "password" to "text" and reload, the password doesn't appear in this field but in "confirm password". And no longer appear (nor the username) if I do this to both.
The last point seems to confirm that (in my case at least), when Firefox has a saved username/password for a website, it tries to fill the infos to the first password-type field he finds, then fills the first previous text-type field.
As you can see in the code, it does this even if I put an autocomplete="off" on the field.
So Firefox auto-filled the wrong form, which even have different field names (and differents fields id), with saved login informations. Is it a known-behavior ? is there a way to prevent it (as the autocomplete doesn't seems to do the job) ?
Just to prevent another answer, I removed multiple times all datas from Firefox's password manager, it's not about old stored fields names.

Finally, I found a working answer here : https://stackoverflow.com/a/29852908/1459054
While searching, this "bug"... sorry, "feature", exists for more than 10 years in Firefox, I saw multiple bugs reports about this tagged "WONTFIX" because it's the expected behavior ("Password manager shouldn't rely on field names") that makes the login informations popin anywhere it can fit, and because "it doesn't concern many users, so its not important to fix".

Related

Username not showing in Chrome "Update Password"

When I fill out my signup form, I enter a username, then click "Suggest strong Password" for the password box.
The username doesn't show in this box. How can I force it to? Here are my username and password fields.
<form action="#" method="post">
Username: <input type="text" name="uname" id="uname" value="" placeholder="" required="" autocomplete="username"><br><br>
Password: <input type="password" name="uPass" id="uPass" required="" autocomplete="new-password"><br><br>
Confirm: <input type="password" name="uPass_2" id="uPass_2" required="" autocomplete="new-password"><br><br>
<button type="submit">
Create
</button>
</form>
Below is a JS Fiddle, SO's code playground wouldn't even give me a password list. I guess it's a difference in how they render the page.
First, here's how to reproduce the issue:
Enter a username, say "stack".
Click the first password field, click "suggest strong password." Nothing will happen because it's the first time you're saving a password to that username.
Rerun the fiddle, enter the same username, click "suggest strong password." again. This time, you'll get the popup because you're actually updating the password.
JSFiddle: https://jsfiddle.net/gn1qzwyu/
The password along with username is normally saved and updated on a redirect. In that case the username is picked up correctly. However, in case of "suggest password" the password is actually remembered in advance, during this action, not during redirect. Because of your fiddle does not provide correct redirect, after first "suggest password" attempt, credentials are saved as a password with "no username".
This "no username" is the reason for immediate pop-up during second "suggest password" attempt because Chrome can't decide which username is correct - "no username" or that one you filled up in the form. Note that second, "correct one" is pickable in the "Username" field too - its triangle is visible on your screenshot. The reason for immediate pop-up is the same as it was for first attempt - Chrome wants to save suggested password in advance and does not wait a redirect. The reason why Chrome remembers suggested password right away and doesn't remember username in the same moment is that suggested password is trusted upon form submission but the username is not.
It seems like Edge and Firefox have the same behavior.
Solution for productive sites: implicitly provide correct redirect (or substitutive actions). Solution for users: delete saved credentials with blank username for that sites where a username should exist.

input field saved passwords on wrong input field

I have a few input fields on my website. There are few passwords saved for that website(Chrome Login Saved passwords). But the problem i am facing is that the email is appearing on the input field which is not for email i.e somewhere else on that same website. This is the input field code where i don't want chrome to autofill/autocomplete as it is not required here. I have tried autocomplete =off/false/new-password nothing worked.
<input type="text" ng-model="week_sco_topic" placeholder="Week SCO Topics" autocomplete="off">
When you click on the field above it shows the saved passwords for that website which is not required on this field.
I found the solution. The browser ignores autocomplete="off" unless it is in a form. Therefore, the code below removed the autofill suggestions.
<form autocomplete="off"><input type="text" ng-model="week_sco_topic" placeholder="Week SCO Topics"></form>
Google chrome ignores autocomplete="off" so you can try to make another input field above it to fool the browser
<input type="text" style="visibilty:hidden">
<input type="text" ng-model="week_sco_topic" placeholder="Week SCO Topics" autocomplete="off">
you can also read this answer

Remembering email and password

I have the following problem. When I remember email and password on chrome email fills the latest email field on the page, but not the right one. Here is the image:
This happens on a register page also: but it shouldn't be here.
How could this be solved?
If you wish to prevent users from having inputs automatically filled out based on previously entered values which the browser stored, you can use the autocomplete="off" parameter on the input.
Eg. <input type="password" id="foo" autocomplete="off" ...>

How does Google Chrome recognize a login form?

I faced an issue recently where Google Chrome offers to save username and password for a login form, but took a different field value than the username-field to store as username.
Does anyone know which criteria are used by chrome to determine the username and password in a login form?
My guess (but cannot find documentation to proof it):
take first text-field as username
take first password field as password
When a website developer creates a login form on their website, they usually add specific HTML tags to the form to identify it as a login form. When a user visits the website and clicks on the form, the browser recognizes the HTML tags and knows that the form is a login form. The browser may then offer to save the user's login information, so that the user doesn't have to enter it every time they visit the website.
Here is an example of a login form with HTML tags:
<form action="/login" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
In this example, the form tag specifies that this is a form, and the input tags with the type attribute set to "text" or "password" specify that this is a login form.

What defines a login form for the purposes of autocomplete?

I have a typical login form with username and password. When a user enters this information, their web browser will save the username and password for them (assuming their browser is configured to allow this). Suppose the username is "User01" and the password is "Password01".
Now suppose the user changes/resets their password to "Password02". The web browser doesn't recognize my password reset form as a login form, so it doesn't update/change/save the password in the user's web browser.
So when the user leaves my website and comes back at a later date, they come to my login page. They enter their username "User01" and it autocompletes the wrong password of "Password01" but the user doesn't know this because they just see ****. The user eventually locks their account then calls up our customer service to yell at us.
<form action="updatePassword.php" name="frmPasswordChange" method="POST">
<label>Old Password</label>
<span class="textbox"><input type="password" maxlength="14" size="14" name="oldPassword"></span>
<br />
<input type="hidden" name="username" value="User01">
<label>New Password</label>
<span class="textbox"><input type="password" maxlength="14" size="14" name="newPassword"></span>
<br />
<label>Re-enter New Password</label>
<span class="textbox"><input type="password" maxlength="14" size="14" name="newPasswordReEntered"></span>
<br />
<span class="buttonHolder">
<button type="submit" class="styledButton updateButton">Save Password</button>
</span>
</form>
I think that the way a browser handles inputs is largely from semantical reading of the login form. That is to say, if a text field is named "username" and a password field is named "password", that tends to carry over.
Problem in your case is that it sounds like you have two different pages through which one can login. It is a known issue/feature that web browsers associate login info on a page-to-page basis. For example, one of the sites I regularly login to stores different login credentials between the homepage and the forgot password page (with the "forgot password" page, somewhat ironically, having the correct credentials).
Until some sort of standard is developed that allows linking of forms by something like the ID attribute, I'm going to posit that there's not much you can do about this, apart from maybe doing a quick IP read and giving the username. But that would be stunningly bad practice.