Best Practices for Web Development to Optimize Website Compatibility with Password Managers
Autofill is a remarkable feature offered by Dashlane, empowering users to fill any form with just a single click. However, as a developer or simply a web enthusiast, you may be aware that coding websites can vary significantly, which poses challenges for our form recognition engine.
In this article, I’ll provide valuable insights and techniques to optimize your website's compatibility with password managers, specifically focusing on Dashlane. By implementing these tricks, you can enhance the autofill experience and streamline the password management process for your users. Moreover, these tricks can also make your website more accessible to all users.
Understanding our page analysis
Handling basic scenarios
The page analysis module that powers our Autofill employs a sophisticated approach to understand the structure and context of web pages. Let's dive into the key steps involved in the process by using a simple login form example:
- Identifying form tags and fields: Our analysis begins by searching for form tags and their associated input fields. This step ensures we locate the areas where user input is required.
- Extracting relevant context: To gather comprehensive information, our module extracts various elements from the page. This includes capturing the page's title, headers within the form (such as h1, h2, h3), relevant labels using the for attribute, nearby text content, and other text elements. By considering this contextual information, we enhance our understanding of the form's purpose and its associated fields.
- Leveraging artificial intelligence for classification: Using machine learning, our module classifies the extracted data to make sense of the form's structure and the role of each field.
The results obtained from the analysis module serve several essential functions:
- Autofilling form data from the user's vault: With the insights gained from the analysis, we populate the form fields with data from the user's vault.
- Generating random passwords for form fields: When encountering a password field, our module can generate strong and unique passwords, offering users the convenience of automatically filling that field with a secure password.
- Automating login with form validation: Our analysis module makes our auto-login feature possible, automatically validating login forms based on the captured information. This eliminates the need for users to manually submit the form, streamlining the login process.
- Capturing data from completed forms: Our module can offer to capture the form data manually entered by the user, ensuring all relevant information is securely stored and can be used for Autofill.
Handling complex scenarios
In addition to the basic analysis process, our module is designed to tackle more complex scenarios, ensuring an optimal analysis in various challenging situations. Let's explore a few of these scenarios and how our analysis module handles them.
- Dynamic pages: For dynamic web pages that undergo changes in the DOM, such as animations, transitions, or modifications triggered by user interactions, our module actively listens for these changes. Whenever a modification occurs, the page is reanalyzed to ensure accurate recognition and interpretation of form elements. However, to prevent excessive reanalysis and the potential freezing of the page, we implement safeguards to limit frequent analysis and maintain smooth usability.
- Pages containing iframes: Our module takes a specific approach when encountering pages that contain iframes. Each iframe operates within its isolated JavaScript context, with visibility limited to its own frame's DOM. To ensure comprehensive form recognition, our module extracts data from each iframe independently. We use message sending to aggregate the captured data into the mainframe, which allows for a seamless integration of form information from all iframes.
- Encapsulated web components: The shadow DOM web technology allows the creation of reusable components following the standard W3C specifications. However, since standard exploration methods like Element.querySelectorAll or Element.children are blocked with this technique, analyzing components encapsulated within the shadow DOM requires the use of alternative techniques.
Addressing analysis inaccuracies
While our analysis module strives to provide accurate results, inaccuracies can happen. In such cases, we use various approaches to address and rectify these issues. Here are two key strategies we use to improve analysis accuracy:
- Machine learning model enhancement: To continually enhance our analysis module's performance, we leverage machine learning techniques. This involves extracting data from web pages and manually labeling the collected information. The manually labeled data is then added to our training dataset. By training a new model with this expanded dataset, we aim to improve the accuracy of the analysis results. The ultimate goal is to achieve more precise and reliable form recognition.
- Manual corrections for important websites: For highly significant websites that require special attention, we adopt a more intensive maintenance approach. Manual corrections are implemented on a case-by-case basis. This involves maintaining a curated list of websites along with manually selected element selectors and classifications. This manual correction process allows us to finetune the analysis specifically for these critical sites, further enhancing their compatibility.
Best coding practices for web development
The general rule of thumb is simple: Respect web standards. Following established HTML, CSS, and JavaScript practices ensures your site functions reliably across different platforms and devices, including with password managers.
Basic recommendations
- Use the <form> tag or role attribute: When implementing forms, use the standard HTML <form> tag. If you’re working with custom elements, be sure to include the role="form" attribute. This helps password managers identify and handle forms appropriately.
- Avoid nesting multiple forms: To maintain compatibility, avoid nesting multiple different forms within the same <form> element. Each form should have its dedicated <form> tag to prevent confusion for password managers.
- Use the autocomplete attribute: Although the support for the autocomplete attribute may vary, it’s still useful to include it in your form inputs.
- Include <label> tag for input fields: For every input field, use the <label> tag either with the for attribute or by wrapping the input element directly within the <label> element. This ensures proper association between labels and inputs.
- Assign unambiguous IDs to input fields: Each input field should have a unique id attribute with descriptive and unambiguous values (if your framework allows it).
- Use appropriate submit buttons: Use either input type="submit" or button type="submit" for your form's submit button. This allows password managers to recognize and handle the submission process correctly.
Incorrect example:
Correct example:
Going the extra mile
- Be mindful of potential interference: Certain practices can interfere with password manager functionality. Avoid rewriting user-entered data directly in input fields, as this may disrupt password manager features. Similarly, some client-side data validation techniques can cause issues. Always remember to implement server-side validation (and, if possible, only server-side because client-side validation can be bypassed by attackers), and consider alternative input methods (copy-paste, virtual keyboards, etc.) when developing. For example, running validation on keyboard events, such as keyup or keydown, can disrupt copy-pasting. We recommend using the input or change event depending on your needs.
- Limit frequent page mutations: Excessive mutations can adversely affect password managers, as well as other extensions. Strive for a balance between functionality and performance to minimize resource consumption on users' machines.
- Avoid overloading pages with invisible elements: It's important not to overwhelm webpages with excessive invisible elements, such as hidden fields or divs. These elements may confuse password managers and affect their ability to recognize and interact with form inputs.
- Be careful when using specific layouts: Progressive or cascading forms (where fields appear or become editable as you go) can modify the results of our module’s analysis. Similarly, many password managers still have very limited Shadow DOM support (Dashlane started providing support in 2022).
By adhering to web standards and accessibility guidelines, you significantly increase the chances of achieving optimal compatibility with password managers. Prioritize using standard form elements, labeling inputs correctly, and avoiding practices that can interfere with password manager functionality.
Remember, a well-optimized website not only enhances user experience but also ensures secure and convenient password management for your users.
Want to take a deep dive into Dashlane’s security architecture? Download our Security White Paper.
Tips for mobile development
For mobile development, the guidelines for optimizing compatibility with password managers remain similar: Code your forms in a clear and straightforward manner. However, there are a few additional considerations to keep in mind specifically for mobile platforms. Here are two key points to remember:
- Leverage native APIs for auto-completion: Auto-completion on mobile relies on the native APIs provided by each operating system. It’s crucial to use non-ambiguous IDs and well-defined input types, especially on mobile devices. For example, in an iOS app, there are 4 types of UITextContentType available: .username, .password, .newPassword, and .oneTimeCode. By using these specific input types, you can enhance the autofill experience on mobile and ensure compatibility with password managers.
- Declare associated domains for mobile apps: In the case of mobile applications, it’s necessary to declare the associated domain directly within your app. This ensures that password managers can suggest the correct credentials for the app.
Case study
Let’s review a good and bad example. Both forms are from highly popular websites. Here’s our good example:
- Use of the <form> element
- Use of the id attribute
- Placement of the submit button inside the <form> element
- Use of aria-label instead of <label> is good too
And here’s the not-so-good example:
- No <form> element
- No id on fields
- No clear submit button
All of this makes it hard for our engine to understand what type of form this is. So, make sure you’re following the good example! Remember: Following best practices means giving your users access to secure password management, and it also allows for accessibility tools that benefit all users. Happy coding!
Already using Dashlane? Learn the basics of Dashlane in a live webinar and Q&A session. Sign up for the admin webinar here or sign up for the employee webinar here.
Sign up to receive news and updates about Dashlane
