I want to make sure visitors to my website have the best experience possible so I want them to be able to use LastPass and other Password Managers.
Is there any way of identifying whether or not my visitors are using one of these plugins?
I want to make sure visitors to my website have the best experience possible so I want them to be able to use LastPass and other Password Managers.
Is there any way of identifying whether or not my visitors are using one of these plugins?
Is there any way of identifying whether or not my visitors are using one of these plugins and how best to support it?
By far the best way to support password managers is to use normal <form>
tags and a normal form. If you don't do anything clever, then the password manager will do its job.
Yes.
Users can install LastPass as a browser plugin. Thus you can rely on client side scripting languages to check if LastPass is installed.
For instance, using NavigatorPlugins.plugins
allows you to get the a PluginArray
object, listing the plugins installed in the application:
function getLastPassVersion() {
var lastpass = navigator.plugins['LastPass'];
if (lastpass === undefined) {
// LastPass is not present
return undefined;
}
return lastpass.version;
}
Note also that what you are asking for is commonly implemented and used by browser fingerprinting technologies.
navigator.plugins
or return fake results to protect privacy: developer.mozilla.org/en-US/docs/Web/API/NavigatorPlugins/…
Most of these password managers are browser plugin based and work by populating the form fields and triggering a form submission as if the ueer pressed the submit button, to the server it appears as a normal form submission, no way to tell if it coming from a password manager.
You can use Javascript to detect the typing speed in the username/password fields. A variable rate suggests someone is typing it in manually while a constant rate or even no keystrokes at all (copy-paste) means someone is using a password manager.
To answer the actual question, one way to detect if users are using Lastpass is to provide some type of login field and use jQuery or similar to see if Lastpass has inserted the "background-image" it inserts into the login fields it can autofill.
Here's an example of an email input field, all the stuff in the style tag has been added by Lastpass:
<input type="text" class="form-control" id="inputEmail" placeholder="Email" style="cursor: pointer; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; background-repeat: no-repeat;" autocomplete="off">
This may not be the most effective way to detect if a user is using Lastpass, but it definitely works :)