1688607 - [DE][lufthansa.com] Credit Card autofill does not work on 4 separate fields type format for CC number

Status: VERIFIED FIXED

(Toolkit :: Form Autofill, defect, P2)

Description

[Timea Cernea [:tbabos][inactive]]

Attachment: Lufthansa Issue.mov

Affected Versions:

• All latest Firefox versions using force enable (Nightly 86, Beta RC 85.0, Release 84.0.2)

Tested on:

• MacOS 10.15
• Windows 10

Prerequisites:

• browser.search.region DE
• extensions.formautofill.supportedCountries DE
• download latest Firefox Nightly with region locale (switch extensions.formautofill.available to "on" for testing non-Nightly builds)

Steps to Reproduce:

1. Launch Firefox
2. Go to and reach the payment form for lufthansa.com
3. Click on each credit card number field (4 in total)
4. From the last one, choose to fill in any saved CC entry

Expected Results:
See Edge Case 2 for 4 fields CC number case: https://mozilla.invisionapp.com/share/7ZA4WEK9W#/screens/218696480

Actual Results:

1. Only the last field toggles the autofill dropdown
2. Preview is not shown for the CC fields upon hovering over a CC entry
3. Only the last field will be autofilled with the full CC number, Clear Form is not available
4. Credit Card type is not selected by autofill
5. Capture is also not working

Notes:

• Severity: although it is really broken, S3-S4
• Reproducible on Chrome?: Yes, on Chrome autofill is not toggled at all
• Regression-range: reproducible on all latest versions, this site was never tested before, can look for regression-range if need be

Comment 1

[Jim Mathies [:jimm]]

Might be better to disable when detecting these types of fields

Comment 2

[Tim Giles [:tgiles]]

Apparently we are not determining that an element was selected on this checkout page, minus the last input.
(Ignore the FormAutofill.jsm:54 line, that's just the debug log call)

FormAutofillContent: updateActiveElement: no element selected FormAutofill.jsm:54
FormAutofillContent: identifyAutofillFields: https://book.lufthansa.com/lh/dyn/air-lh/revenue/savePasseng…I8C1MuYgUlWf7ugoeXodEhuU!-1921793269!757086731!1626384250713 FormAutofill.jsm:54
FormAutofillContent: No control is removed or inserted since last collection. FormAutofill.jsm:54
FormAutofillContent: updateActiveElement: no element selected FormAutofill.jsm:54

Seems like our instance of the formFillController is not registering focused inputs until the last field, this might be a satchel bug, not entirely sure.

When first selecting one of the credit card fields that should work on page load, we get this log

FormAutofillContent: updateActiveElement: no element selected FormAutofill.jsm:54
FormAutofillContent: identifyAutofillFields: file:///C:/Users/Tim%20Giles/Downloads/Lufthansa%20-%20Payment%20Details.htm FormAutofill.jsm:54
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {af0b08e4-d501-4fd3-ba23-0edb5143f6dc} FormAutofillHandler.jsm:925
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {bf356ec2-82e7-43ac-9680-d23852312b66} FormAutofillHandler.jsm:925
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {93a02464-cf1c-465d-ba88-898fae88beb0} FormAutofillHandler.jsm:925
FormAutofillHandler: Creating new credit card section with flowId = {9a109960-e765-4287-bebb-401157947b9e} FormAutofillHandler.jsm:925
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {df68f815-0e90-41a7-a162-2dedf6b94479} FormAutofillHandler.jsm:925
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {4116ba12-946e-401a-a7c3-c532a743d462} FormAutofillHandler.jsm:925
FormAutofillHandler: Ignoring FormAutofillCreditCardSection related fields since it is an invalid section FormAutofillHandler.jsm:90
FormAutofillHandler: Creating new credit card section with flowId = {f9b0af72-4115-43be-850b-21b8e1418d32} FormAutofillHandler.jsm:925
FormAutofillHandler: Creating new credit card section with flowId = {aec3ef02-e751-429f-8ee7-7c7a33e5b608} FormAutofillHandler.jsm:925
FormAutofillContent: Adding form handler to _formsDetails: 
Object { form: {…}, fieldDetails: (18) […], sections: (11) […], _sectionCache: WeakMap(0), window: Window, winUtils: XPCWrappedNative_NoHelper, timeStartedFillingMS: null, onFormSubmitted: onFormSubmitted() }
FormAutofill.jsm:54
FormAutofillContent: updateActiveElement: no element selected FormAutofill.jsm:54

looks like we don't consider this cc-number as a valid section, so maybe it's not a satchel issue after all.

Comment 3

[Tim Giles [:tgiles]]

Attachment: Lufthansa - Payment Details.htm

Uploading page that reproduces issue since lufthansa will prevent you from reloading the page too many times.

Comment 4

[Tim Giles [:tgiles]]

Attachment: Lufthansa - payment details without extraneous HTML.htm

Comment 5

[Tim Giles [:tgiles]]

Comment on attachment 9237771 [details]
Lufthansa - payment details without extraneous HTML.htm

removed obsolete html

Comment 6

[Tim Giles [:tgiles]]

Attachment: test page with multiple cc-number fields

Adding missing HTML from previous uploads. I was missing the div wrapper acting as a form, which might influence the investigation on how to fix this issue.

Comment 7

[Tim Giles [:tgiles]]

Comment on attachment 9237820 [details]
test page with multiple cc-number fields

I am not having the greatest luck when grabbing the HTML I need to reproduce this issue hah. This should be the last obsolete upload I have for this bug, fingers crossed anyway.

Comment 8

[Tim Giles [:tgiles]]

Attachment: test page with multiple cc-number fields and div form role wrapper

Comment 9

[Tim Giles [:tgiles]]

Comment on attachment 9237821 [details]
test page with multiple cc-number fields and div form role wrapper

Forgot to remove the imgs which causes a CSP error, okay this should be the last time.

Comment 10

[Tim Giles [:tgiles]]

Attachment: test page with multiple cc-number fields and div form role wrapper

Comment 11

[Tim Giles [:tgiles]]

Okay so I'm going to summarize my investigation into this issue, but fixing this may be tricky since it breaks some key assumptions of our autofill logic (as I understand it).

Currently, each cc-number field, other than the fourth cc-number field, is treated as a separate section since each of these cc-number fields do not have an autocomplete "reason" (i.e. an autocomplete attribute of autocomplete="cc-number" or other cc attribute) and there are no expiration date fields or card holder name fields next to these cc-number fields in the markup. The previously mentioned logic is contained here, in isValidSection for credit card field sections. So, since all but the last cc-number field are not valid sections, we will not show the autocomplete dropdown for these credit card number fields. This does not completely explain why each cc-number section is treated as separate sections however.

The reason why each of these cc-number fields are treated as separate sections, is due to the "_classifySections()" logic in FormAutofillHeuristics. We use a Set to keep track of the various types of fields we've seen in a "section", and once we see a type that has already been added to the Set, then we increment and create a new "section". Since cc-number is not a field that can appear multiple times in a row (according to current implementation), we will always create a new section when dealing with multiple cc-number fields. Okay, so what happens if we allowed cc-number to be a multi-field candidate?

If we allow multiple cc-number fields to be in a row, then we can create a credit card "section" that contains all the necessary fields for an accurate autofill experience. However, the current logic has no idea that it should be splitting the cc-number into four subsections of equal length...so we will just autofill the full credit card number in each of four cc-number fields in this case. Not an ideal solution by any stretch of the imagination. I also wonder what the implications of making cc-number a multi-field candidate are for other sites. My hunch is that there should only be one "place" to input credit card number on a given site, where "place" is either one input or four inputs for cc-number input. If this assumption is correct, then I don't think we need to worry about false positives when we build credit card sections out...i.e. two unrelated cc-number fields are marked as related and thus are part of one credit card section. Since the four inputs cc-number input pattern should be the only deviation (I don't believe it makes sense to have two or three input fields for credit card number input since cards are not physically formatted that way), then we could make a branch in our logic for that case. I'm not sure how difficult that branch will be though, i.e. does that solution easily fit into the existing codebase...probably not.

I also don't know how implementing Bug 1681985 will affect bugs like this, since I have no idea how many sites implement a cc number input pattern like lufthansa.

Interestingly enough, the credit card number is autofilled correctly with Safari, though not the expiry date but that is expected to me. So we don't autofill as expected and neither does Chrome.

All of this is to say, I'm not sure how we prioritize this bug. I'm not sure if this bug is blocking for rolling out credit card autofill to France, Germany, and the United Kingdom.

Comment 12

[Tim Giles [:tgiles]]

Attachment: Bug 1688607 - Enable autofill and capturing when there are multiple credit card number fields. r=sgalich,dimi

Add functionality for previewing and autofilling into multiple cc-number fields.

Fix test_Lush.js case.

Add logic to handle credit card saving/update when multiple cc-number fields are present.

Add heuristic test for Lufthansa site.

Add test for filling cc-number when there are multiple cc-number fields in a form.

Add test for collecting multiple cc-number fields via collectFormFields.

Add multiple cc-number fields case to onFormSubmitted test.

Add multiple cc-number fields with maxlength=4 case to markAsAutofillField.

Add implementation of the preview and fill test cases for multiple cc-number fields.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/68f5bca6b432
Enable autofill and capturing when there are multiple credit card number fields. r=sgalich

Comment 14

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/68f5bca6b432

Comment 15

[Timea Cernea [:tbabos][inactive]]

Hey Tim,
Unfortunately, this is not fixed for me on the latest Nightly 95.0a1 (2021-11-01). I did also check the attached testcase which indeed works fine, but this issue still stand on Lufhtansa.de.
Re-opening this issue would be the next step for me, but please let me know what could work better for you.
Thanks!

Comment 16

[Tim Giles [:tgiles]]

Hey Timea, thanks for the verification. I'll go ahead and reopen it and take a look.

Comment 17

[Tim Giles [:tgiles]]

Attachment: Bug 1688607 - Fix autofill and capture behavior on Lufthansa due to multiple cc-number fields. r=sgalich,dimi

Comment 18

[Tim Giles [:tgiles]]

The current patch in review will solve the following issues:

• Only the last field toggles the autofill dropdown
• Preview is not shown for the CC fields upon hovering over a CC entry
• Only the last field will be autofilled with the full CC number, Clear Form is not available
• Credit Card type is not selected by autofill

It will not solve the cc capture issue. This capture issue is also present on Chrome and Safari and is most likely due to the following:
When some payment is submitted on Lufthansa, the details are stored on a redirect to a new page with a hidden form. This hidden form has all the valid payment details from the previous page, but since there has been no user interaction with this hidden form, there's no signal that we should show the CC capture doorhanger/panel and so we don't capture these credit card details for saving/editing.

The capture issue should be filed as a follow up bug and significant time should be considered for a good design that fixes this scenario of a hidden form is used to post payment details without incurring a huge performance overhead.

Comment 19

[Dimi Lee [:dimi][:dlee]]

Attachment: WIP: Bug 1688607 - Refactor _classifySection

Comment 20

[Tim Giles [:tgiles]]

Attachment: Bug 1688607 - Fix amex cards not being selected correctly if option value is 'American Express'. r=dimi,sgalich

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a8752c711fc9
Fix amex cards not being selected correctly if option value is 'American Express'. r=dimi

Comment 22

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/a8752c711fc9

Comment 23

[Tim Giles [:tgiles]]

ah shoot, I should have added keep-open since this bug shouldn't be verified until the other in-review patch lands. Sorry about that!

Comment 24

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/59497f674bb3
Fix autofill and capture behavior on Lufthansa due to multiple cc-number fields. r=sgalich,dimi

Comment 25

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/59497f674bb3

Comment 26

[Timea Cernea [:tbabos][inactive]]

Verified-fixed on the latest Firefox Nightly 96.0a1 (2021-12-03) on MacOS 10.15 and Windows 10.
The credit card number is now filled in (along with all the other eligible fields) correctly and the dropdown can be toggled from any of the 4 CC number fields.

Thanks Tim! Also, could you please check out the flags for this bug? Nightly 96 is indeed fixed but Beta is not yet (leftover flag from when the first fix landed in 95 Nightly).