One of the joys of working for a government healthcare agency is having to deal with all of the paranoia around dealing with PHI (Protected Health Information). Don\'t get m
I tested lots of solutions. Dynamic password field name, multiple password fields (invisible for fake ones), changing input type from "text" to "password", autocomplete="off", autocomplete="new-password",... but nothing solved it with recent browser.
To get rid of password remember, I finally treated the password as input field, and "blur" the text typed.
It is less "safe" than a native password field since selecting the typed text would show it as clear text, but password is not remembered. It also depends on having Javascript activated.
You will have estimate the risk of using below proposal vs password remember option from navigator.
While password remember can be managed (disbaled per site) by the user, it's fine for a personal computer, not for a "public" or shared computer.
I my case it's for a ERP running on shared computers, so I'll give it a try to my solution below.
<input style="background-color: rgb(239, 179, 196); color: black; text-shadow: none;" name="password" size="10" maxlength="30" onfocus="this.value='';this.style.color='black'; this.style.textShadow='none';" onkeypress="this.style.color='transparent'; this.style.textShadow='1px 1px 6px green';" autocomplete="off" type="text">
I was given a similar task to disable the auto-filling up of login name and passwords by browser, after lot of trial and errors i found the below solution to be optimal. Just add the below controls before your original controls.
<input type="text" style="display:none">
<input type="text" name="OriginalLoginTextBox">
<input type="password" style="display:none">
<input type="text" name="OriginalPasswordTextBox">
This is working fine for IE11 and Chrome 44.0.2403.107
The simplest way to solve this problem is to place INPUT fields outside the FORM tag and add two hidden fields inside the FORM tag. Then in a submit event listener before the form data gets submitted to server copy values from visible input to the invisible ones.
Here's an example (you can't run it here, since the form action is not set to a real login script):
<!doctype html>
<html>
<head>
<title>Login & Save password test</title>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<!-- the following fields will show on page, but are not part of the form -->
<input class="username" type="text" placeholder="Username" />
<input class="password" type="password" placeholder="Password" />
<form id="loginForm" action="login.aspx" method="post">
<!-- thw following two fields are part of the form, but are not visible -->
<input name="username" id="username" type="hidden" />
<input name="password" id="password" type="hidden" />
<!-- standard submit button -->
<button type="submit">Login</button>
</form>
<script>
// attache a event listener which will get called just before the form data is sent to server
$('form').submit(function(ev) {
console.log('xxx');
// read the value from the visible INPUT and save it to invisible one
// ... so that it gets sent to the server
$('#username').val($('.username').val());
$('#password').val($('.password').val());
});
</script>
</body>
</html>
I have tested that adding autocomplete="off" in form tag in all major browsers. In fact, Most of the peoples in US using IE8 so far.
Browser not asking "save password". Also, previously saved username & password not populated.
Updated on June 11, 2014
Finally, below is a cross browser solution using javascript and it is working fine in all browsers.
Need to remove "form" tag in login form. After client side validation, put that credentials in hidden form and submit it.
Also, add two methods. one for validation "validateLogin()" and another for listening enter event while click enter in textbox/password/button "checkAndSubmit()". because now login form does not have a form tag, so enter event not working here.
HTML
<form id="HiddenLoginForm" action="" method="post">
<input type="hidden" name="username" id="hidden_username" />
<input type="hidden" name="password" id="hidden_password" />
</form>
Username: <input type="text" name="username" id="username" onKeyPress="return checkAndSubmit(event);" />
Password: <input type="text" name="password" id="password" onKeyPress="return checkAndSubmit(event);" />
<input type="button" value="submit" onClick="return validateAndLogin();" onKeyPress="return checkAndSubmit(event);" />
Javascript
//For validation- you can modify as you like
function validateAndLogin(){
var username = document.getElementById("username");
var password = document.getElementById("password");
if(username && username.value == ''){
alert("Please enter username!");
return false;
}
if(password && password.value == ''){
alert("Please enter password!");
return false;
}
document.getElementById("hidden_username").value = username.value;
document.getElementById("hidden_password").value = password.value;
document.getElementById("HiddenLoginForm").submit();
}
//For enter event
function checkAndSubmit(e) {
if (e.keyCode == 13) {
validateAndLogin();
}
}
Good luck!!!
Since most of the autocomplete
suggestions, including the accepted answer, don't work in today's web browsers (i.e. web browser password managers ignore autocomplete
), a more novel solution is to swap between password
and text
types and make the background color match the text color when the field is a plain text field, which continues to hide the password while being a real password field when the user (or a program like KeePass) is entering a password. Browsers don't ask to save passwords that are stored in plain text fields.
The advantage of this approach is that it allows for progressive enhancement and therefore doesn't require Javascript for a field to function as a normal password field (you could also start with a plain text field instead and apply the same approach but that's not really HIPAA PHI/PII-compliant). Nor does this approach depend on hidden forms/fields which might not necessarily be sent to the server (because they are hidden) and some of those tricks also don't work either in several modern browsers.
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".
Disclaimer: While this approach works for sighted individuals, there might be issues with screen reader software. For example, a screen reader might read the user's password out loud because it sees a plain text field. There might also be other unforeseen consequences of using the above plugin. Altering built-in web browser functionality should be done sparingly with testing a wide variety of conditions and edge cases.
As of today, most promising answer seems to be of @murat I tested it myself on Firefox but as others suggested in comments, it still asks for password the first time. Then it doesn't afterwards no matter how many times you re-enter password(submitting using Ajax in my case). If the page is reloaded, above behaviour is repeated.
I thought banking sites must be having such functionalities so I checked onlinesbi.com and it does it perfectly.! It doesn't ask to store password ever, in any browser. I tried to check the source but couldn't figure out, it's using some combination of hidden elements plus autocomplete and js. I couldn't figure it out but there are plenty on this platform and hoping someone definitely would figure out and post it here.