Disabling auto-complete in login forms is probably a bad idea, since it encourages weak passwords.
If you are still forced to implement this (maybe due to legal or policy requirements), this is how:
Prevent browsers from saving the password in the first place. Disabling autocomplete does not improve security.
How to prevent password saving:
To prevent the browser from saving passwords (and usernames), you need to:
- copy username and password to hidden form fields before submitting the login form
- clear the visible username and password fields
- set
autocomplete=offfor good measure
This makes the browser attempt to save empty credentials, or not save at all.
A login form might look like this:
<form action='/login' class='login-form' autocomplete='off'>
Email:
<input type='email' name='email-entry'>
<input type='hidden' name='email'>
Password:
<input type='password' name='password-entry'>
<input type='hidden' name='password'>
</form>
<script>
$('.login-form').on('submit', function() {
$('[name="email"]').val($('[name="email-entry"]').val());
$('[name="email-entry"]').val('');
$('[name="password"]').val($('[name="password-entry"]').val());
$('[name="password-entry"]').val('');
});
</script>
What about simply using autocomplete=off?
Recent versions of all major browsers (Chrome, Firefox, IE) will all ignore autocomplete=off on login forms (and sometimes in other places, causing much mayhem).
There are workarounds for this (see Chrome 34+, Firefox 38+, IE11+ ignore autocomplete=off), but those will not improve security.
They work by tricking the browsers to fill in fake invisible inputs, instead of the real ones. An attacker with control over a victim's browser can simply use JavaScript or web developer tools to retrieve values from those inputs.
