Disable Chrome Autofill and Autocomplete

In the age of digitization, convenience and efficiency are highly valued. Auto-complete functions, integrated into web browsers, were designed to save users time by suggesting inputs based on historical data. While often helpful, the auto-complete feature is not without its issues.

Reasons to Disable Autocomplete

There has been a longstanding issue with the autofill and autocomplete functions in web browsers such as Chrome, Firefox, and others, especially when we do not want login forms or sign-up forms to be auto-filled.

Data Security Concerns

One of the principal problems with auto-complete is the risk it poses to data security. When users input sensitive information such as passwords or credit card numbers, browsers may store this data for future auto-completion. While convenient, this storage can be exploited by malicious parties. For example, if a device gets into the wrong hands, the auto-complete function might inadvertently give unauthorized access to sensitive accounts.

Privacy Intrusions

Auto-complete can also be perceived as an invasion of privacy. As browsers remember what has been typed in the past, they may suggest this information inappropriately, revealing search history and personal data to anyone else who might be using the computer.

Input Inaccuracy

Another issue with auto-complete is that it can sometimes lead to input errors. Since the suggestions are based on previously entered data, it can propagate mistakes. For instance, if a user accidentally enters a wrong email address once, the auto-complete feature may consistently suggest this incorrect address.

Limitations in Customization

Web developers often face challenges when trying to customize the behavior of auto-complete in forms. Despite setting the autocomplete attribute to off, many browsers ignore this and continue to provide suggestions. This can be frustrating for developers who want to have control over how forms behave on their websites.

Hindrance in Modern Application Design

Auto-complete can be particularly troublesome in modern web applications, which often use dynamic forms and fields. These applications may not function as intended with auto-complete, as the suggestions can interfere with the application's logic, layout, and user experience.

Unintentional Data Submission

At times, users might not notice the auto-complete suggestions and unintentionally submit incorrect or outdated information. This can cause complications in situations such as online shopping, where incorrect shipping addresses might be used, or in form submissions that require up-to-date information.

How to disable Autocomplete

The autocomplete attribute set to off has not been working for many years, yet it is still mentioned in lots of outdated documents and discussion threads. The new-password value may work with Firefox, but not with all versions; in other words, it is not a complete solution.

The fundamental problems are that web browsers remember the information you enter, especially passwords, and automatically fill in forms with this information even if you don't want them to.

Tips to Avoid Autofill

• Using CSS
• Using JavaScript
• Using JavaScript Library

Using CSS

This approach is a workaround to prevent browsers from auto-filling the password field.

Use text instead of password in type attribute of the input, and them add -webkit-text-security: disc CSS syntax in the style attribute.

HTML: JSFiddle

<input type="text" style="-webkit-text-security: disc" />

This HTML element creates a text input field that users can type into. Text input fields show the characters that users type.

The inline CSS style uses a vendor-specific property -webkit-text-security. This property is used to change the appearance of characters in the input field, making them appear as dots (discs) instead of the actual characters. This is similar to how passwords are typically masked. However, please note that this is just for appearance, and does not provide any actual security as a password field would.

Pros

• Simple. It's easy to implement this by simply adding an inline style attribute.

Cons

• Not a cross-browser solution: The -webkit-text-security property is a WebKit-specific extension, and is not part of the standard CSS specifications. This means it will likely only work in WebKit-based browsers like Safari and Chrome (and even then, support is not guaranteed in future versions). It will not work in browsers that do not use the WebKit rendering engine, such as Firefox.

Using JavaScript

This method involves using a visible password field for the user to enter their password and a hidden field to actually store the password. As the user types into the visible field, the entered text is programmatically copied over to the hidden field which is then sent to the server when the form is submitted. This can be useful to avoid browser auto-fill, but does require additional JavaScript code.

Remove the name attribute from the visible password field and copy the value to a hidden field as the user types.

<input id="hide-password" name="password" type="hidden" />
<input id="display-password" type="password" />

• <input id="hide-password" name="password" type="hidden" /> - This input element is hidden (not visible in the web page) and has the attribute name="password" which typically is used to send the password to the server when the form is submitted.

• <input id="display-password" type="password" /> - This input element is visible and is used for the user to type in their password. It masks the characters as dots or asterisks.

JavaScript: JSFiddle

  const displayInput = document.querySelector('#display-password');
  const hiddenInput = document.querySelector('#hide-password');
  displayInput.addEventListener('keyup', (e) => {
    hiddenInput.value = e.target.value;
  });

The code adds an event listener to the visible password input field, so that whenever the user types (on keyup), the value that they have typed is copied to the hidden input field.

This approach is a workaround to prevent browsers from auto-filling the password field.

Pros

• It works.

Cons

• Need to write JavaScript code yourself.
• Chrome might prompt you to save the password in the browser for further use.
• Chrome may still prompt you to auto-fill the password field.

Using JavaScript Library

Checkout disableautofill.js JavaScript library.
GitHub: https://github.com/terrylinooo/disableautofill.js

Pros

• Easy to use: The library likely simplifies the process, and you just need to call the appropriate functions.
• Provides a callback for validating form submissions: Useful for custom validation logic before sending the data to the server.

Cons

• Requires writing JavaScript code: You need to write JavaScript code to use this library, which can be a con if you were hoping for a no-code solution.

Conslusion

While the auto-complete feature is rooted in the intent of convenience, it is clear that it comes with several drawbacks. From data security and privacy concerns to input inaccuracies and hindrances in web development, these issues can have significant implications.

Users should be cognizant of these problems and exercise caution when using auto-complete, and developers should consider incorporating alternative methods to manage form inputs effectively.

As technology continues to evolve, one can hope for more advanced and secure solutions to address these challenges.