firefox fills in the password into the username field

Question

This is weird: if i login to my application, ask firefox to save the username/password. Then log out and go back to the login screen, firefox fills in the password inside the username input field, thus rendering it visible!

Any idea what could cause the problem? Here is the html of my form, although i've checked it 10 zillion times.

<form action="<?php echo WWWROOT ?>login/" autocomplete="on" method="post" name="extranetLoginForm" id="extranetLoginForm" >
 <ul id="formlog">
  <li id="liloginfield">
   <label for="loginfield" id="loginfieldlab"><span class="required">
    <img alt="user-icon" src="<?php echo WWWROOT ?>_img/icons/user.png" />
    Mon nom d'utilisateur : <small style="color:#AAA">(prenom.nom)</small></span>
   </label>
   <input id="loginfield" name="loginfield" class="text required ui-corner-all" type="text" tabindex="1" accesskey="l"  />
   <label for="loginfield" class="error" id="error1">
    <img alt="erreur-login" src="<?php echo WWWROOT ?>_img/icons/exclamation.png" />Ce champ est obligatoire, r&eacute;digez comme ceci: prenom.nom</label>
  </li>
  <li id="lipass">
   <label for="password">
    <span class="required"><img alt="lost-pass" src="<?php echo WWWROOT ?>_img/icons/key.png" />mot de passe
    <small class="help_form">(<a id="forgotPasswordLink" href="#">oublié</a> ?)</small></span>
   </label>
   <input name="password" type="password" class="text required ui-corner-all" id="password" minlength="4" maxlength="20" tabindex="2" accesskey="p" />
   <small  class="checker" ></small>
   <input type="hidden" name="errorpass" id="errorpass" value="0"/>
   <label for="password" class="error" id="error2"><img alt="exclamation" src="<?php echo WWWROOT ?>_img/icons/exclamation.png" />Ce champ est obligatoire.</label>
  </li>
  <li>
   <input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /><label for="rememberme"> Se souvenir de moi</label></p>
  </li>
  <li class="centeredtext">
    <input type="hidden" name="goto"  id="goto" value="<?php echo WWWROOT.$_SESSION['AFTER_LOGIN_GOTO'] ?>"/>
    <input type="hidden" name="login_type"  id="loginTypeNormal" value="normal"/>
    <input type="submit" class="ui-state-default button ui-corner-all short_input" value="GO!" id="submitlogin" tabindex="1" accesskey="L" />
   </li>
   <li id="lipassforget">
    <label class="centered info"><a class="dark_link openidLink" href="#" id="openidLink">avec OpenID</a></label>
   </li>
  </ul>
</form>

Answer 1

Have you by any chance changed the field names, i.e. was the password field called 'loginfield' at one point when the username/password were saved by Firefox? According to Mozilla's wiki the password manager stores the fieldname with the saved login details, so it could be related to that.

Have you tried to remove the username/password from Firefox's password manager and see if it happens again when you try to save the login details again?

Answer 2

The Mozilla Firefox password manager is weird. It has a mind of it's own.

https://wiki.mozilla.org/Firefox%3aPassword_Manager

If you logged into your application using Mozilla, and your login field has id "L" and your password field has id "P", it remembers those ids so it can put the values in for you. This only happens if you have this checked: Options > Security > Remember password checkbox.

Now, if you have a page (or form.. not really sure) with AT LEAST one input field with an id that matches either "L" or "P", the Mozilla Password Manager (built into the browser) will try to use its intelligence to fill in the values for you, even if both fields are not there. See example below for a better picture. This might help you solve your issue.

Let me explain...

I work on forensic software where users have to audit everything they do in every workflow, so it requires their password, so if our clients ever get audited by the FDA, we have a record of the workflow. So we have a password field in our application by every button, but since the user is already logged in, we don't want to have them enter their login also, so that field is suppressed. This is what I had to do to make that methodology work (for Mozilla). I had to add the hidden (display:none) input field.

<input runat="server" type="text" style="display:none;">
<asp:TextBox id="TxtPassword" Runat="server" Width="80" EnableViewState="False" TextMode="Password"></asp:TextBox>

The TextBox control actually renders to an input field in HTML. Before I fixed this issue, I had a search field for a page preceding the password field, and it put the username into that field. If I did not have the hidden input field before an input field with id "P" (or in this case "TxtPassword"), it would still be putting the login into my search field, because it preceded the input field with id "TxtPassword". Having the hidden field (that is hidden) is there to fix this issue in Mozilla. The user name goes into that input box, and notice it doesn't even have an id, yet Mozilla puts the login into that field because of the Mozilla setting shown in the dialog image above.