treasurydirect.gov and that password keyboard

The WSJ recently wrote about I Bonds and the challenges in buying them.

One that I’ve personally faced is the virtual keyboard. When the site was built, these virtual keyboards were considered a security feature.

In the years since, however, we’ve realized that it is much better to have long, randomly generated, single use passwords.

The issue is that treasurydirect.gov doesn’t allow you to paste those passwords.

The fix is extremely simple and requires just a few steps. Note: this only works on a computer with a full browser. If you’re on a phone, you’re stuck with the virtual keyboard for now. Though, if this is your first time looking at or modifying HTML, it might be intimidating. Please read through it though, this is not only simple, but totally safe!

Before we begin, let’s talk about how the website is preventing you from pasting your password and what we’re going to do about it.

The element where the password is stored is called an input. You see these on all sorts of sites. It’s a text box. But the folks who developed the site added an extra attribute: readonly.

Simply put, this means that you can’t actually edit the input. Which means it’s not really an input (in the common sense of the word).

You might be wondering how the virtual keyboard works at this point, since clearly values are being put into the input. I haven’t verified this, but my assumption is it’s done programmatically with Javascript.

Okay, so there’s an input on the screen, but we can’t input anything!

Well, we’ve already identified the solution - simply remove the readonly attribute.

At this point, you might be saying, ‘sure, sounds easy, but how? It’s someone else’s website!’ and that’s true! But, once the website is sent to your computer you can edit it to your hearts desire. (These changes are only temporary. If you were to refresh the page, any changes you made would be wiped out.)

So, what do we need to do to be able to paste a password into treasurydirect.gov (or any other site like it)?

Steps

1. Right click on the screen to get the menu
2. Select Inspect
3. In the window that just opened, find the Elements tab.
4. In the top left, there’s a button for selecting an element on the page (Shift + Command + C is the keyboard shortcut on a Mac)
5. Select the input element with your cursor
6. Back in the Elements you should now see that the input is highlighted.
7. Double click on readonly=readonly and delete it.
8. Commit the change by pressing enter/return.
9. The code for the site has now been updated and you’re able to paste in your password!