Disable browser 'Save Password' functionality
I'm not sure if it'll work in all browsers but you should try setting autocomplete="off" on the form.
<form id="loginForm" action="login.cgi" method="post" autocomplete="off">
The easiest and simplest way to disable Form and Password storage prompts and prevent form data from being cached in session history is to use the autocomplete form element attribute with value "off".
From https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
Some minor research shows that this works in IE to but I'll leave no guarantees ;)
@Joseph: If it's a strict requirement to pass XHTML validation with the actual markup (don't know why it would be though) you could theoretically add this attribute with javascript afterwards but then users with js disabled (probably a neglectable amount of your userbase or zero if your site requires js) will still have their passwords saved.
Example with jQuery:
$('#loginForm').attr('autocomplete', 'off');
In addition to
autocomplete="off"
Use
readonly onfocus="this.removeAttribute('readonly');"
for the inputs that you do not want them to remember form data (username
, password
, etc.) 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');" >
Tested on the latest versions of the major browsers i.e. Google Chrome
, Mozilla Firefox
, Microsoft Edge
, etc. and works like a charm. Hope this helps.
I had been struggling with this problem a while, with a unique twist to the problem. Privileged users couldn't have the saved passwords work for them, but normal users needed it. This meant privileged users had to log in twice, the second time enforcing no saved passwords.
With this requirement, the standard autocomplete="off"
method doesn't work across all browsers, because the password may have been saved from the first login. A colleague found a solution to replace the password field when it was focused with a new password field, and then focus on the new password field (then hook up the same event handler). This worked (except it caused an infinite loop in IE6). Maybe there was a way around that, but it was causing me a migraine.
Finally, I tried to just have the username and password outside of the form. To my surprise, this worked! It worked on IE6, and current versions of Firefox and Chrome on Linux. I haven't tested it further, but I suspect it works in most if not all browsers (but it wouldn't surprise me if there was a browser out there that didn't care if there was no form).
Here is some sample code, along with some jQuery to get it to work:
<input type="text" id="username" name="username"/>
<input type="password" id="password" name="password"/>
<form id="theForm" action="/your/login" method="post">
<input type="hidden" id="hiddenUsername" name="username"/>
<input type="hidden" id="hiddenPassword" name="password"/>
<input type="submit" value="Login"/>
</form>
<script type="text/javascript" language="JavaScript">
$("#theForm").submit(function() {
$("#hiddenUsername").val($("#username").val());
$("#hiddenPassword").val($("#password").val());
});
$("#username,#password").keypress(function(e) {
if (e.which == 13) {
$("#theForm").submit();
}
});
</script>