How to prevent a browser from storing password

问题:

I need to stop browsers from storing the username & password values, because I'm working on a web application which contains more secure data. My client asked me to do this.

I tried the autocomplete="off" attribute in the HTML form & password fields. But it is not working in the latest browsers like Chrome 55, Firefox 38+, IE 11...etc.

What is the best solution for this?

回答1:

This is not possible in modern browsers, and for good reason. Modern browsers offer password managers, which enable users to use stronger passwords than they would usually.

As explained by MDN: How to Turn Off Form Autocompletion:

Modern browsers implement integrated password management: when the user enters a username and password for a site, the browser offers to remember it for the user. When the user visits the site again, the browser autofills the login fields with the stored values.

Additionally, the browser enables the user to choose a master password that the browser will use to encrypt stored login details.

Even without a master password, in-browser password management is generally seen as a net gain for security. Since users do not have to remember passwords that the browser stores for them, they are able to choose stronger passwords than they would otherwise.

For this reason, many modern browsers do not support autocomplete="off" for login fields:

• If a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.

• If a site sets autocomplete="off" for username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.

This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).

If an author would like to prevent the autofilling of password fields in user management pages where a user can specify a new password for someone other than themself, autocomplete="new-password" should be specified, though support for this has not been implemented in all browsers yet.

回答2:

Thank you for giving a reply to me. I followed the below link

Disable browser 'Save Password' functionality

I resolved the issue by just adding readonly & onfocus="this.removeAttribute('readonly');" attributes besides autocomplete="off" to the inputs as shown below.

<input type="text" name="UserName" autocomplete="off" readonly 
onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
onfocus="this.removeAttribute('readonly');" >

This is working fine for me.

回答3:

Here is a pure HTML/CSS solution for Chrome tested in Version 65.0.3325.162 (Official Build) (64-bit).

Set the input type="text" and use CSS text-security:disc to mimic type="password".

<input type="text" name="username">
<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;">

• Note: Works in FireFox but CSS moz-text-security is Deprecated/Removed. To fix this create a CSS font-face made only of dots and use font-family: 'dotsfont';.

  Source: Get input type=text to look like type=password

  The Source above contains a link to a work-around for CSS moz-text-security and -webkit-text-security property.

  Source: https://github.com/kylewelsby/dotsfont

  As far as i have tested this solution works for Chrome, FireFox Version 59.0 (64-bit), IE Version 11.0.9600 aswell as the IE Emulators ie5 and greater.

回答4:

You should be able to make a fake hidden password box to prevent it.

<form>
  <div style="display:none">
    <input type="password" tabindex="-1"/>
  </div>
  <input type="text" name="username" placeholder="username"/>
  <input type="password" name="password" placeholder="password"/>
</form>

回答5:

I think it is not possible in latest browsers. Only way you can do that take another hidden password field and use it for your logic after taking value from visible password field while submitting and put dummy string in visible password field. In this case browser can store dummy string instead of actual password.

回答6:

While the solution given above are very correct, if you absolutely need the feature then you can mimic the situation with custom input using text-field and javascript.

For secure usage, you can use any crypto technique. So this way you will bypass the browser's password saving behavior.

If you want to know more about the idea, we can discuss that on chat. But the gist is discussed above and you can get the idea.

回答7:

try this it may be help you, for more information visit Input type=password, don't let browser remember the password

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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="passfld" type="password" autocomplete="off" />
<input type="submit">

回答8:

One way would be to generate random input names and work with them.

This way, browsers will be presented with the new form each time and wont be able to pre-populate the input fields. If you provide us with some sample code (do you have a js spa app or some server side rendering) i would be happy to help you in the implementation.

Regards,

回答9:

One thing you can do is ask your users to disable saving the password for your site. This can be done browser wide or origin wide.

Something, else you can do is to force the inputs to be empty after the page is loaded (and after the browser auto completed the fields). Put this script at the end of the <body> element.

userIdInputElement.value = "";
userPasswordInputElement.value = "";

回答10:

I needed this a couple of years ago for a specific situation: Two people who know their network passwords access the same machine at the same time to sign a legal agreement. You don't want either password saved in that situation because saving a password is a legal issue not a technical one where both the physical and temporal presence of both individuals is mandatory. Now, I'll agree that this is a rare situation to encounter, but such situations do exist and built-in password managers in web browsers are unhelpful.

My technical solution to the above was to swap between password and text types and make the background color match the text color when the field is a plain text field (thereby continuing to hide the password). Browsers don't ask to save passwords that are stored in plain text fields.

jQuery plugin:

https://github.com/cubiclesoft/php-flexforms-modules/blob/master/password-manager/jquery.stoppasswordmanager.js

Relevant source code from the above link:

(function($) {
$.fn.StopPasswordManager = function() {
    return this.each(function() {
        var $this = $(this);

        $this.addClass('no-print');
        $this.attr('data-background-color', $this.css('background-color'));
        $this.css('background-color', $this.css('color'));
        $this.attr('type', 'text');
        $this.attr('autocomplete', 'off');

        $this.focus(function() {
            $this.attr('type', 'password');
            $this.css('background-color', $this.attr('data-background-color'));
        });

        $this.blur(function() {
            $this.css('background-color', $this.css('color'));
            $this.attr('type', 'text');
            $this[0].selectionStart = $this[0].selectionEnd;
        });

        $this.on('keydown', function(e) {
            if (e.keyCode == 13)
            {
                $this.css('background-color', $this.css('color'));
                $this.attr('type', 'text');
                $this[0].selectionStart = $this[0].selectionEnd;
            }
        });
    });
}
}(jQuery));

Demo:

https://barebonescms.com/demos/admin_pack/admin.php

Click "Add Entry" in the menu and then scroll to the bottom of the page to "Module: Stop Password Manager".

回答11:

You can do this way in google chrome by going to setting/Password and Forms > Disable [Enable Autofill to fill out web forms in a single click.] and Disable [Offer to save passwords with Google Smart Lock for Passwords.]