Jakob Nielsen proof password masker

Written on July 5th 2009, filed under Usability, JavaScript with 0 comments.

Ok, I’ll admit a lame name for a piece of JavaScript but it does describe what it does. A few weeks ago Jakob Nielsen shocked the web design community by advising to no longer mask passwords. In most situations ~~visitors~~ users would be alone behind the computer and masking the password would cause more confusion than it adds security. Makes sense.

Nielsen did offer one last bit of thought: “Yes, users are sometimes truly at risk of having bystanders spy on their passwords, such as when they’re using an Internet cafe. It’s therefore worth offering them a checkbox to have their passwords masked; for high-risk applications, such as bank accounts, you might even check this box by default.”

Since I’m in an experimentation phase with JavaScript I thought I’d write a simple little script that does just that. Things got a bit more complicated once I tried it in IE7. Turns out older versions of Internet Explorer don’t support setAttribute(‘type’,‘foo’). The only way around this was to copy the entire box, and replace the original one.

Without further ado, here’s the script & a demo of the script:

<script type="text/javascript">
window.onload = function(){
	var hide = document.getElementById('hide'); // Change this to match the ID of your mask or unmask checkbox
	hide.onclick = function(){
		var passwordBox = 'password'; // Change this to match the ID of your password checkbox, probably best to use the same value for your name attribute
		var password = document.getElementById(passwordBox);
		if(password.getAttribute('type') == 'text'){
			try{
				// Smart browsers can use this code
				password.setAttribute('type', 'password');
			}catch(e){
				// Special needs browsers (IE<8)
				backupValue = password.value;
				newBox = document.createElement('input');
				newBox.setAttribute('name', passwordBox);
				newBox.setAttribute('id', passwordBox);
				newBox.setAttribute('value', backupValue);
				newBox.setAttribute('type', 'password');
				password.parentNode.replaceChild(newBox, password);
			}
		}else{
			try{
				// Smart browsers can use this code
				password.setAttribute('type', 'text');
			}catch(e){
				// Special needs browsers (IE<8)
				backupValue = password.value;
				newBox = document.createElement('input');
				newBox.setAttribute('name', passwordBox);
				newBox.setAttribute('id', passwordBox);
				newBox.setAttribute('value', backupValue);
				newBox.setAttribute('type', 'text');
				password.parentNode.replaceChild(newBox, password);
			}
		}
	}
}
</script>

If you’re using SitePoints Core library, grab your Core version of the JavaScript mask/unmasker.