1684938 - [Form Autofill] credit card expiration date formating

Status: UNCONFIRMED

(Toolkit :: Form Autofill, defect, P3)

Description

[ian.zurutuza]

Attachment: Screen Shot 2021-01-04 at 13.45.02.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0

Steps to reproduce:

firefox 84.0(64-bit) for Ubuntu canonical - 1.0

have credit card information saved in browser

example failure @ www.shopnasa.com

1. proceed to checkout
2. autofill credit card info

Actual results:

expiration date filled with incorrect format "YYYY-MM"

Expected results:

expiration date filled with request format "MM / YY"

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[morgan]

I am confirming the above bug, but not limited to any particular site as far as I can tell. Behavior I am experience is identical to above, and occurs at every site I have used autofill for so far.

Comment 3

[Tim Giles [:tgiles] | OOO Nov 25-29]

This appears to be an issue with Shopify sites. Each credit card section on these sites are iframes with visually hidden, but duplicate, credit card sections in each iframe. Because of this, when autofill checks the placeholder text, in order to determine which format the site is expecting the expiry date, autofill checks a visually hidden section that has no placeholder text. This causes the default format of the expiry date to appear, in YYYY-MM format. If a user selects the expiry date field and autofills via the expiry field, then autofill behaves correctly and will fill in the expiry date according to the placeholder text.

My guess is that we need to make this heuristic a bit more intelligent and find the closest expiry date section that is visible to the end user, instead of the closest one in general. I think that once we fix this issue, it will be fixed on the majority of Shopify sites, if the business is using the native implementation that (I assume at least) Shopify provides its customers.

Dimi, do you think this issue would be fixed by the Fathom credit card work?

Comment 4

[Dimi Lee [:dimi]]

(In reply to Tim Giles [:tgiles] from comment #3)

This appears to be an issue with Shopify sites. Each credit card section on these sites are iframes with visually hidden, but duplicate, credit card sections in each iframe. Because of this, when autofill checks the placeholder text, in order to determine which format the site is expecting the expiry date, autofill checks a visually hidden section that has no placeholder text. This causes the default format of the expiry date to appear, in YYYY-MM format. If a user selects the expiry date field and autofills via the expiry field, then autofill behaves correctly and will fill in the expiry date according to the placeholder text.

Initially I was surprised that we can even autofill in this case (fill different fields that are across different forms). But after spending some time investigating, I think when we focus on a field and then select a credit card to fill, we still only fill those duplicated hidden field in the same form. I guess the reason that all the"real" visible fields are filled is because the website itself syncs those fields.

My guess is that we need to make this heuristic a bit more intelligent and find the closest expiry date section that is visible to the end user, instead of the closest one in general. I think that once we fix this issue, it will be fixed on the majority of Shopify sites, if the business is using the native implementation that (I assume at least) Shopify provides its customers.

Not sure if this is a common pattern for credit card or address. But I just tested Safari and Chrome, it seems that they both work correctly on this site.

Dimi, do you think this issue would be fixed by the Fathom credit card work?

My guess is that this is not going to be fixed by the Fathom cc work. Since the fathom work is to improve the accuracy of whether we can recognize the right type of fields in a form, not to handle cases when there are multiple forms.

Comment 5

[Dimi Lee [:dimi]]

Changing severity to S3 because of users can still fill in the expiration date manually.