Who to Blame for Password Management Problems

Twitter Updates

HashTags

#PKNsf
San Francisco PechaKucha Night
#IXDAsf
San Francisco IxDA

Blogroll

Da_Da_Da_coverHave you had your passwords stolen recently (or in 2012)?

Have you tried password managers only to discover they don’t work reliably on all sites, leaving you with a mish-mash of secure and brain-dead-guessable passwords?

I feel your pain, because I spent all of yesterday going through my 201 online accounts stored in LastPass. I had reasonably secure passwords on all of the sites I care about, but not-so-secure passwords on most of the other sites (but no, not as bad as the one referencing that commercial, he writes ironically on a Sunday Afternoon). By early evening, it had gotten tedious enough I used a few glasses of Zin at my favorite happy hour to make it seem less dreadful.

Though even after 9+ hours toiling at this, I’m still not done (but I’m as good once as I ever was).

Why is this so hard?

Because few of the web developers coding the simple login and password change pages have Read The Fine Manual on HTML, and sometimes odd ideas about what order events should take place in.

For example, by the time I was five hours into the process, I was nonplussed to find a site that very easily let me change the password with LP’s auto-generate-fill-and-store password feature, only to be surprised by it asking for the old password after LastPass had already stored the new one to its database, thus happily auto-filling the new password in the old password field, screwing up the confirmation in an evil catch-22 loop.

Most of the other problems were confined to bad HTML element tagging resulting in LastPass filling passwords in username fields, many sites not supporting auto-fill, not supporting LastPass’ automatic password change, and so-on.

None of these problems should exist, because avoiding them simply takes a little bit of thought about the right order of fields, and carefully following the HTML specification.

Password Manager Guidelines

With only a moderate amount of Googling, I found that LastPass and 1Password have the best technical guidance :

Yet neither of these sites are complete, or completely accurate, especially when it comes to HTML5 definition for the form input element. And I could not find any similar guidance from the developers of DashLane, KeePass, or any of the other password manager developers.

That’s why I wrote this post!

Technical Guidelines

Here are the guidelines for correctly coding login and password reset forms.

Do

  • Always create the form on page load
  • Ensure your HTML validates
  • Use the HTML <label> element to label every <input> element
  • Use the minlength and maxlength attributes on every <input> element
  • Use the pattern attribute to specify an ECMA-262 Regular Expression for all password creation fields

Do Not Use

  • AJAX
  • GET method
  • Flash
  • Silverlight
  • iFrames

Login HTML Sample

1
2
3
4
5
<form action="https://example.com/blah" method="post" name="Login">
 <p><label for="username">Username: </label><input type="text" name="username" id="username" value="" autofocus="autofocus" required="required" inputmode="email" /></p>
 <p><label for="password">Password: </label><input type="password" name="password" id="password" value="" required="required" inputmode="verbatim" /></p>
 <input type="submit" value="Log In"/>
</form>

In the above sample, note in particular, the following:

  • The <label> element is placed in front of the <input> element—this is the HTML 5 method—instead of surrounding it—the old HTML 4 method. The exact same for= attribute and value is then used in both elements together.
  • The autofocus=”autofocus” attribute in line 2 sets the focus to the username field.
  • The required=”required” attribute in lines 2 and 3 makes both fields required to submit the form.
  • The inputmode=”email” in line 3 tells the browser on devices with dynamic keyboards to display one capable of inputting a valid e-mail address. For some devices, particularly smartphones with narrow screen keyboards, there are slightly different keyboards for general writing and for entering web and e-mail addresses (the latter usually have the @ symbol available without shifting.
  • The inputmode=”verbatim” in line 3  tells the browser on devices with dynamic keyboards to display one capable of inputting a typical password. You could set this to “numeric” if you’re only requesting a PIN.

Password Change HTML Sample

1
2
3
4
5
6
<form action="https://example.com/blah" method="post" name="PasswordReset">
 <p><label for="oldpassword">Enter Old Password: </label><input type="password" name="oldpassword" id="oldpassword" value="" inputmode="verbatim" required="required" autofocus="autofocus" /></p>
 <p><label for="newpassword">Enter New Password: </label><input type="password" name="newpassword" id="newpassword" value="" inputmode="verbatim" required="required" minlength=8 maxlength=20 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]) (?=.*[/[-!$%^&*()_+|~=`{}[]:/;<>?,.@#]/]).{8,}" /></p>
 <p><label for="newpasswordcheck">Repeat New Password: </label><input type="password" name="newpasswordcheck" id="newpasswordcheck" inputmode="verbatim" value="" required="required" minlength=8 maxlength=20 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]) (?=.*[/[-!$%^&*()_+|~=`{}[]:/;<>?,.@#]/]).{8,20}" /></p>
 <input type="submit" value="Change Password"/>
</form>

In the above sample, note in particular, the following:

  • Lines 3 and 4 both request the new password, so use RegEx checking to ensure the new password conforms to the security rules. Edit this expression to suit your site’s rules. Note that Line 2 does not include the RegEx, because it would prevent people who have an old password that doesn’t conform with your current RegEx rules from chaing their password.
  • Lines 3 and for both have the minlength and maxlength attributes, which some browsers will use to indicate when an entered password is withn the allowed length range. As in the previous note, this restriction is absent in the old password field, for the same reason.

Call to Action

  1. Test all of your organization’s login and password change pages with LastPass, DashLane, 1Password, and KeePass.
  2. For any site you use that doesn’t work with the password manager you use, contact their customer support department.
  3. If you use LastPass, run the Security Challenge every 3 months. If you don’t use LastPass, ask your password manager developer to add a similar feature.
  4. Ask every site you log into to support FIDO U2F two-factor authentication.

LastPass Auto Change Password

Contact these major site developers and ask them to work with LastPass to add support for their Auto Change Password feature:

  • WordPress.com
  • WordPress.org
  • InformationWeek.com (and the rest of the TechWeb.com sites)
  • Zoho.com
  • Evernote.com
  • UberConference.com
  • Zendesk.com
  • Unisys.com
  • ATT.com
  • Force.com
  • Instagram.com
  • Dreamhost.com
  • Hostgator.com
  • MicrosoftOnline.com
  • Live.com
  • Oracle.com
  • Sony.tv
  • StubHub.com
  • GoodReads.com
  • Huddle.net
  • OpenStreetMap.org
  • Starbucks.com
  • Apple.com
  • iCloud.com
  • Instagram.com
  • Bitly.com
  • EventBrite.com
  • SurveyMonkey.com
  • Quora.com
  • Meetup.com
  • Ifttt.com
  • Asana.com

Author: Peter Sheerin

Peter Sheerin is best known for the decade he spent as the Technical Editor of CADENCE magazine, where he was the acknowledged expert in Computer-Aided Design hardware and software. He has a long-standing passion for improving usability of software, hardware, and everyday objects that is always interwoven in his articles. Peter is available for freelance technical writing and product reviews, and is exploring career opportunities in interaction design. His pet personal project is exploring the best ways to harmonize visual, tactile, and audible symbols for improving the effectiveness of alerting systems.

Leave a Reply