March 7, 2007

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 Comments on “Forcing Firefox to obey autocomplete="off" for password fields

Tara
March 29, 2007 at 11:13 am

Thanks, that’s useful. Cheers.

Reply
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);});

Reply
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.

Reply
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.

Reply
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!

Reply
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(”) });

Reply
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();
}
}

Reply
Nick Sutherland
September 6, 2007 at 5:59 pm

…continued…

Reply
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

Reply
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?!

Reply
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?

Reply
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*

Reply
Sydney Web Design
November 3, 2008 at 2:35 am

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

Reply
gex
August 17, 2009 at 2:50 am

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

Reply
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.

Reply
orion
November 15, 2011 at 11:52 am

thanks steven, your trick is neat.

Reply
Stephen Embree
November 23, 2009 at 9:54 am

Thanks Steven, your trick seems to work!

Reply
Shad
January 11, 2010 at 3:20 pm

Fantastic, thank you for that simple solution.

Reply
Ritchie
January 14, 2010 at 1:48 am

@Steven Kuck

Thats a neat little trick. How does it work?

Reply
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.

Reply
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.

Reply
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.

Reply
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.

Reply
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.

Reply
Prajyot
January 21, 2013 at 7:10 am

this doesnt work for already stored passwords

Reply
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…

Reply
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.

Reply
yup
June 11, 2013 at 2:33 am

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

Reply
Jason
June 15, 2013 at 1:59 am

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

Reply
Shanimal
August 4, 2014 at 4:16 pm

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>