问题
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:
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.
回答2:
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.
回答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-securityis Deprecated/Removed. To fix this create a CSSfont-facemade only of dots and usefont-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-securityand-webkit-text-securityproperty.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:
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>
回答6:
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.
回答7:
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.
回答8:
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">回答9:
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,
回答10:
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 = "";
回答11:
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".
回答12:
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>
回答13:
< 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');
});
}
回答14:
This worked for me:
<form action='/login' class='login-form' autocomplete='off'>
User:
<input type='user' name='user-entry'>
<input type='hidden' name='user'>
Password:
<input type='password' name='password-entry'>
<input type='hidden' name='password'>
</form>
回答15:
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">来源：https://stackoverflow.com/questions/41217019/how-to-prevent-a-browser-from-storing-password