In my case chrome is suggesting password in select type input.
This input is on a page where no username or password field is being
used.
Not a single input is with with name username or password. I have tried autocomplete="off" and autocomplete="disabled" but no effect. Read many issues of somewhat similar cases but was not able to find any solution of this.
Code is built in vuejs and i am not using input inside form tags
Very much appreciate any kind of help. Thank you in advance.
Related
It's well documented that Chrome and Firefox ignore the standard autocomplete="off" attribute in html as they (Google) feel it wasn't being used correctly. They have even come up with workarounds and their own set of values for autofilling fields.
However, We need to prevent users passwords from being auto-filled for a website we're working on, and none of the suggestions put forward by Google appear to work.
The current situation on our website is that login names and passwords are stored by the browser, and so when a user visits the site and they're forced to login, their username and passwords are pre-populated in the relevant fields and they simply click the login button to login.
This has been deemed insecure, and while the infosec team are happy for the username to be pre-populated, they insist the password field is not.
To start with I tried adding the autocomplete="off" attribute to the password fields, but the password was still pre-populated. After some googling I found this link that shows Google decided to ignore this value and come up with a list of their own values for the autocomplete attribute...
Google ignores autocomplete="off"
They state that if we add our own, non-recognised value (such as autocomplete="please-dont-auto-fill-me") if shouldnt auto fill as it wouldnt know what that value is for.
However, I added something more meaningful - autocomplete="non-filled-value" - and it still populated the field. I've since tried a number of other things, such as renaming the password input control (removing the word "password" from the control name) etc and nothing seems to work. every time I load the login page, the password is pre-populated.
The issue I have is that my login form will be loaded on multiple browsers as different users from around the world login, and I need a solution that works for all browsers, not just Chrome.
Does anyone have any experience of this, and has a working solution for preventing fields being pre-populated/auto-filled that works cross browser? Everything I've tried (renaming fields, adding hidden fields, setting obscure autocomplete attribute values) fails to work, and whatever I try, the password is pre-populated.
Obviously, I have no control over the users actual browser settings and cant force them all to change their own personal settings.
New approach
I know how frustrating it is to try all solutions and seeing user and password fields ignore them.
Unforturnately, I haven't found a straightforward way of doing this, but I have a workaround for avoiding user password fields getting autofilled.
The problem
The main problem is that if you set input type="password", browsers automatically try fo autofill the field with saved passwords and users for the webapp, and nothing seems to work in order to stop it.
The solution
My approach is to avoid setting input type="passoword", but making the field look like a password field.
The way I found to achieve this was to build a font composed only by discs, so when you type anything in the input field, it looks like a password field, but you will never be prompted with saved user and password credentials.
I've tested this solution on Chrome, Firefox and Microsoft Edge, please let me know if is something worong with other browsers.
I know the solution is awful, but seems to work.
Link to the font, made by me using Font Forge: https://drive.google.com/file/d/1xWGciDI-cQVxDP_H8s7OfdJt44ukBWQl/view?usp=sharing
Example
Browsers will not fill in the input elements because none of them is type="password"
Place the .ttf file in the same directory where you create the following html file:
<!DOCTYPE html>
<html>
<head>
<title>Font Test</title>
</head>
<body>
<span>Name: </span><input type="text"/>
<span>Password: </span><input class="disk-font" type="text"/>
</body>
<style>
#font-face {
font-family: disks;
src: url(disks.ttf);
}
.disk-font{
font-family: disks;
}
</style>
</html>
Hope this is helpful, feel free to comment any issue.
Actually, i've recently faced this issue, and a workaround which worked form me is just setting the value as an empty string on a method (can be onload, for example if the input is in your main screen). Would be something like:
let login = document.querySelector('#inputLogin');
let password = document.querySelector('#inputPassword');
function someFun () {
login.value = '';
password.value = '';
}
Also I've already tried to put autocomplete="false" but didn't work.
As explained in this MDN article, autocomplete="off" will be ignored for password auto-fill, but autocomplete="new-password" is likely to work, though it carries additional semantic information:
If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password".
This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling elements with autocomplete="new-password" for this very reason. For example, Firefox version 67 (see bug 1119063) stopped autofilling in this case; however, Firefox 70 (see bug 1565407) can suggest securely-generated passwords, but does not autofill a saved password. See the autocomplete compat table for more details.
I am having a problem with a password input on my website when viewing it using firefox, here is the html :
<div class="passField">
<label for="password">Password : </label>
<input type="password"
name="password" id="password"
title="6 to 20 characters, one uppercase and numbers allowed." placeholder="APassword123"
maxlength="20" pattern="^[A-Za-z0-9]{6,20}$"
/>
<span class="inputDesc">'.$passwordDesc.'</span>
</div>
The user is directed to the page containing this input by a link in an email like this :
http://www.mysite.com/reset.php?theId=1&theKey=699acfc121edfd91df48d5d99044d74d
A database check is preformed and if the details match the ones relating to that user id in my database then the user is presented with two inputs. One for the initial password, one for the confirmation of the password that was typed.
The problem I am having is that when the page loads, the initial password input contains a few dots (data) whereas the second input contains the placeholder... both are type password.
Here is a screen shot to see what i am talking about :
Here is the same page in IE :
As I understand it, they should both come out uniform, showing the placeholder as usual regardless of the input type and as I have not assigned any value to this input, why on earth is a value being presented in this manner when no value is assigned even according to the page source?
Any assistance, understanding or information relating to this would be greatly appreciated, thank you!
Use autocomplete="off" on the fields to avoid pre-filling of the fields. Of course this does not account for possible JavaScript or anything else populating the field.
Edit - Further explanation (because it was asked for)
Most browsers have a built in function to automatically fill form fields. They fill in fields that have standard names a user has filled in often(this is often asked first) For example address fields are often filled like this.
2nd part of the feature is filling saved passwords, but browsers are not really smart. When you save a password on, for example, http://example.com/phpmyadmin they will also fill in a password field on the homepage of http://example.com/ Which is often incorrect because the login on the homepage is pretty sure not the login for the admin area.
You can solve this issue by either setting autocomplete=off which turns this feature off for the input field(could be that this also works on entire forms if you want) or giving the fields different names. Whereas using autocomplete=off is far more reliable.
In the registration page on the website I'm working on Firefox prompts the user if they want to save their password.
If the user chooses yes then the password is saved for the registration page which is quite useless considering that the login page is different, and that the browser will prompt the user again in the login page, which makes poor user experience.
Is there any way I can tell the browser that there is no need to save the password on the registration page?
You can use the following form tag ->
<form id="<someid>" action="<action>" method="<method>" autocomplete="off">
Not sure that all browsers support it -> https://developer.mozilla.org/En/How_to_Turn_Off_Form_Autocompletion
Well, I found a solution right after posting the question:
<form autocomplete="off">
disables prompting the user to remember the password, and turns off auto complete of fields which is a good idea for a registration form.
Try making the name and/or id/class of the password input something else than password, passwd, pass. I believe FF tries to recognize password fields by looking at their names.
I got following requirements:
1. Display * on password input field on browser to indicate customer the field has a input yet.
2. The echoed password could just be a placeholder which means it has same length with the real one but it's not the plain text. This forbids customer to view the plain text with firebug or by html source.
Now I just replace each password character to ascii 20 (an invisible char). Now this works fine in IE and Firefox. However, in Chrome, the invisible char could not be displayed in Chrome.
I searched google and stackoverflow without any clue. Is anyone know the root cause or any other way to fulfill this requirement.
Thanks in advance for any suggestion or help.
I think you can use <input type="password" /> when user types something. When he comes back, you just use 6 '*' to indicate that it is set before. This will be more safer because others don't know the exactly length of the pwd.
In my user signup form, I have a text field named twitter_username. After the form is submitted (for example, with the_real_shaq in the twitter username field), Firefox did this:
Do you want Firefox to remember the password for "the_real_shaq" on heroku.com?
Obviously I Firefox to offer to store the password for user's username on my site, not their supplied twitter username. How can I do this? Thanks for reading.
As far as I know this depends on the browser. A good thread is at this thread. User "bta" has a good paragraph on how Firefox finds the username text box. This may require a re-arrangement of your user interface though. Hope this helps!