You are here: Home > Blog > Preventing a common security problem with login forms

Preventing a common security problem with login forms

I've seen this mistake so many times, I find it quite annoying but it's also a potential security risk, let me explain...

The problem occurs on pages that have a login form with a username and a password. In an attempt to make the login process easier, the web designer adds a piece of JavaScript that sets the focus to the username field when the page loads. The idea is that this saves the user from clicking in the field before they type. However this often causes more problems than it solves. On slower connections the timing of the focus can wreak havoc.

How it works (or doesn't)

1. The user navigates to the login page;
2. The HTML of the page appears including the login form (but the images on the page haven't loaded yet);
3. The user clicks in the username field and types their username;
4. They press 'Tab' to jump down to the password field;
5. About this time the images on the page finish loading and focus is set back on the username field;
6. As they type, the password now appears in the username field by mistake;
7. If anyone is watching, the password security has been compromised!

I have found this problem on some pretty major websites; Digg and Network Solutions are good examples. I alerted Network Solutions to the problem months ago but it still hasn't been fixed. It seems security is not a priority for them.

So what can be done to fix the problem?

The solution

The answer to the problem is really quite simple. All we need to do is add a check to the JavaScript function before we set the focus. If there is already a value in the username or password field then do nothing, if they are blank then set the focus. Done!

Date

7 Oct 2007

Tags

JavaScript Web accessibility Web design