A hole in browser Autofill support

If you've ever seen your browser automatically fill in your shipping address, or seen your iPhone offer to scan a credit card on an e-commerce site, you're seeing Autofill in action.

Autofill has been part of the WHATWG HTML Standard for some years now. This 2016 write-up by Jason Grigsby gives a pretty good sense of what can be done with it.

The spec describes ways that an HTML <input> element can use the "autocomplete" attribute to hint to the browser that it should offer to fill it with specific Autofill data, if the browser has it and if Autofill is enabled. There's a long list of values related to names, addresses, phone numbers, dates, and more. Additionally, since users might have more than one of a thing, these can be scoped with values like "home", "work", etc. It's possible to further group addresses by "shipping" and "billing", and even to group larger chunks of forms by named sections.

An example might look like:

<input name="home-street-address" autocomplete="shipping home street-address">

An IndieWeb use-case for Autofill

Web sign-in is a very IndieWeb concept where you sign into websites using your personal web address, rather than an email address or username.

The sign-in form for webmention.io asks you to sign in using a URL.

As with any repetitive tasks, typing my site's URL into these login forms gets annoying. My main browser (Firefox) is pretty smart. Autocomplete kicks in after I type a few characters from my URL and it will offer to fill in URLs that I've typed before. However, since most URLs start with "https://", autocomplete suggestions aren't very useful until I've typed out 9 or more characters (or if I start typing from somewhere in the middle).

Helpfully, "url" is one of the many attributes in the WHATWG Autofill spec! It's described like so:

Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field

In theory, it should be possible for sites with Web Sign-in to improve this process with the help of the browser and Autofill. For example:

<input name="url" type="url" autocomplete="url">

Or more specifically, use your "home" (personal) URL:

<input name="url" type="url" autocomplete="home url">

It's my thinking that, with this in place, a browser should automatically suggest my URL without me typing anything at all!

A URL-shaped hole in Autofill

I tried this out by setting up url autocomplete suggestions on two different apps with Web Sign-in. (Specifically, my personal instance of Aperture, and the IndieWeb webring).

I then tried signing in and out several times to both sites, using the same URL each time. Browsers tested include Firefox, Chromium, and iOS Safari, all with Autofill enabled.

I am sad to report that none of the tested browsers attempted to automatically fill in the URL value. The extra autocomplete attribute didn't break the default autocompletion, but I still see it suggest every URL it knows about rather than learning one.

I have had trouble finding documentation on how specific browsers implement Autofill. One note in Jason's 2016 article suggests that browsers may need multiple "hints" before it will decide that a particular input is part of a group which should be auto-filled.

Another hint comes from Chromium's settings for managing Autofill data. This is what the form looks like for adding a new address:

Chromium address dialog with fields for name, street address, and more. There is no field for URL.

Notice a field that isn't there?


Mentions

Ryan Barrett Ryan Barrett at said:

huh! odd. firefox 76 on mac definitely auto-fills my URL after i’ve typed just the first two letters of the domain. no http[s]:// needed. on a related note, this utility script from @aaronpk is invaluable for auto-adding http[s]:// to url fields when users type only their domain. i’ve used it in half a dozen projects now!