Browser Security: Passwords are not protected at all...

Firebug to the rescue

As a developer, I use tools that allow me to find out whether my code works as expected. This tool, Firebug, allows me, among other things, to look at a browser DOM and the content of all the variables.

Log In Page Safe!

The other day I went to a page that asks for your log in name and password. The page looks proper and the password, as expected, is hidden from praying eye while you type it. In other words, it shows bullet points for each character that you type. Perfect.

Phone Call Distraction

Now... imagine that I start typing my user name and my password, then receive a call on my cell phone, get up and start walking around, then leave because it is time for my next meeting... Now my user name and passwords are still in my browser! But no worries... the password is hidden, right?

WRONG.

So... as I mentioned, anyone can install firebug in your browser if it is not already there. What does that mean? That this user has access to your entire DOM and variables.

Installing Firebug if Missing

First the installation: the user opens a new tab and from within that tab installs any and all the tools he requires, here Firebug.

Finding the Password Object

Firebug allows you to go to see an object HTML definition at once by right clicking on the object, then selectiong Inspect Element with Firebug.

Making It a Text Input

Now that we have the <input> tag in the Firebug DOM, we can click on the type value and change it from password to text:

<input ... type="password" .../>

becomes:

<input ... type="text" .../>

As soon as you hit enter, the text in that password box is visible in clear text.

Change the type of a password input tag to a text type and see the password in clear.

Conclusion

In other words: any hacker who comes on your computer where you did not properly clear your log in and password is able to see both.

The Powerful Firebug Console

As I mentioned, I can see the DOM and any variable. Assuming that the programmer of that page decided to hide the data in a variable not readily viewable in the DOM, then no problem, you can simply go to the console and do:

console.log(variable_name);

For example, if our <input> tag had an identifier such as id="hidden_password", then you could write:

console.log(hidden_password.value);

and get the current pasword content, in clear, in your console output area.

Enter an email and password, then write the password in the Firebug console