Masking input characters without type=password

gislikonrad picture gislikonrad · Mar 17, 2014 · Viewed 27.9k times · Source

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

rafaelcastrocouto picture rafaelcastrocouto · Mar 17, 2014

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.