Password Input Fields

2012-04-13

Introduction

This is a pretty basic piece of information, but when creating user interfaces, it is important to make sure that a field where a user enters a password does not display the password back in plain text.

This prevents the user’s password from being seen by an unauthorized person who might be able to view the user’s display.

Hiding Password Input Field Values in HTML

When creating interfaces in HTML, the <input> tag is used to create most input elements. The ’type‘ attribute is used to select the type of input, so a regular text input box would be created with:

<input type="text">

A password input field would then be created by setting the ‘type’ attribute to “password”:

<input type="password">

The type="password" input field creates a text input field, just like type="text" , but the text is obscured when displayed back in the browser:

HTTP Method Security Considerations

It is important to point out that setting an input field in HTML to 'password' only hides the contents of the field on the user’s screen. The contents are not encrypted and are sent as plain text to the server.

The next step to adding a little more security is to make sure that the form is not transmitted as a GET request using the method= attribute in the <form> tag:

<!-- BAD! Using the GET method to send passwords -->
<form method="get">
	<input type="password">
</form>


<!-- STILL BAD! GET is the default if no method is specified -->
<form>
	<input type="password">
</form>

The GET method transmits the form data as part of the URL. For example:

This password can then easily be viewed in a variety of ways by unauthorized people, including looking at the user’s browser history or the server web logs.

By setting the HTTP method to POST, the form data is no longer sent as part of the url:

<!-- Better. POST will not display form data in the URL -->
<form method="post">
	<input type="password">
</form>

HTTP vs HTTPS

When using HTTP, form data sent using the POST method is still transmitted as plain, unencrypted text. Although the methods suggested above are important, if you are really concerned about securely transmitting passwords, you need to use HTTPS instead of HTTP. HTTPS encrypts any data sent between browser and server, ensuring that passwords cannot be stolen by any unauthorized listener in-between.