Better way of detecting form inputs and submissions

Feature name:

Better way of detecting form inputs and submissions

Feature Description

One of the main issues I’ve had with bitwarden ever since I started using it, is how rare it is for the login auto save feature to actually work. On most sites, including major ones like Google, the notification bar never pops up, so you have to manually remember to add every login. Sometimes the notification bar also disappears when the page refreshes.
I decided to try and fix this, and have come up with new code to detect forms and fields, which in my testing has worked flawlessly when compared to other managers like Lastpass and Dashlane. The only current major problem is forms that aren’t under an actual form element, such as Aliexpress’s login modal. These forms are still detected and the passwords saved, but the input detection fails.
The only thing missing now is to improve the notification bar itself, my plan is to make it a small modal in the corner that allows for reviewing and editing, which comes in handy for forms where the wrong input is detected (i.e. detects email but username is used for login), or miss some data.
I’ve also been thinking of using the new improved input detection (which can distinguish a simple password field from a new password one, for example) to add a small icon next to each input, similar to other manages, that allow for easier access to autofill and password generation. There have been many requests for this, and it would of course be toggleable, just like the current detection and notification bar.
None of the actual autofilling code has been touched, so there should be nothing to worry about that.

Edit: First PR is up at Improve form submission detection by fuwwy · Pull Request #2066 · bitwarden/browser (github.com)

Clients / Repos Affected:

  • Web

Timeline to completion (estimate):

ETA: Q4/2021

3 Likes

Thanks, @Folf!

I think @eliykat and @djsmith85 would be great candidates to take a look at this. If you already have code written, could you make it publically visible on a fork perhaps? Also any screenshots/gifs would be helpful, too :slight_smile:

1 Like

Hey there, I’m currently tidying up the code and I’ll see if I can get it up on github later today.
Here’s a quick showcase of the auto saving feature working on Facebook, Google and this site, only the first of which works with the current extension, as well as some minor work on the popup icons.
There’s also currently a bug with the folders feature (cc @eliykat) that is preventing the notification bar from working, the folder selection uses a class but the code is looking for an id.

One question that I have currently is when both an username and an email field is displayed, which one should the auto save prioritize?

auto-save
change pw

2 Likes

Hi @Folf

this looks great and I’m looking forward to see what you’ve come up with. The issue with the folder selection not working properly should be fixed and has been merged into master.

Feel free to @ me in the PR once it’s up.

2 Likes

@Folf that notificationBar bug is fixed by the way :slight_smile:

2 Likes

Thank you for this.

It’s been a while since I’ve gone through all the Bitwarden code. If you have a few minutes, would you mind posting a brief synopsis of what you are doing differently than the current Bitwarden implementation?

Also, could the techniques you are using be used to help Bitwarden successfully fill fields on demand? There are a number of sites where Bitwarden won’t fill certain fields. (I’ve filed reports for all the ones I have encountered.)

As for the form submission detection, I wrote a small explanation on the PR which is linked on the main post. Field detection is pretty much done too and it’s mostly about working out the types, attributes and amount of inputs in forms and figuring out what is what (i.e. if there’s more than one password field and if any attribute including current, old, former, or new is found, assume it as a change password form).

I’m yet to touch anything autofilling related, I want to keep most of that code as is to prevent any currently working sites from breaking, but there’s some improvements I want to do, such as not autofilling new password fields. Could you send me a link to these reports?

1 Like

Some progress
Is there any icon I can use for password generation?

overlays

Hmm - we do have some new icons coming. @Hinton do you have a recommendation?

I would suggest using the refresh icon from FontAwesome for now. fa-refresh: Font Awesome Icons

1 Like