Who to Blame for Password Management Problems
Have 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 :
- What does my website need to be able to work with LastPass?
- Designing your website to work best with 1Password
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
- Test all of your organization’s login and password change pages with LastPass, DashLane, 1Password, and KeePass.
- For any site you use that doesn’t work with the password manager you use, contact their customer support department.
- 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.
- 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
