Handling 1Password in online payment forms

pixycz
pixycz
Community Member
edited June 2021 in 1Password in the Browser

I'm a web developer, I work on a major payment gateway frontend. We need to dynamicaly manipulate the CC inputs to create a smart multi-purpose control. The 1Password extension behavior is out of our control though, and it manipulates the DOM concurently with our javascript with strange results. I.e this situation can happen very easily:

Addtionally, there are problems with duplicate autocomplete dropdown menus on inputs. If 1Password is set to be the "default pwd manager", it solves problems with concurent Chrome autocomplete or Safari keychain. But it's not set like this for every user and we have no idea how to handle these multiple dropdowns.


The picture above shows an open 1Password dropdown menu overlayed by a keychain autocomplete in Safari

Do you have guidelines or a kind of "best practices" for web developers how to handle HTML/DOM if the new 1Password extension is used on the client? How to avoid these misplaced icons and duplicate autocomplete menus?


1Password Version: 7.8.5
Extension Version: 2.0.2
OS Version: 11.3.1
Sync Type: Not Provided

Comments

  • Hello @pixycz,

    To assist you better, can you please send me an HTML sample of the card number input field? I will do some tests and get back with what I find.

    Regarding Safari's built-in password manager overlaps 1Password, you can follow the steps here to turn off Safari browser's built-in password manager.

    When this issue occurs on Chrome, it means that we have a website saved in the browser. To prevent it from happening, we can use these steps to remove all saved passwords in Chrome.

    Go here > scroll down to "Show, edit, delete, or export saved passwords" section and follow the steps there to remove all saved passwords in Chrome. Please ensure that all passwords saved in Chrome migrated to 1Password first before removing them from your browser.

  • pixycz
    pixycz
    Community Member

    Hi @Nhat_Nguyen,

    I'm affraid you din't completely understand the problem. I don't need to control 1Pwd extension in my browser, as the end user. I need to control its behavior from HTML/Javascript as developer, to protect our users against similar UI flaws.

    Unfortunatelly, I can't send you simply a sample HTML code. As I said, we build the page content dynamically and manipulate the DOM with Javascript heavily. It's pretty complex, showing just an HTML template sample won't do any difference.

  • ag_jarek
    edited June 2021

    @pixycz,

    Hi! My name is Jarek and I'm a member of the Extensions team here at 1Password.

    In regard to the question about overlapping autocomplete prompts, we do our best to ensure that only one autocomplete prompt ever shows up at a time and make use of whatever browser APIs are available to do so. We also guide our users to take steps to prevent these situations from happening early on as part of the installation process of many of our products. Hopefully it's not something you'll need to worry about as the developer of a website.

    For the JS-driven credit card inputs, our recommendation would always be to build straightforward, HTML-based input forms that make good use of the autocomplete attribute and follow our developer guidelines. That being said, if complex JS-driven interactions are needed, the web page will need to ensure that it responds well to being autofilled by our browser extension. Here's the process we go through when we fill a field:

    • Click the field
    • Focus the field
    • Dispatch three events for the field: KeyDown, KeyPress, KeyUp
    • Set the value of the field to the 2fa code being filled (element.value = value;)
    • Dispatch five events for the field: KeyDown, KeyPress, KeyUp, Input, Change
    • Set a background color on the field to denote that it was filled
    • Unfocus the field

    Updating the state of the page as needed based on the above events will help maximize the compatibility of the page with our autofill solution. There are some behaviors (such as field resizing / animation), however, that we could improve our handling of on our end. It's on our radar and we'd love to work on it in the future.

  • pixycz
    pixycz
    Community Member

    Thank you @ag_jarek,

    I understand your comment. I saw these guidelines earlier and they didn't help much. I'm affraid 1Password as a supportive tool provider is not in the position to specify guidelines for web developers. We as web developers can't change our codes just to support a minor custom extension. It's you who has to make it to work flawlessly and everywhere.

    Anyway, I understand you try and do your best to fix multiple dropdown conflicts and I can't do anything in this. Well, the second issue then: is there a way for the developer — an HTML attribute, data-attribute, JS method, whatever — to disable the 1Password icon in a certain input? This would help to avoid the glitches like your icon placed in the middle of the text, ovelaying the user content (as on the screenshot above).

    FYI: What we do, in short: to provide smart placeholders and dynamic formatting, we have to overlay the actuall input with text content, there are hidden inputs undelaying each other etc. It's pretty complex and it's been developed and tuned for more than seven years, to work flawlessly in all available browsers. We really can't do changes just to fix issues caused by 1Password extension, in risk we break something else. Our gateway handles millions of real money transactions and we can't risk anything. In fact, this new 1Password extension is the only extension causing such problems here. The classic extension is OK, other password managers are OK, it's just you and your new extension.

    If the risk persists (that the 1Pwd icon interferes with our inputs and block user experience), we will have to try and avoid using 1Password in the gateway at all. Either by blocking the extension using javascript, or just placing a warning discouraging our users to use 1Password extension there. However, we prefer to find a way to make it work flawlessly. For a start, beeing able to disable the 1Pwd icon inside a certain input would be really fine.

  • @pixycz,

    Gotcha. We do not provide a way to disable 1Password for certain fields at the current time, I'm afraid.

    Would you be able to provide us with a link to a demo page where we can test the interaction between 1Password and your payment form to see if we can provide more detailed advice?

  • pixycz
    pixycz
    Community Member

    I'm affraid there is not a demo available for public. The payment gateway is a banking application with stronger security standards. I could only navigate you to eshops where you could fake a purchase and be navigated to the payment. But I understand this is not a best way for testing. I'm going to try and ask someone if there could be a semi-public testing platform you could access, but I'm not sure about the results…

  • @pixycz,

    Sounds good. Please do look into that for us and let us know if you come across a page we can do some testing on; we'd be happy to take a look at it.

  • pixycz
    pixycz
    Community Member

    Hi @ag_jarek,

    good news, I was able to obtain a testing payment, and I could provide a link for you to test our UI. However, I can't publish it in a public forum. Please contact me by email or provide another private channel and I'll send you the link and instructions.

  • @pixycz

    You can send the details via email to support@1password.com. If you link the current discussion we'll be able to fast track it for our team to test and have a look at.

  • pixycz
    pixycz
    Community Member

    OK, sent.

  • kaitlyn
    kaitlyn
    1Password Alumni

    @pixycz – Thanks! I'm having a hard time finding the ticket. Perhaps you used a different email address than the one you created your forum account with. Would you mind sharing the ticket mask that's in the subject of the autoresponder email (if you received one)? It'll look something like this: [#ABC-12345-678]

  • ag_chantelle
    edited June 2021

    @pixycz

    I was able to find the the ticket. I'll ping Jarek to have a look at it for you. We may not see any movement on this until early next week, but it's definitely on our radar. 👍

    ref: VSQ-93527-229

This discussion has been closed.