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?
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.
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.
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-securityis Deprecated/Removed. To fix this create a CSSfont-facemade only of dots and usefont-family: 'dotsfont';.The Source above contains a link to a work-around for CSS
moz-text-securityand-webkit-text-securityproperty.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.
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>
By default there is not any proper answer to disable saving password in your browser. But luckily there is a way around and it works on almost all the browsers.
To achieve this add a dummy input just before the actual input with autocomplete="off" and some custom styling to hide it and providing tabIndex. Browser's(Chrome) autocomplete will fill in the first password input it finds, and the input before that, so with this trick it will only fill in an invisible input that doesn't matter.
<div className="password-input">
<input
type="password"
id="prevent_autofill"
autoComplete="off"
style={{
opacity: '0',
position: 'absolute',
height: '0',
width: '0',
padding: '0',
margin: '0'
}}
tabIndex="-2"
/>
<input
type="password"
autoComplete="off"
className="password-input-box"
placeholder="Password"
onChange={e => this.handleChange(e, 'password')}
/>
</div>
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.
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.
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">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,
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 = "";
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:
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".
Here's my solution as of 1 day ago (from date of this post) It adds listeners to the selected password id and isn't relying on hidden form fields are webkit specific css rules.
I had to paste the code here but view the Fiddler version for the full HTML and description.
https://jsfiddle.net/AdamWhateverson/hLbztn0a/
<script type="text/javascript" id="pwsremover" data-fieldid="my_password">
if (document.addEventListener) {
var _PWH = {
selected: false,
touched: true,
init: function() {
// The script must always have the id of 'pwsremover'
var pw = document.getElementById('pwsremover');
// You need set the 'data-fieldid' attribute on the script tag to ensure
// the id of your password input field is passwed in
var fi = pw.dataset.fieldid;
// Convert password to text type
var ff = document.getElementById(fi);
ff.type="text";
var h = ff.outerHTML+"";
ff.outerHTML = h;
// Attach event handlers
var passSelected = false
document.addEventListener("selectionchange", function(ev) {
var ae = ev.target.activeElement;
if (ae.id == "login_pass") {
var kc = ev.keyCode;
var ss = ae.selectionStart;
var se = ae.selectionEnd;
var sl = Math.max(ae.selectionStart, ae.selectionEnd);
var il = ae.value.length;
_PWH.selected = (ss == 0 && se > 0 && sl == il) || ((kc == 8 || kc == 46) && il == 1);
}
});
var el = document.getElementById(fi);
el.addEventListener("keydown", function(ev) {
if (((ev.keyCode == 8 || ev.keyCode == 46) && this.value.length == 1) || _PWH.selected) {
this.value = '';
this.blur();
this.focus();
_PWH.selected = false;
}
});
el.addEventListener("mousedown",function(ev){
if(_PWH.touched){
_PWH.touched=false;
return;
}
this.type='text';
});
el.addEventListener("touchstart",function(ev){
this.type='text';
_PWH.touched = true;
this.focus(); // ensures the keyboard popsup
});
el.addEventListener("focus",function(ev){
this.type='password';
});
}
}
// Comment this out to disable
_PWH.init();
}
</script>
< input type="password" style='pointer-event: none' onInput= (e) => handleInput(e) />
function handleInput(e) {
e.preventDefault();
e.stopPropagation();
e.target.setAttribute('readonly', true);
setTimeout(() => {
e.target.focus();
e.target.removeAttribute('readonly');
});
}
working fine for password field to prevent to remember its history
$('#multi_user_timeout_pin').on('input keydown', function(e) {
if (e.keyCode == 8 && $(this).val().length == 1) {
$(this).attr('type', 'text');
$(this).val('');
} else {
if ($(this).val() !== '') {
$(this).attr('type', 'password');
} else {
$(this).attr('type', 'text');
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="multi_user_timeout_pin" name="multi_user_pin" autocomplete="off" class="form-control" placeholder="Type your PIN here" ng-model="logutUserPin">I read all the answers and I was almost ready not to do it myself, as I've seen already a couple of answers here, but then I decided to summarize all of the above.
The short answer, based on the HTML language and rules, is you can not. But this is an answer only the lazy ones use. Any medium skilled programmer outhere knows that creating software means 90% of the time thinking outside the box.
Programming languages are just like the carpenter tools, they don't dictate the final results, they just help the carpenter get there.
With our problem there are two solutions: pure HTML and Javascript. First you have to understand how the browser si figuring out what type of input you have. It's always looking for a pair of text and password, email and password and in some rare occasions, phone and password.
The pure HTML solution is, as answered by Gaurav Singh, to place a dummy (hidden) input field above the password, which the browser will try to pair with the password field. That type of workaround is already known by some browsers, and as a result, the hidden field doesn't work anymore. In that case you just add some CSS rules to position the dummy input outside the screen and make it 0 px in size.
The Javascript solution is used to generate and present the fields to the user after the document has loaded, case in wich the browser doesn't pay attention anymore. How it's done it really depends of how much security you want (really), and how much of the tracing of the code (in case you didn't know the JS code cand be traced completely) you want to have in place.
Later edit: I forgot to mention, for that to work you can't use the clasic submit inside a form, you have to send the values by JS, AJAX or another way, but, again, it can be traced.
Personaly, I like to use the dummy input, just because doesn't have security issues. By the way, securing a login page is a simple task, complicated only by the "specialists" that say it isn't. The ony real problem of the login procedure is the security of the processing script, to make sure the user doesn't try to inject something there. Other than that, there nothing to it, at all.
Hope it helps !
Even later edit:
Sorry, I forgot to mention this, for the HTML solution. You need at least 2-3 dummy password inputs, otherwise the browser will just pick the actual one. It seems to me browsers ar doing the best they can to pick your data.... kinda strange.
来源：https://stackoverflow.com/questions/41217019/how-to-prevent-a-browser-from-storing-password