Masking input characters without type=password

Question

So I have a problem with newer browsers saving passwords. Say I have a password box like so:

<input type="password" autocomplete="off" />

New browsers like IE11 and Safari in iOS 7.1 have started ignoring the autocomplete="off" in password boxes specifically and offer the user to save the password. In my company (a bank), we view this as a security concern.

I was wondering if anybody has solved this problem yet. Maybe somebody has written a javascript plugin that masks a normal input[type=text] so that the autocomplete="off" attribute will be respected.

Update:

For a little more information, here is the documentation for autocomplete on msdn: http://msdn.microsoft.com/en-us/library/ie/ms533486%28v=vs.85%29.aspx

Answer 1

You can make a fake password input with type text using a custom font:

@font-face {   font-family: 'password';   font-style: normal;   font-weight: 400;   src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf); }  input.key {   font-family: 'password';   width: 100px; height: 16px;   }

<p>Password: <input class="key" type="text" autocomplete="off" /></p>

JSBin Demo

Notice that this only raises more security concerns.

Answer 2

Here's an idea, but I'm suggesting it for cases where browsers get the autofill wrong for passwords that aren't used for logins. There probably needs to be a better standard for identifying login screens so browsers don't have to use heuristics looking for fields with type="password".

Load the form with the password field with type="text", so browsers' autocompletion algorithms will ignore it. When the user inputs something in that field, switch its type="password".

I'm not much of a JavaScript programmer, but I hacked a JSFiddle to show how it theoretically works.

Perhaps onfocus would be a better way to go, too, but I didn't try it.