Skip to main content

Form Submission Detection

Why is Form submission detection important?​

Form submission detection is important for several reasons:

  • It allows the Bitwarden extension to prompt the user to add new credentials to their vault, increasing the user's footprint in Bitwarden.
  • It allows us to accurately handle password change detection and help the user keep their data in sync, providing a better user experience.

Why is Form submission detection difficult?​

The reason why the detection of forms and their submission is difficult because of the flexibility of modern progressive web apps (PWAs) and single-page applications (SPAs). In classic HTML, a <form> element is defined along with a <submit> that submits all of the form data to the user.

On the other hand, in modern applications a <form> element can be used to collect user data, but a completely separate API request sends the form data to the server. For a good overview of the complexities, see this excellent documentation.

What is involved in Form submission detection?​

Initial Collection​

We must accurately collect the page details to capture the fact that there are forms on the page.

DOM Manipulation​

We must handle cases where the application is modifying the DOM based on user interaction.

Submission Detection​

We must be able to detect when a Form is submitted so that we can properly notify the user to save their credentials.

How is this handled today?​

The form submission detection is handled in the notificationBar.ts content script.

Detecting DOM changes for new forms​

A MutationObserver is attached to the window and runs every 1000 milliseconds. It observes the DOM for any changes that include a form element has not yet been collected (using the data-bitwarden-watching data element on the form to see whether it has been collected).

If a form element is detected that is new, the Page Detail collection process is triggered to retrieve the page details.

Detecting form submission​

Form submission is detected by attaching an event to each form submit() button on the DOM. This is done upon receipt of the notificationBarPageDetails command by the notificationBar.ts content script.