Advertisement
Advertisement


How do you disable browser Autocomplete on web form field / input tag?


Question

How do you disable autocomplete in the major browsers for a specific input (or form field)?

2020/08/06
1
2843
8/6/2020 10:46:08 AM

Accepted Answer

Firefox 30 ignores autocomplete="off" for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:

  • The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.
  • We are the third browser to implement this change, after IE and Chrome.

According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete prevents form data from being cached in older browsers.

<input type="text" name="foo" autocomplete="off" />
2019/06/02
2664
6/2/2019 3:12:01 AM

In addition to autocomplete=off, you could also have your form fields names be randomized by the code that generates the page, perhaps by adding some session-specific string to the end of the names.

When the form is submitted, you can strip that part off before processing them on the server side. This would prevent the web browser from finding context for your field and also might help prevent XSRF attacks because an attacker wouldn't be able to guess the field names for a form submission.

2018/05/07

Most of the major browsers and password managers (correctly, IMHO) now ignore autocomplete=off.

Why? Many banks and other "high security" websites added autocomplete=off to their login pages "for security purposes" but this actually decreases security since it causes people to change the passwords on these high-security sites to be easy to remember (and thus crack) since autocomplete was broken.

Long ago most password managers started ignoring autocomplete=off, and now the browsers are starting to do the same for username/password inputs only.

Unfortunately, bugs in the autocomplete implementations insert username and/or password info into inappropriate form fields, causing form validation errors, or worse yet, accidentally inserting usernames into fields that were intentionally left blank by the user.

What's a web developer to do?

  • If you can keep all password fields on a page by themselves, that's a great start as it seems that the presence of a password field is the main trigger for user/pass autocomplete to kick in. Otherwise, read the tips below.
  • Safari notices that there are 2 password fields and disables autocomplete in this case, assuming it must be a change password form, not a login form. So just be sure to use 2 password fields (new and confirm new) for any forms where you allow
  • Chrome 34, unfortunately, will try to autofill fields with user/pass whenever it sees a password field. This is quite a bad bug that hopefully, they will change the Safari behavior. However, adding this to the top of your form seems to disable the password autofill:

    <input type="text" style="display:none">
    <input type="password" style="display:none">
    

I haven't yet investigated IE or Firefox thoroughly but will be happy to update the answer if others have info in the comments.

2018/01/24

Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.

This workaround is in addition to apinstein's post about browser behavior.

fix browser autofill in read-only and set writable on focus (click and tab)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

Update: Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Because Browser auto fills credentials to wrong text field!?

I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it auto fills (just guessing due to observation) the nearest textlike-input field, that appears prior the password field in DOM. As the browser is the last instance and you can not control it,

This readonly-fix above worked for me.

2018/01/24

The solution for Chrome is to add autocomplete="new-password" to the input type password. Please check the Example below.

Example:

<form name="myForm"" method="post">
   <input name="user" type="text" />
   <input name="pass" type="password" autocomplete="new-password" />
   <input type="submit">
</form>

Chrome always autocomplete the data if it finds a box of type password, just enough to indicate for that box autocomplete = "new-password".

This works well for me.

Note: make sure with F12 that your changes take effect, many times browsers save the page in cache, this gave me a bad impression that it did not work, but the browser did not actually bring the changes.

2020/03/05

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

This will work in Internet Explorer and Mozilla FireFox, the downside is that it is not XHTML standard.

2018/01/06

Source: https://stackoverflow.com/questions/2530
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]