Oversharing with the browser’s autofill

Auto-filling forms is cool. Unless, of course, you give away more data than you thought you were.

The basics

It's pretty simple, actually. You just add an autocomplete attribute to your <input> and give it one of the predefined values. And off you go. For example:

<input type="text" autocomplete="given-name">

When the browser sees this, it offers to autofill the value for the user.

Yup, the autocomplete attribute doesn't need to be just on or off, it can have a value that hints the browser as to which type of info to prefill.

Now, the browsers go even further to accommodate pages that don't use autocomplete. Browsers use name attributes, or id attributes or nearby <label> elements' content and so on. But that's not the point, let's stay with autocomplete.

The question

Because the Web is a weird place full of crazy actors, you can never be too paranoid. So the question is - if it's that easy to markup an input, can sneaky developers markup content that's not visible to the user and extract information the user did not mean to share? Can a page author ask for the first name, but also the email in a hidden field? In other words, can you trick the user to give you their email address by using a simple hidden field?

<input type="hidden" autocomplete="email">

I tried in Chrome, it didn't work. Whew!

But wait!

How about the other 101+ ways to hide content?

Offscreen content. A div overlapping the content. CSS translation. You can go on and on. I tried the simplest trick in the book. (There's a book?)

In CSS...

  .off {
    left: -9999px;
    position: absolute;
  }

This is a trick commonly used For Good to give screen readers content that is otherwise hidden from the screen.

So here's a test page: https://www.phpied.com/files/autocomplete/text.html

The page simply asks for the name of the user, but sneakily and offscreen, asks for an email and telephone number too.

<form>
  <label>First name</label>
  <input type="text" autocomplete="given-name">
  <input type="text" autocomplete="email" class="off">
  <input type="text" autocomplete="tel" class="off">
  <button>Join the fun</button>
</form>

You won't believe what happened next. Both Chrome and Safari gave away the data in the hidden content. Try it yourself!

Or if you don't want to play with forms, here's a video.

Oversharing

Isn't it?

Chrome doesn't tell you it's going to share your phone number. The email?... sorta, although it may look to the user as just a hint to use the name from the intended profile, if the user has a few profiles set up.

Safari did disclose all the information it's going to prefill, but the burden is still on the user to figure out whether the browser is showing is going to be sent to the third party site.

I didn't try other browsers, I didn't try other ways to hide the input. One way in the most popular browser is bad enough, isn't it?

Thanks!

Thanks for reading, gotta go, my kid needs the computer to do some iMovie editing 🙂

If you're a browser developer, please fix this.

If you use the browser's prefill... be careful out there.

UPDATE: Many thanks to Matt Austin who pointed to this article that explores the same problem! They tried to sneak the extra fields with display: none (didn't work) and overflow: hidden (worked). So now we know that you can trick the browser by hiding oversharing fields with:

1. offset: -9999px
2. overflow: hidden
3. ... I'm sure there are more

But the browser is smart enough to catch:

1. input type="hidden"
2. display: none

Tell your friends about this post on Facebook and Twitter