Learn Measure Blog About

Prevents users from pasting into password fields

Updated

Some websites claim that allowing users to paste passwords reduces security. However, password pasting actually improves security because it enables the use of password managers.

Password managers typically generate strong passwords for users, store them securely, and then automatically paste them into password fields whenever users need to log in. This approach is generally more secure than forcing users to type in passwords that are short enough to remember.

How this Lighthouse audit fails

Lighthouse flags code that prevents users from pasting into password fields:

Lighthouse audit shows page stops users from pasting into password fields

Lighthouse gathers all <input type="password"> elements, pastes some text into each element, and then verifies that the element's content has been set to the pasted text.

If a page doesn't use <input type="password"> for its password input fields, Lighthouse doesn't detect those elements. It's also possible to prevent pasting outside of a paste event listener. Lighthouse doesn't detect that scenario, either.

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

How to enable pasting into password fields

Find the code that's preventing pasting

To quickly find and inspect the code that's preventing pasting:

  1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  2. Click the Sources tab.
  3. Expand the Event Listener Breakpoints pane.
  4. Expand the Clipboard list.
  5. Select the paste checkbox.
  6. Paste some text into a password field on your page.
  7. DevTools should pause on the first line of code in the relevant paste event listener.

Remove the code that's preventing pasting

The source of the problem is often a call to preventDefault() within the paste event listener that's associated with the password input element:

let input = document.querySelector('input');

input.addEventListener('paste', (e) => {
e.preventDefault(); // This is what prevents pasting.
});

If you're only listening to paste events to preempt them, remove the entire event listener.

Resources

Source code for Prevents users from pasting into password fields audit

Last updated: Improve article