A good tutorial on making password fields accessible when you’ve got the option to show and hide the input.
Wednesday, March 24th, 2021
Wednesday, February 3rd, 2021
Two-factor authentication is generally considered A Good Thing™️ when you’re logging in to some online service.
The word “factor” here basically means “kind” so you’re doing two kinds of authentication. Typical factors are:
- Something you know (like a password),
- Something you have (like a phone or a USB key),
- Something you are (biometric Black Mirror shit).
Asking for a password and an email address isn’t two-factor authentication. They’re two pieces of identification, but they’re the same kind (something you know). Same goes for supplying your fingerprint and your face: two pieces of information, but of the same kind (something you are).
None of these kinds of authentication are foolproof. All of them can change. All of them can be spoofed. But when you combine factors, it gets a lot harder for an attacker to breach both kinds of authentication.
The most common kind of authentication on the web is password-based (something you know). When a second factor is added, it’s often connected to your phone (something you have).
Every security bod I’ve talked to recommends using an authenticator app for this if that option is available. Otherwise there’s SMS—short message service, or text message to most folks—but SMS has a weakness. Because it’s tied to a phone number, technically you’re only proving that you have access to a SIM (subscriber identity module), not a specific phone. In the US in particular, it’s all too easy for an attacker to use social engineering to get a number transferred to a different SIM card.
Still, authenticating with SMS is an option as a second factor of authentication. When you first sign up to a service, as well as providing the first-factor details (a password and a username or email address), you also verify your phone number. Then when you subsequently attempt to log in, you input your password and on the next screen you’re told to input a string that’s been sent by text message to your phone number (I say “string” but it’s usually a string of numbers).
There’s an inevitable friction for the user here. But then, there’s a fundamental tension between security and user experience.
In the world of security, vigilance is the watchword. Users need to be aware of their surroundings. Is this web page being served from the right domain? Is this email coming from the right address? Friction is an ally.
But in the world of user experience, the opposite is true. “Don’t make me think” is the rallying cry. Friction is an enemy.
With SMS authentication, the user has to manually copy the numbers from the text message (received in a messaging app) into a form on a website (in a different app—a web browser). But if the messaging app and the browser are on the same device, it’s possible to improve the user experience without sacrificing security.
If you’re building a form that accepts a passcode sent via SMS, you can use the
autocomplete attribute with a value of “one-time-code”. For a six-digit passcode, your
input element might look something like this:
<input type="text" maxlength="6" inputmode="numeric" autocomplete="one-time-code">
With one small addition to one HTML element, you’ve saved users some tedious drudgery.
There’s one more thing you can do to improve security, but it’s not something you add to the HTML. It’s something you add to the text message itself.
Let’s say your website is example.com and the text message you send reads:
Your one-time passcode is 123456.
Add this to the end of the text message:
So the full message reads:
Your one-time passcode is 123456. @example.com #123456
The first line is for humans. The second line is for machines. Using the @ symbol, you’re telling the device to only pre-fill the passcode for URLs on the domain example.com. Using the # symbol, you’re telling the device the value of the passcode. Combine this with
autocomplete="one-time-code" in your form and the user shouldn’t have to lift a finger.
I’m fascinated by these kind of emergent conventions in text messages. Remember that the @ symbol and # symbol in Twitter messages weren’t ideas from Twitter—they were conventions that users started and the service then adopted.
You can add a URL for
/.well-known/change-password which redirects to the form a user would use to update their password. Browsers and password managers can then use this information if they need to prompt a user to update their password after a breach. I’ve added this to The Session.
Oh, and on that page where users can update their password, the
autocomplete attribute is your friend again:
<input type="password" autocomplete="new-password">
If you want them to enter their current password first, use this:
<input type="password" autocomplete="current-password">
All of the things I’ve mentioned—the
autocomplete attribute, origin-bound one-time codes in text messages, and a well-known URL for changing passwords—have good browser support. But even if they were only supported in one browser, they’d still be worth adding. These additions do absolutely no harm to browsers that don’t yet support them. That’s progressive enhancement.
Monday, March 23rd, 2020
This is a great walkthough of making a common form pattern accessible. No complex code here: some HTML is all that’s needed.
Wednesday, January 16th, 2019
Exactly what it sounds like: a checklist of measures you can take to protect yourself.
Most of these require a certain level of tech-savviness, which is a real shame. On the other hand, some of them are entirely about awareness.
Tuesday, August 7th, 2018
Inclusive design is also future-proofing technology for everyone. Swan noted that many more developers and designers are considering accessibility issues as they age and encounter poor eyesight or other impairments.
Tuesday, June 12th, 2018
I’ve been wondering about this for quite a while: surely demanding specific patterns in a password (e.g. can’t be all lowercase, must include at least one number, etc.) makes it easier to crack them, right? I mean, you’re basically providing a ruleset for brute-forcing.
Turns out, yes. That’s exactly right.
When employees are faced with this requirement, they tend to:
- Choose a dictionary word or a name
- Make the first character uppercase
- Add a number at the end, and/or an exclamation point
If we know that is a common pattern, then we know where to start…
Thursday, March 29th, 2018
The answers to these questions about forms are useful for just about any website:
- Is It OK To Place A Form In Two Columns?
- Where Should Labels Be Placed?
- Can We Use Placeholder Text Instead Of A Label?
- How To Lessen The Cognitive Load Of A Form?
- Are Buttons Considered Part Of A Form’s UX?
- Is It Possible To Ease The Process Of Filling A Form?
- Does The User’s Location Influence A Form’s UX?
Sunday, June 25th, 2017
Friday, March 10th, 2017
And here’s another reason why password rules are bullshit: you’re basically giving a list of instructions to hackers—the password rules help them narrow down the strings they need to brute force.
Thursday, January 19th, 2017
Ever been on one of those websites that doesn’t allow you to paste into the password field? Frustrating, isn’t it? (Especially if you use a password manager.)
It turns out that nobody knows how this ever started. It’s like a cargo cult without any cargo.
Wednesday, December 7th, 2016
This is a wonderful service! Handcrafted artisanal passwords made with a tried and trusted technique:
You roll a die 5 times and write down each number. Then you look up the resulting five-digit number in the Diceware dictionary, which contains a numbered list of short words.
That’s the description from the site’s creator, Mira:
Please keep in mind when ordering that I am a full-time sixth grade student with a lot of homework.
She’s the daughter of Julia Angwin, author of Dragnet Nation.
Monday, March 2nd, 2015
A great investigation into the usability benefits of allowing users to fill in their passwords in plain text.
Major caveat: make sure you still offer the ability to mask passwords too.
Wednesday, January 28th, 2015
Luke continues to tilt against the windmills of the security theatre inertia that still has us hiding passwords by default. As ever, he’s got the data to back up his findings.
Wednesday, December 3rd, 2014
A fascinating look at how the humble password gets imbued with incredible levels of meaning.
It reminds me of something I heard Ze Frank say last year: “People fill up the cracks with intimacy.”
Tuesday, August 6th, 2013
A description of the shockingly cavalier attitude that Chrome takes with saved passwords:
Today, go up to somebody non-technical. Ask to borrow their computer. Visit chrome://settings/passwords and click “show” on a few of the rows. See what they have to say.
Wednesday, November 7th, 2012
I concur completely with Luke’s assessment here. Most password-masking on the web is just security theatre. Displaying password inputs by default (but with an option to hide) should be the norm.
Wednesday, September 26th, 2012
I like this passwordless log in pattern but only for specific use cases: when you know that the user has access to email, and when you don’t expect repeat “snacking” visits throughout the day.
Tuesday, June 12th, 2012
Neal Stephenson would like your help in making a video game about sword-fighting that doesn’t suck.
Saturday, February 11th, 2012
Andy sounds a cautionary note: the password anti-pattern may be dying, but OAuth permission-granting shouldn’t be blasé. This is why granular permissions are so important.
Thursday, September 22nd, 2011
Dana has put together an excellent grab-bag of data on people’s password habits.