How to workaround browsers ‘save password’ & ‘password autocomplete’ features
Everyone is familiar with the browser’s “save password” and auto-fill features which provides a smooth & comfortable user experience when filling forms and logging-in to your favorite web sites.
But what happens when you are forced to disable the password auto-fill due to security reasons? Or even worse, what if you need to prevent the browser from suggesting to save passwords? This is where it gets complicated.
Autocomplete=off is dead
So, you’ve been looking for a way to disable the auto-fill feature in your HTML form but found that Chrome ignores the autocomplete=”off” attribute? bummer.
There are many posts about it and a very long thread from chromium team, but the bottom line is that there is no built-in solution that enables you to disable this feature.There is no cross browser solution, that is an HTML standard.
I’ll explain how to workaround the password autocomplete for Chrome and Firefox but keep in mind that it does not work on Safari as far as I’ve checked. The idea is to fool the browser into auto-filling the wrong input field.
I know, it sounds stupid, but it works like charm and I’ve seen major banks websites that implement the same trick.
How does it work?
Let’s assume that your HTML form is a simple login form that contains the following elements:
<input type="user" name="user"/>
<input type="password" name="password" autocomplete="off"/>The way to fool the browser is to add another password input field right above the existing password field. This time it will be hidden and the browser will auto fill it while ignoring the actual visible password input field.
<input type="password" style="visibility: hidden">Again, keep in mind that this is not cross browser and there is no telling how long this workaround will hold.
Save password? no thank you!
Working with secured applications & PCI DSS rules got me to the point where I needed to disable the browser save password feature. It wasn’t an official demand but a part of trying to disable the auto-fill feature — if you can’t save the password, the browser can’t auto fill it. Sweet!
The worse part of the save password feature is that you can see the saved passwords as plain text within the browser security settings(!) . In chrome you are asked to provide windows credentials but not in Firefox. Firefox will only ask you if you are sure you want to see the saved passwords…lame.
How does the browser even know when to suggest the save password pop up?
I did not go deep into investigating this, but I do know that all it takes is to have an input type password in your HTML. You don’t even need to have a <form> element.
Turns out that if you replace <input type=”password”/> with <input type=”text”/> the browser no longer offers to save password. That great news, but what about masking the password? After all, the whole idea of the special HTML input is to mask the password so that no one around you sees what you are typing.
The solution for masking the text is done by CSS.
Here’s an example of what you need to achieve the masking. This was tested successfully on Chrome, Safari and Firefox.
input {
text-security:disc;
-webkit-text-security:disc;
-mox-text-security:disc;
}BTW, some people report that using AJAX to send the login data did not trigger the save password feature, but it did not work when I tested it.
Is this solution secured enough?
There is no straight answer to this question. The security impacts of this solution are discussed in stackoverflow.
At the moment of writing this post I’m not sure that this workaround is compliant with security standards and I’m sure your PCI compliance officer won’t like it. but on the other hand, there’s no other way to workaround it,
Yet.