Why Mask The Password Field?

There is a delicate balancing act to be maintained where web security is concerned. Scratch that; this happens with all security. The more secure a system is, the more inconvenient it tends to be for the user.

The example we will examine today is the humble Password field. In HTML, this is how you do it. This is a typical input tag.

<input value="This is a text field" />

Nothing fancy here.

All we need to do, is use the type attribute, and give it a value of "password".

<input type="password" value="This is a text field" />

Simple, eh? Now the input is masked.

But this isn't just about HTML. There are plenty of form builders out there which will also provide masking once a field is described as a Password field. Why this convention?

The reason why passwords are masked, are to prevent others from being able to view the user's password, on the off-chance that these others are shoulder-surfing at the time. But hold on, won't other things like keystroke loggers do the job of stealing passwords much better? And in an age where people work remotely (during the COVID-19 pandemic anyway) why is shoulder-surfing still a concern?

No, remote working can actually be an even more compelling reason for password masking. Remote working tends to mean video calls and screen presentations. What if the user needs to enter a password during that presentation?

The inconvenience of masking

Of course, hiding any kind of input the user creates on screen, just by definition, is inconvenient. If people can't see what they are typing, mistakes occur. And in the context of passwords where even capitalization is important and typically passwords of a minimal length are mandatory, that inconvenience is magnified.

Effectively blind.

In effect, you're typing blind.

This assumes that there is nothing wrong with the keyboard (not stuck, etc) and that the user isn't suffering any kind of impairment, like dyslexia. Needless to say, all that can only add to the inconvenience.

Mitigating features

Not masking passwords is out of the question. So what, then, is the way around that inconvenience?

One way is to implement a feature for temporarily revealing the password. You may see this take the form of an eye icon on the right side of the field.

Masked...

... and unmasked!

Is it perfect? Well, it kind of solves the problem while kind of maintaining security. It's a long way from watertight, but until we come up with a better idea, it stays.

Finally...

This blogpost was inspired by an interview candidate who, while demonstrating a project she had made, showed me a web form she had created where the password was represented as a... you guessed it, standard text field. I waited for her to bring that up and maybe make an excuse for it. Honestly, I would have taken any excuse, I just needed to know she was aware of the need to mask the password. This isn't entirely why she failed the interview, but it did get me thinking about password masking.

Yours ***************,
T___T