CODEWITHSUNDEEP
htmlformsautocompletesafariuser-experience
theyetiman
theyetiman

Reputation: 8888

Safari autofill populates any field with a placeholder attribute containing the word "email" with the user's email address

I found this bug recently which appears to affect the most recent version of Safari (10) on iOS 10.3.3. It may apply to previous versions or even the desktop version but this is the specific version I found the bug on.

If you have a form <input> element with a placeholder attribute that contains the word "email" or "e-mail" (and maybe just "mail" - I didn't test that) then Safari will autofill that field with the user's email address even if the field should definitely not be an email address.

I tested this with the following form field markup:

<div class="field full-width">
    <label class="required" for="MarketingSource" aria-required="true">What prompted you to get in touch with us today?</label>
    <input data-val="true" data-val-length="This field is limited to 255 characters" data-val-length-max="255" data-val-required="Please tell us how you heard about xxx" id="MarketingSource" name="MarketingSource" placeholder="E.g. recommended, Google, email, Sunday Times" type="text" value=""/>    
</div>

As you can see, the only reference to anything about email is in the following markup:

placeholder="E.g. recommended, Google, email, Sunday Times"

You cannot turn off autocomplete on fields in any browser these days, so autocomplete="off" is a no-go.

How can I get Safari to ignore this field instead of incorrectly autofilling it with an email address? It's messing up marketing attribution data in the back end.

Upvotes: 4

Views: 3334

Answers (1)

theyetiman
theyetiman

Reputation: 8888

The solution to this is to either:

  1. Remove the word "email" from the placeholder altogether
  2. Do some crazy javascript and/or CSS workaround using hidden fields and offsets to hide the field outside the viewport
  3. Be "sneaky" and use similar Unicode letters to replicate the word "email" with alternatives.

I don't like option 1 because I shouldn't have to. Nobody should - in this instance Safari is just plain wrong to do what it's doing and give web devs no control over the autofill behaviour.

Secondly, removing the word "email" could influence the marketing attribution data that is genuinely typed by our users and so it isn't something that my company was willing to do.

The same goes for option 2 - implementing a load of JS and/or CSS to overcome this is bad practice and should only be used as an absolute last resort if nothing else works.

So I opted for the latter option. I found a very useful list of Unicode confusables here:

http://www.unicode.org/Public/security/latest/confusables.txt

This list helped me find an alternative "e":

0435 ; 0065 ; MA # ( е → e ) CYRILLIC SMALL LETTER IE → LATIN SMALL LETTER E

Unfortunately this didn't change the autofill behaviour, which is why I suspect that it might looking for the word "mail" as well as "email".

I was unable to find an adequate replacement for "m" but I did find one for "a":

0430 ; 0061 ; MA # ( а → a ) CYRILLIC SMALL LETTER A → LATIN SMALL LETTER A

Doing this did the trick and Safari no longer autofills my non-email field with the user's email address.

The final placeholder now looks like this:

placeholder="E.g. recommended, Google, еmаil, Sunday Times"

Upvotes: 4

Related Questions