Input type=password, don't let browser remember the password

Question

I remember seeing a way to have an <input type="password" /> such that the browser will not prompt the user to save the password. But I'm drawing a blank. Is there an HTML attribute or some JavaScript trick that will do this?

Hypogeum

Duplicate of #32869 – Stain

Answer 1

Try using autocomplete="off". Not sure if every browser supports it, though. MSDN docs here.

EDIT: Note: most browsers have dropped support for this attribute. See Is autocomplete="off" compatible with all modern browsers?

This is arguably something that should be left up to the user rather than the web site designer.

Natalianatalie

You can also deliver the page with HTTPS and via HTTP header or META tag prevent caching. That way, the password also won't be stored (at least in Internet Explorer). – Rhinal

As regards validation, HTML5 adds the autocomplete attribute to the spec so it is fine now – Automotive

Note for future readers: All major browsers are moving towards ignoring the attribute. (see https://mcmap.net/q/57901/-is-autocomplete-quot-off-quot-compatible-with-all-modern-browsers) – Ophicleide

@RyanDansie thanks for the pointing that out. I've updated the answer. Old answer is ...old. – Natalianatalie

"This is arguably something that should be left up to the user rather than the web site designer." there are both technical and non technical reasons for having this. One-time passwords shouldn't be remembered, for example. Bank sites with "enter first digit of your PIN" is another. Don't forget that a business analyst might decide he wants a password field and remove the choice from the developer. – Saracen

Answer 2

<input type="password" autocomplete="off" />

I'd just like to add that as a user I think this is very annoying and a hassle to overcome. I strongly recommend against using this as it will more than likely aggravate your users.

Passwords are already not stored in the MRU, and correctly configured public machines will not even save the username.

Omura

+1 for "don't annoy your users". That's exactly what this kind of feature does. Just like sites that force off caching so the back button clears the form. EXTREMELY irritating. – Powerboat

+1 I completely agree. Its for an administrator edit customer profile page where you only enter a password if you intend to change it. That way the administrators don't change the password every time they go to edit the customer's information. – Hypogeum

It is very useful for credit card number fields. PayPal's form is stored in every browser, and anyone using your computer can re-input all the data, so you have to manually go and delete all remembered fields. – Hydromagnetics

On a form where the user can set a password that has nothing to do with their login, enabling autocomplete is actually the more annoying option - the browser may offer to save a password that it can't actually do anything with. Also, if security is a sensitive issue, I wouldn't assume that all public machines are correctly configured. – Runstadler

I'm using this for a one time use password. As jrb said, it would be very annoying if the browser stored it. – Pantywaist

Using this on a change password section. Enter Old, New and Confirm new. Having the old password remembered from initial login is security issue for us. – Anglicist

It is useful when we are dealing with a signup form with just a username and a password. You can't usually signup using the same email more than once. So saving this data is annoying in this case. – Balenciaga

Also useful on a "Create User" form where you don't want the name and/or password saved. Pity all browsers ignore this for username/password field pairs. – Venge

It's not always about users. What if it is a password change form in an administration portion of the site? In this case - and all cases - it's best not to circumvent remembering passwords and simply deal with the minor annoyance. edit: Lawrence said the same thing. Ultimately, never mess with password fields in a non-standard way or you are asking for trouble. – Tempest

Sometimes remembering passwords just doesn't make sense. For example, you configure how website will access some external system. For example SMTP password for account this site will use to send emails. Or FTP it will use to upload something. – Wessel

Answer 3

I solved in another way. You can try this.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

#another way

 <script type="text/javascript">    
 function setAutoCompleteOFF(tm){
    if(typeof tm =="undefined"){tm=10;}
    try{
    var inputs=$(".auto-complete-off,input[autocomplete=off]"); 
    setTimeout(function(){
        inputs.each(function(){     
            var old_value=$(this).attr("value");            
            var thisobj=$(this);            
            setTimeout(function(){  
                thisobj.removeClass("auto-complete-off").addClass("auto-complete-off-processed");
                thisobj.val(old_value);
            },tm);
         });
     },tm); 
    }catch(e){}
  }
 $(function(){                                              
        setAutoCompleteOFF();
    });
</script>

// you need to add attribute autocomplete="off" or you can add class .auto-complete-off into the input box and enjoy

Example:

  <input id="passfld" type="password" autocomplete="off" />
    OR
  <input id="passfld" class="auto-complete-off" type="password"  />

Pori

This prevents the browser for storing the password instead of preventing autocompletion which is a better solution in my scenario. – Daw

Thanks,worked for me on latest chrome Please Note: Used on an internal system where only Chrome is allowed, do more testing if using in production site. – Dingess

@AntoVinish, I hope my last solution work in firefox 40. – Pori

Answer 4

I tried the following and it seems that works to any browser:

<input id="passfld" type="text" autocomplete="off" />

<script type="text/javascript">
    $(function(){  
        var passElem = $("input#passfld");
        passElem.focus(function() { 
            passElem.prop("type", "password");                                             
        });
    });
</script>

This way is much more safer than using timeout techniques, because it guaranties that the input field will yield to password when the user focuses it.

Cogency

Answer 5

<input type="password" placeholder="Enter New Password" autocomplete="new-password">

Here you go.

Cistercian

This IS the way, there are a lot of workarounds out there, and it's as simple as this, tested with latest version of Firefox (v67) and Chrome (75). – Allegraallegretto

Chrome 80 will still offer to remember the password after submitting the form. – Vaporish

Answer 6

As for security issues, here is what a security consultant will tell you on the whole field issue (this is from an actual independent security audit):

HTML Autocomplete Enabled – Password fields in HTML forms have autocomplete enabled. Most browsers have a facility to remember user credentials entered into HTML forms.

Relative Risk: Low

Affected Systems/Devices: o https://*******/

I also agree this should cover any field that contains truly private data. I feel that it is alright to force a person to always type their credit card information, CVC code, passwords, usernames, etc whenever that site is going to access anything that should be kept secure [universally or by legal compliance requirements]. For example: purchase forms, bank/credit sites, tax sites, medical data, federal, nuclear, etc - not Sites like Stack Overflow or Facebook.

Other types of sites - e.g. TimeStar Online for clocking in and out of work - it's stupid, since I always use the same PC/account at work, that I can't save the credentials on that site - strangely enough I can on my Android but not on an iPad. Even shared PCs this wouldn't be too bad since clocking in/out for someone else really doesn't do anything but annoy your supervisor. (They have to go in and delete the erroneous punches - just choose not to save on public PCs).

Arnica

Just adding a comment here for a reason you would not want to save a password. I maintain a website with user accounts where admins can change a user's password. The client is currently infuriated that Chrome offers to save the password entered on the "change password" form every single time for every user, because it misidentifies the edit user form as a login form. Giving simple instructions like "just click Never Remember Password" are beyond them, apparently. – Gaza

@Gaza Doesn't "Never Remember Password" usually mean "never remember password for this site"? – Fleischer

I honestly have no idea whether it did back in 2014 when I wrote this comment. – Gaza

Answer 7

Here's the best answer, and the easiest! Put an extra password field in front of your input field and set the display:none , so that when the browser fills it in, it does it in an input that you don't care about.

Change this:

<input type="password" name="password" size="25" class="input" id="password" value="">

to this:

<input type="password" style="display:none;">
<input type="password" name="password" size="25" class="input" id="password" value="">

Unintentional

Actually, it works if 2 password fields are in the form, but new browser ignore 2nd password if not visible and enabled ;( – Antimony

Using display:none does not work for me (Chrome 61 OSX), but this does: <input type="password" style="position: absolute; top: -1000px;"> – Fakieh

Answer 8

seeing as autocomplete=off is deprecated, I suggest a more recent solution.

Set your password field to a normal text field, and mask your input with "discs" using CSS. the code should look like this:

<input type="text" class="myPassword" /> 

input .myPassword{
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

Please note that this may not work propely on firefox browsers, and an additional walkaround is needed. Read more about it here :https://mcmap.net/q/58024/-how-to-prevent-a-browser-from-storing-passwords.

The solution was taken from this link, but to comply with SO "no-hotlinks" i summarized it here.

Pangolin

Answer 9

Read also this answer where he is using this easy solution that works everywhere (see also the fix for Safari mobile):

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

Mariejeanne

Answer 10

You can use JQuery, select the item by id:

$("input#Password").attr("autocomplete","off");

Or select the item by type:

$("input[type='password']").attr("autocomplete","off");

Or also:

You can use pure Javascript:

document.getElementById('Password').autocomplete = 'off';

Henriettehenriha

Answer 11

you can also use it like following

$('#Password').attr("autocomplete", "off");
setTimeout('$("#Password").val("");', 2000);

Seine

Answer 12

you can use this: autocomplete="new-password"

Example:

<input type="password" placeholder="Enter New Password" autocomplete="new-password">

Roughshod

This answer already exists in this question. You should review all answers before you post your own. – Tenpenny

Answer 13

In the case of most major browsers, having an input outside of and not connected to any forms whatsoever tricks the browser into thinking there was no submission. In this case, you would have to use pure JS validation for your login and encryption of your passwords would be necessary as well.

Before:

<form action="..."><input type="password"/></form>

After:

<input type="password"/>

Marauding

By the way, this is a trick you probably should not use. By not using a form tag, your code becomes HTML4 by default and makes it harder to validate your users' accounts. – Marauding

Answer 14

I've found the following works on Firefox and Chrome.

<form ... > <!-- more stuff -->
<input name="person" type="text" size=30 value="">
<input name="mypswd" type="password" size=6 value="" autocomplete="off">
<input name="userid" type="text" value="security" style="display:none">
<input name="passwd" type="password" value="faker" style="display:none">
<!-- more stuff --> </form>

All of these are within the forms section. "person" and "mypswd" are what you want, but the browser will save "userid" and "passwd" once, and never again since they don't change. You could eliminate the "person" field if you don't really need it. In that case, all you want is the "mypswd" field, which could change in some way known to the user of your web-page.

Culminate

Answer 15

The only way I can get firefox, edge, and Internet explorer to turn off autocomplete is to add autocomplete="false" in my form statement like:

  <form action="postingpage.php" autocomplete="false" method="post">

and I have to add the autocomplete="off" to my form input and change the type to text Like:

     <input type="text" autocomplete="off">

It seems that this html code needs to be standardized with the browsers. the form type = password should be revised so that it overrides browser settings. The only issue I have is that I lost my input masking. But on the bright side the annoying "this site is not secure" is not showing up in firefox.

for me, its not a big deal since the user is already authenticated and its my change user name and password portion of it

Softhearted

DO NOT DO THIS. The data will still be sent in plaintext through the network, which is the entire problem with HTTP (not HTTPS) in the first place, hence your "annoying" warning message. It makes no difference that the user is already authenticated because a Man In The Middle can still see the plaintext data and server-side logging may be configured differently (could store the request headers, whereas there are other problems altogether if it would have stored POST data under HTTPS). – Tempest

https encrypts the traffic. If you are using this as part of an Internet application that is public, you do this anyways. Post method prevents bookmarking, and multi Iframes of php code inside an HTML prevents URL injection. Technically, you supposed to put your full path in. If you are deploying then I would recommend loading a $_SESSION variable with the base url that is written in text instead of looking at $_SERVER variables. $_SERVER['HTTP_HOST'], and $_SERVER['PHP_SELF'] should only be used in non public environments because both have several exploits. – Softhearted

Btw, my example is for closed systems that are not connected to the internet in any way – Softhearted

no one has touched on using an encyption scheme executed with "java onclick" then submit the form after encryption routine. – Softhearted