How does autofill actually work?
Hi There,
Intro
I'm a huge fan of 1Password and I just realized one of the sites that I own isn't compatible with the auto-fill feature. The form is here: https://auth.ama.ab.ca/login - We use javascript to hide and show either a sign in form or a create form.
Problem
If I login it prompts me to save my password, then once I logout and then use the auto fill feature (CTRL + ) it actually sends me to https://auth.ama.ab.ca/member/new (which is the create screen).
How our site works
We have 2 forms on the page. When you fill out the sign in page and hit enter it makes a POST to https://auth.ama.ab.ca/member_sessions and when you fill out the Create form it makes a POST to https://auth.ama.ab.ca/member
Figuring out what 1Password is doing
It looks like 1Password is navigating to https://auth.ama.ab.ca/login and then it's navigating to https://auth.ama.ab.ca/member/new - I have no idea why this would even happen,
Here's where it gets interesting..
If I delete the login in 1Password, and then I remove the create form from the HTML and then I sign in, sign back out and then try (CTRL + ) It works correctly and submits a POST to https://auth.ama.ab.ca/member_sessions as it should. What I can tell is that 1Password is getting confused with having 2 forms on the same page.
More information needed from AgileBits
How does the fill in password functionality work? I figured it would find the dom elements and populate the values and then hit 'enter', but it doesn't seem to be doing that. I've also noticed I can't see in 1Password where the form is actually submitting to (I had to use the chrome debugger), is there a 'debug' mode that I could look at?
Is there a way we can flag a form a specific way for 1Password to work correctly (a class/id, or maybe even the order of forms)? How does 1Password figure out what URL to submit to? How does 1Password actually submit the form? Why did it work when I remove the create form from the DOM?
I've gone through the troubleshooting tips and other things, but I need to know how 1Password works before I can make changes on my side. I have full control of the site, so let me know what kind of things I can do to get this working.
1Password Version: 5.3 (530029)
Extension Version: 4.5.2.90
OS Version: 10.10.5
Sync Type: iCloud
Comments
-
Hi @RyanJones,
I moved this discussion to our Saving and Filling in Browsers topic as it is more apt than the Mac topic. One of our extension developers might be able to provide more commentary on your issue, but I wanted to also point you toward our guide on best practices for designing your site to work with 1Password.
Please check that out and feel free to reply if you have further questions, and we'll get an expert on the case.
0 -
Hiya, Ryan. Thanks so much for your thorough post. That's great detective work! Your post caught the attention of a few of our crew and they asked me to chime in since I work primarily on the browser extensions and form filling logic.
We don't currently have a debug mode that a user could turn on. Mostly this is because our debugging logs could potentially log sensitive information in plaintext in a way that isn't obvious to the user.
You've pretty much nailed how 1Password works. When you ask to fill, the Javascript in the browser extension collects a bunch of details about the page and sends it over to the background 1Password helper process. Then, these details and the item you select (or that gets selected for you if there is only one for the page) get mooshed together and processed by our form filling brain. The brain has all the logic about how to fill pages, and in general, he's pretty smart. In general. At the end of his processing, he spits out a prescription for how which values from the item to put in which fields of the page and even which field (the password field) to focus so that the extension can have the helper process mimic the user pressing the enter key to submit (if autosubmit is on).
As for the issue you're seeing, I investigated a little bit, and I found that there was actually an issue with the brain telling the browser extension to click on the radio button that you have in the "Create Your AMA Online Account" form. The trick is, though, that this field should be ignored because it's not visible to the user. Luckily your well-written markup makes it easy for our field collection script to see this and send it over to the brain.
So, long story short, I've made the change in the brain and a pull request is open to have it merged in. We hope to have a new brain in our beta channels for Mac, iOS, and Windows very soon now that the major updates for iOS and Mac have landed.
So, in the short term, there's not much you can really do to help 1Password behave here short of removing those radio buttons, which isn't exactly reasonable since you need them there for obvious reasons. One thing you could try that would trick 1Password down a different code path that works great for the form with our current brain is to add a field that you don't plan to use and give it a random id. (I'll spare you the vagaries of why this will work…) I tested this by adding a field like this to your form:
<input type="text" style="display:none;" name="really-onepassword" id="onepassword90210" />
Then, I saved a login. Then, on the next page load, I added the markup again but I changed it slightly:
<input type="text" style="display:none;" name="really-onepassword" id="onepassword8675309" />
When I filled the login I saved, it caused it to go down the other code path, which lets it fill and submit properly. I then tested with another login I had saved before I found the problem, and the workaround also helped steer the brain in the right direction.
I realize this is not ideal. I certainly wouldn't want extra code hanging around to work around someone else's bugs. :( But, this is the best workaround I have to help until we get the new brain released.
In closing, let me thank you again for writing to us. Having web developers reach out to us for help getting our app to work better on their sites is such a joy. We haven't always had such a positive relationship with web developers in the past, so it's not something we take for granted now.
If we can be of any further assistance, please let us know. We're always here to help.
--
Jamie Phelps
Code Wrangler @ AgileBits0 -
Wow! I'm utterly floored by this awesome response!
You:
Explained how the brain works
Admitted there was an oddity in brain that was causing it to go down the wrong path
Patched it on the main code branch
Provided a temporary fix if we need to get it working right away**This support just solidifies why I push everyone in the 1Password direction. **
In regards to our site, I think we're going to wait for it to work it's way down to the main branch, but we really appreciate the support and getting a fix in place.
I'll keep an eye out on the releases coming down the line and give it a shot once the new brain has landed.
Thanks again Jamie!
0 -
These AgileBits folks are truly awesome!
0 -
Hey, @RyanJones, thanks so much for the kind words! I'm glad my response was helpful. :)
0
