Forcing Firefox to obey autocomplete="off" for password fields

Autocomplete is a nice feature which fills in common form fields automatically for the user. However, in some cases you don’t want this to happen.  Some examples could be an account management page where you don’t want the admin password to be auto-filled in when you are creating and managing accounts.  Another example is any site that has a “My Account” page with a field allowing you to change your password.  Auto-complete can accidentally fill in these fields because it thinks it is a login form.

IE uses a non-standard attribute (autocomplete=”off”) that can be added to an entire form or one specific input control. Besides the fact that this attribute will make your HTML markup fail compliance tests, Firefox seems to consider this tag merely a “suggestion” and will disregard it at times.

In particular, Firefox will *always* populate certain password fields. There is seemingly no way to tell Firefox not to fill in a field if it really wants to do so. This can be a very bad thing if you are dealing with a user preference page or something sensitive where you don’t want autocomplete to ever occur under any circumstance. Setting value=”” is equally worthless because Firefox seems to populate this value just after the page is rendered.

The following code however will work. The concept is basially to set a timeout a fraction of a second after the page loads which clears the password field. Technically Firefox still populates the field, however this script code removes it almost instantly. As an added bonus, because you are not using autocomplete=”off” your HTML markup should still validate. This code should be placed at the bottom of your page beneath your form.


// this brutally clears a password field in firefox
// compliments of verysimple.com
function clearPwBox()
{
if (document.getElementById)
{
var pw = document.getElementById('MyPasswordFieldName');
if (pw != null)
{
pw.value = '';
}
}
}
window.setTimeout("clearPwBox()", 100);

This code could probably be made more generic by enumerating through the form elements and searching for a certain class name. This way you could have one script and simply append a classname to any field that you don’t want auto-complete to occur. This technique is similar to one posted on Chris Holland’s blog. Chris’s solution, however, is aimed exclusively at the Wc3 compliance issue. As you can see in his code he adds the autocomplete=”off” attribute, which allows the page to validate properly, but doesn’t solve the Firefox/Password field issue.

If you have a more graceful solution and/or decide to flesh this idea out, please post a comment and I’ll provide a link to your site.

30 Responses to “Forcing Firefox to obey autocomplete="off" for password fields”

  1. Tara March 29, 2007 at 11:13 am #

    Thanks, that’s useful. Cheers.

  2. Charles May 5, 2007 at 12:47 am #

    Here’s something similar using jQuery — wipe all of the password fields on the page at once.

    $().ready(function(){setTimeout(“$(‘input[@type=password]‘).attr(‘value’, ”);”, 100);});

  3. Jason May 9, 2007 at 11:01 pm #

    thanks charles – i like that, nice and clean. i bet that code could be fairly easily ported to some other frameworks too – for people already including prototype, yui, etc, it could save some code.

  4. Arjan van Bentem May 14, 2007 at 5:40 am #

    > Setting value=”” is equally worthless because Firefox seems
    > to populate this value just after the page is rendered.

    …well: if Firefox somehow knows about some saved passwords (like when stored previously when autocomplete was not yet used) then it might still populate the password when the user enters the username. So: wait until page is loaded, wait some more, enter the user name and hit tab: voila, the password is there…

    By the way: some folks want Firefox to offer the user the option to ignore the autocomplete setting: https://bugzilla.mozilla.org/show_bug.cgi?id=333080

    Arjan.

  5. Jason May 14, 2007 at 11:23 am #

    hey arjan, that is a good point. i would say that 99% of the time this problem happens to me is on a “preferences” type of page where the user has the option to reset their password. But leaving the field blank keeps the password unchanged. Typically the user cannot change their username, so that doesn’t happen in my case – but i can see it is another situation to be aware of. It might be worth putting an onchange event in the username field to set the password to empty string.

    As for the bug report – I would be happier if they added a an option to actually obey autocomplete consistently! I think the people who want auto-complete ignored might be unpleasantly surprised when they start seeing firefox change settings and such for them in random web applications. For example, auto-filling in their real email address on a public forum preference page. he he!

  6. Dave Cardwell August 31, 2007 at 4:21 am #

    You don’t need the timeout if you’re using jQuery’s .ready() function:

    jQuery(function($) { $(‘input:password’).val(”) });

  7. Nick Sutherland September 6, 2007 at 5:57 pm #

    Another alternative (workaround that works 100% without jQuery)

    It seems as if FF is looking for type=”password” to trigger the autosave password troll to activate.

    So, why not prevent the save of the password to begin with…

    (very rough example…)

    function hideFromPassTroll(formObj, keycode)
    {
    if(keycode==13)
    {
    document.getElementById(‘password’).value=document.getElementById(‘field2′).value;
    document.getElementById(‘field2′).value=””;
    document.getElementById(‘field2′).type=”text”;
    formObj.submit();
    }
    }

  8. Nick Sutherland September 6, 2007 at 5:59 pm #

    …continued…

  9. Nick Sutherland September 6, 2007 at 6:00 pm #

    form id=”loginform” action=”post”
    input type=”text” id=”username” onKeyDown=”hideFromPassTroll(this.form,event.keyCode);”
    input type=”password” id=”field2″ onKeyDown=”hideFromPassTroll(this.form,event.keyCode);”
    input type=”button” id=”submit” value=”submit”
    onClick=”hideFromPassTroll(this.form,event.keyCode);”
    onKeyDown=”hideFromPassTroll(this.form,event.keyCode);”
    input type=”hidden” id=”password”
    form

  10. Jason September 6, 2007 at 6:38 pm #

    Hey Nick, That seems to be a good idea too – If i understand, you’re using a hidden field for the real password and the visible password input is cleared onSubmit so that Firefox never receives the password – thus never saves it.

    I hadn’t heard the term “password troll” before, he he, is that your own term?!

  11. Nick Sutherland September 6, 2007 at 7:25 pm #

    yeah, I figured it sounded more accurate than “autocomplete feature”.

    I spent a few hours today trying to figure out how to trick FF and that’s what I came up with… seems to work reliably, but will require another method to set the “type” attribute for IE since it doesn’t seem to support direct access to it like I’ve used. I personally like that this method prevents the save in the first place.

    Any simpler methods of doing this I wonder?

  12. Nick Sutherland September 6, 2007 at 8:10 pm #

    Ok, the simplest method that I could figure out, for changing the “field2″ type attribute of “password” to “text” is by killing off the entire “field2″ input.

    So I wrapped the “field2″ HTML input element with a SPAN, then I modified things so that essentially:

    formPassParentObj = document.getElementById(“field2″).parentNode;
    formPassParentObj.innerHTML=””;

    should now work in almost any browser that can modify innerHTML… maybe… probably… *shrugs*

  13. Sydney Web Design November 3, 2008 at 2:35 am #

    Hi, thank you very much for this – it’s been a headache! :)

  14. gex August 17, 2009 at 2:50 am #

    hi, here is my solution: http://dev.gex.hu/autocomplete/

  15. Steven Kuck September 23, 2009 at 12:42 pm #

    This trick works with the latest (at time of post) FF, IE, Chrome, Safari, and Opera. It’s ugly, but it works: add a non-displayed password input that you ignore. It has to be the first “password” field in the form.
    <input style=”display:none” type=”password” name=”foilautofill”/>

    It shows up if the user disables page styles, but it does leave the other password fields unaltered by autofill.

    • orion November 15, 2011 at 11:52 am #

      thanks steven, your trick is neat.

  16. Stephen Embree November 23, 2009 at 9:54 am #

    Thanks Steven, your trick seems to work!

  17. Shad January 11, 2010 at 3:20 pm #

    Fantastic, thank you for that simple solution.

  18. Ritchie January 14, 2010 at 1:48 am #

    @Steven Kuck

    Thats a neat little trick. How does it work?

  19. Jim January 19, 2010 at 9:03 pm #

    @Steven Kuck

    Awesome! Just what I was looking for to solve several password troll headaches on our site.

  20. Mikey Benny March 4, 2010 at 11:25 am #

    Who are you to tell me I can’t save *my* password on *my own* computer?

    This is a little bit of control-freakishness and nanny-complex if you ask me.

  21. Jason March 4, 2010 at 3:40 pm #

    Mikey Benny :
    Who are you to tell me I can’t save *my* password on *my own* computer?
    This is a little bit of control-freakishness and nanny-complex if you ask me.

    haha. yea, these freaking nanny computer programmers are trying to control everything! stick it to the man!

    seriously though, this post wasn’t geared towards end-users and it isn’t really meant for wiping your login form. for example a “change password” form – you clearly don’t want the browser to auto-fill the fields.

    • eon September 20, 2010 at 10:08 am #

      Again to Mikey Benny:
      Who am I to tell you you can’t save your password? I’m somebody programming for an application that BY DESIGN will be running on SHARED computers, such as in an internet cafe, a school computer lab, etc etc (though these two are the most common).

      So sometimes it really is important to prevent saving of passwords. No reason to be calling us nannies.

      Steven Kuck:
      This is the best solution in our situation. Thank you very much. Seems Firefox (others too, probably) will only try to auto-fill the FIRST password input, so that’s an excellent non-javascript/jquery, valid HTML solution.

  22. Michael March 8, 2010 at 11:27 am #

    Here is a Mootools version:

    (function(){$$(‘input[type=password]‘).set(‘value’,”);}).delay(100);

    Now, I’m not sure if adding a domready or load event is necessary, so use your best judgment. I just happened to come across this site looking for something else.

  23. Prajyot January 21, 2013 at 7:10 am #

    this doesnt work for already stored passwords

  24. Daniel March 6, 2013 at 10:09 pm #

    Look guys, when Firefox disregards the autocomplete=”off” tag, it is because the user has deliberately set it up to do so. Typically by downloading and enabling an add-on module specifically designed to do so, such as

    https://addons.mozilla.org/fr/firefox/addon/remember-passwords/

    Now, I am both a web developper and a web user, mind you. If, as a user, I choose deliberately to force storage of a password against a sites wishes, thats my problem and my reponsibility as a user. As a developper, I do not think that it is appropriate or even permissible to override such an override.

    So much of this world’s misery is caused by people wanting to protect other people from themselves… Stop trying. You have no right

    On the other hand, users using override have no grounds to complain, even to themselves, if their security is compromised.

    It is about users being adults and web developpers treating them so.
    With due respect…

    • Jason March 7, 2013 at 12:31 am #

      Hey Daniel, thanks for being the third person to comment without actually reading even the first paragraph of the article – where I explain appropriate situations for doing this.

      I didn’t write this to prevent people from saving their passwords – I wrote it for admin screens where you don’t want fields to get auto-filled, for various reasons. One being that you are not editing your own data and you don’t want to auto-fill some other user’s password with your own personal info.

    • yup June 11, 2013 at 2:33 am #

      yup, this code-snippet is clearly malicious to the user

      • Jason June 15, 2013 at 1:59 am #

        At this point I can’t even tell who is joking anymore.

    • Shanimal August 4, 2014 at 4:16 pm #

      fwiw autocomplete=”off” is deprecated in FF3.

      https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Leave a Reply

Please leave these two fields as-is: