When Jeff Atwood of the blog Coding Horror (which doesn’t have the same content as The Daily WTF, despite its name) doesn’t use the word “ecosystem” to describe the software world every fifth damn post, sometimes he brings up an interesting topic such as how to handle password input. I’ve personally experienced the frustration of users not knowing what the fuck they are typing when it comes to an asterisk-echoed password field. The past few versions of Windows have offered a bubble popup to warn caps lock is enabled, but some additional checks should to be put into account. Not to mention that it take five minutes just to get across the instructions to do a Start » Run » [type password here] just to ensure the keyboard is working correctly.
So I was kind of wondering whether Vista’s “display characters” functionality of a login dialog could translate to the web. Chiefly, can it be cross-browser compatible and what are the security concerns? The simple implementation I came up with was:
<label for="password">Password:</label>
<input id="password" name="password" type="password" maxlength="100" />
<input type="checkbox" name="showPassword" id="showPassword"
onchange="swapShowPassword(this.form)" />
<label for="checkbox">Display characters</label>
function swapShowPassword(form) {
if(form === null || form === undefined)
{
return false;
}
else
{
if(form.showPassword.checked && form.password.type == "password")
{
form.password.setAttribute("type", "text");
}
else if(!form.showPassword.checked && form.password.type == "text")
{
form.password.setAttribute("type", "password");
}
}
}
Surprise, Internet Explorer doesn’t allow you to dynamically change the type of an input box. So let’s try again.
function swapShowPassword(form) {
if(form === null || form === undefined)
{
return false;
}
else
{
var parentNode = form.password.parentNode
, nextSibling = form.password.nextSibling;
if(form.showPassword.checked && form.password.type == "password")
{
var newPassword = document.createElement("input");
newPassword.setAttribute("type", "text");
newPassword.setAttribute("id", "password");
newPassword.setAttribute("name", "password");
newPassword.setAttribute("maxlength", form.password.maxlength);
newPassword.setAttribute("value", form.password.value);
parentNode.removeChild(form.password);
parentNode.insertBefore(newPassword, nextSibling);
newPassword.focus(); // force IE to refresh page
}
else if(!form.showPassword.checked && form.password.type == "text")
{
var newPassword = document.createElement("input");
newPassword.setAttribute("type", "password");
newPassword.setAttribute("id", "password");
newPassword.setAttribute("name", "password");
newPassword.setAttribute("maxlength", form.password.maxlength);
newPassword.setAttribute("value", form.password.value);
parentNode.removeChild(form.password);
parentNode.insertBefore(newPassword, nextSibling);
newPassword.focus(); // force IE to refresh page
}
}
}
In Internet Explorer, you have to focus on an element other than the checkbox or its label in order for the input change event to be refreshed on the screen. So I just put that instruction in there to work around another stupid fucking piece of Internet Explorer functionality.
We can hope people have converted to LCD screens so we can be a little less paranoid of Neil Stephenson-inspired Van Eck phreaking to steal passwords shown on screen. A real concern is the form history usually saved by web browsers for all regular text fields. In Firefox, the password would show after the username is typed, although changing the field back to type=”password” on the form’s onsubmit event could possibly prevent this. Users can go through the Firefox menus Tools » Options » Security » Show Passwords to prevent their passwords from ever being shown, but that’s so advanced that it defeats the purpose of showing characters to dumbbell users. You ensure show password is always off by default on the page load, but the strongest worry is a user leaving their computer unattended with the form open. Someone can just walk along and click a checkbox to reveal their oh-so secure password of “iamgod”, which also happens to be the same as their banking login. I think these reasons alone indicate that the “display character” functionality just doesn’t work with the web.
Although I wished to have it on my iPod Touch when typing in WiFi or e-mail account passwords on that tiny fucking keyboard.
- Now Playing: Bitcrush - Epilogue in Waves - 02 - An Island, A Penninsula