terrylinooo / disableautofill.js Goto Github PK

Hello there! In the README and examples, there are a few cases where Password Field may be misspelled.

Example:

$('#login-form').disableAutoFill({
    passwordFiled: '.password',
    callback: function() {
        return checkForm();
    }
});

I'm not sure whether this is intentional or not. I suppose it doesn't matter if it it spelled the same way throughout the project.

If it is wrong, I can submit a PR to fix the problem if you'd like.

Describe the bug

I've enabled this on my login page which posts to a Java servlet on the backend. I can see that it is randomizing the name of the username and password fields successfully. I fill in the fields and submit then I trace what was sent to the server. The parameters are named correctly for their old names before randomization (j_username and j_password), and the j_username value is the username I typed. However, the password being submitted to the server is "●●●●●●●●●" (the fill characters that the plugin is using to hide the password) rather than the actual password, so authentication always fails. I don't see anything failing in the browser console, so I'm not sure why it isn't submitting what was entered for the password rather than the fill characters. It has the correct real password value displayed in debugMode.

Information

• OS: Windows 10
• Browser: Chrome Version 77.0.3865.90
• Extensions: Disabled extensions
• Version: latest version of plugin pulled from cdn, jQuery 1.11.1

Using this on a search input field. If I press the submit button the form submits to action url /search/test.

However if I use disableAutoFill() on the field pressing ENTER seems to generate a random URL to submit too. ?=ujzykrirf =test.

Not entirely random as it uses the randomly generated name of the input field.

<input id="searchFoundInput" type="search" class="search-field" placeholder="Search by postcode, feature, location type or reference" value="" name="ujzykrirf">

All browsers.

basicly the title says it all :) the input autofill is indeed working. exept i cannot submit the form.

Please disable all extensions in your browser, and then try again. If the issues still happen, provide the information below:

Describe the bug

The script doesn't seem to work if there are multiple forms in the same page...

Information

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Extensions: Please list the one or more possible extensions that installed in your browser and you think they may cause this issue. [e.g. Show Password]
• Version [e.g. Version 70.0.3538.102 (Official Build) (64-bit)]

Additional context

Add any other context about the problem here.

• Please disable all extensions in your browser, and then try again. If the issues still happen, provide the information below:

Describe the bug

DisableAutoFill is not preventing Safari from trying to autofill my search form text fields. The autofill icon still appears and I get no debug output in the web inspector's console. It's entirely possible I'm doing something wrong, but I believe I followed the instructions in the README correctly.

Information

• OS: macOS Catalina
• Browser: Safari
• Extensions: I only have 1 extension (Honey) but I disabled it and still had the issue.
• Version: 2.0.0 (I used <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/disableautofill.min.js"></script> in my header)

Additional context

I have a search form that dynamically adds form rows. I am using Django. There's only 1 field that I don't want Safari's autofill to try and fill because the more rows in my form, the longer the delay before a user can enter text into an empty search term field.

In my django form class, I added a class attribute with the value "no-autofill" to the field I want to disable the autofill for:

val = forms.CharField(widget=forms.TextInput(attrs={'class':'no-autofill'}))

I confirmed in the web inspector elements that the class is there:

<input type="text" name="form-__prefix__-val" class="no-autofill" id="id_form-__prefix__-val">

I then added the following to the head in my template:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/disableautofill.min.js"></script>

...

    <script>
        document.addEventListener("DOMContentLoaded", function(){

...

            var daf = new disableautofill({
                'form': '#hierarchical-search-form',
                'fields': [
                    'no-autofill',  // mainly for Safari
                ],
                'debug': true,
            });

            daf.init();
        })
    </script>

The form still works as usual, but the autofill is still running.

When I click in the fields, the autofill icon appears on the right side of the clicked text field once autofill has determined there's nothing to add. The larger the form though, the longer the delay between click and the icon appearing and during that delay, anything the user types does not show up. At the largest form size I tested (9 text input fields), the click even results in a cursor beach ball.

I tried to create a screen recording showing the console to attach here, but quicktime is acting up.

I'm wondering if your installation is meant for the use-case I'm trying to employ it in. Does it work on non-password fields? When I click the Safari autofill icon, it prompts me with a dropdown list of phone numbers from my contact card. The field, incidentally, doesn't have a label. The select lists before it act as a variable label. I tried adding a hidden one, but that had no effect as well.

Lastly, here's a screenshot of the form for context:

By using this script the autofill popup is trying to suggest passwords used from this domain.
Seems not to solve the problem, but creates a security issue.

I originally had a regular text input outside of the form tags with the form attribute linking it to the form. I tested it (in Safari) but the input was still getting auto completed as I typed. I moved the input inside the form and removed the form attribute and it started working as expected.

Don't know if this is a bug or just an inconvenience (so feature request?), but it would be nice to have with working with the input outside of form as well.

Otherwise great plugin! Really helpful for what I'm working on right now.

If there is an asterisk in the password, it doesn't come through in the submitted form data. Using debug mode, it doesn't even get stored in the password character array. The affected code is likely lines 49-53 in the unminified version:

for (var i = 0; i < passwordLen; i++) {
if (tmpPassword[i] != '*') {
realPassword[i] = tmpPassword[i];
}
}

Since this is in a keyup handler, you could just look at the keyup event and get the key out of there instead of looking at the entire password field each time. Then you could allow * in the password and it should work

I'm not sure if this is recent or long-standing in Google Chrome, but if I have a form group like so:

<div class="form-group">
<label class="form-label">Address Line 1</label>
<div>
<input name="dakbvtuzo">
</div>
</div>

Chrome 70 is smart enough to deduce that the input is for an address even though the <input> field itself contains no clues. It might be possible to work around this behavior and make jquery.disableAutoFill even smarter?

Describe the bug
not working when label tag Email is before input in Chrome on Windows 10

A clear and concise description of what the bug is.

Information

• OS: Windos 10
• Browser: Chrome

Additional context

The solution which I have written is the bold text (all other is context to get you point where to put it). This fake invisible label tags mislead Chrome browser and it does not add auto fill when type in the input field.
_helper.randomizeInput = function(obj, settings) {
obj.find('input').each(function(i) {
realFields[i] = $(this).attr('name');
if(realFieldsMapper[realFields[i]]) {
$(this).attr('name', realFieldsMapper[realFields[i]]);
} else {
var randomName = Math.random().toString(36).replace(/[^a-z]+/g, '');
$(this).attr('name', randomName);
realFieldsMapper[realFields[i]] = randomName;
}
$('<label style="display:none;">autocomplete-off</label>').insertBefore(this);
});
};

First of all, thank you very much for such a useful plugin, it really saved my day 👍

Describe the bug

When I set html5FormValidate and try to submit form with errors, it is correctly prevented. However, Chrome autofill starts offering options.

That happens because the names of fields are not randomized back again

Information

• OS: Ubuntu 18.04
• Browser Chrome
• Extensions: None
• Version Version 71.0.3578.98 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)]

Chrome 63, Firefox 60, both same results on your demo page

As of Google Chrome Version 65 (Official Build) (64-bit)
This does not stop autofill for usernames and passwords.

Fantastic idea here, there should be something like this standard.

I think we should submit this as a BUG to Google Chrome as it does not honor the autocomplete="off" attribute and as a direct result developers are losing hours of valuable life to elaborate JS coding instead of core code development.

Today, after a few hours messing with this I said to myself "why am I debugging google chome instead of building a website? why am I searching github for code that fixes something that should be a standard behavior? im done now."

Please disable all extensions in your browser, and then try again. If the issues still happen, provide the information below:

Describe the bug

Even if for-in loop is not recommanded, there are still some people using it.
If someone use for-in loop to loop an empty array, there an error happens. Because
javascript object is prototype chain, enumerable properties are also looped over when an
empty array is looped over.

Information

• OS: Windows 10
• Browser: Chrome (Latest)
• Extensions: Json viewer, Page ruler, and Language tool.
• Version: 79.0.3945.130 (Official Build) (64-bit)

Additional context
It also occurs when I use IE, Edge.

Evening!

FIrst I will start with a big thank you, you plugin works great in terms of killing the autofill and autocomplete. However I found one issue. It kills to much?

Once it ON it kill the native form validation

Are you familiar with that issue?

目前将就得做法：退格就清空input

When i try to send the form without typeing the password in a signup form this what i get in my console: Uncaught TypeError: Cannot read property 'join' (line 171);

Im not yet good in jquery but this is how i temporary solve this bug.

    obj.find(settings.passwordField).each(function (i) {
      if($(this).val().length > 0){

        $(this).val(realPasswordMapper[this.id].join(''));
      }
        
    });  

Hoping you can help me the best way to solved this issue thanks.

I tried your plugin, but after enabling it, all form names became some how "encoded"?

$('form').disableAutoFill({
            passwordFiled: '#googleAddress',
            callback: function() {
                return checkForm();
            }
        });

and all my form fields becomes:

I have page og my account information where I can change my personal info or to update password.
by defoult the fields of passwords are empty
current password, new password and retype new password.

I did changes to password type fields ,as your suggestion of slow render, into textbox type instead of password type field

<input class="form-control password" id="CurrentPassword" name="CurrentPassword" style="margin-bottom:7px;" type="password" value="">

and wrote next code:

    $j(document).ready(function () {
        $j3('#myAccountSettings').disableAutoFill({
            passwordField: '.password',
          });
    });

it works till form submit, after submit I get JS error 'Cannot read property 'join' of undefined'.

after code review I got problem line of code

t(this).val(s[this.id].join(""))

array s was empty, so 'join' function failed..

I don't have any fields on form page which are 'type =password' so you code didn't found these fields because all these fields are text type fields. but still the code try to make 'join' on empty array..

I have added little if:

if (s !== undefined && s !== null && s.length > 0) {
        t(this).val(s[this.id].join(""))
  }

after this fix, everything works fine so if array 's' is empty, ignore it..
it works also when I do have fields of "type=password"

Correct me if I'm wrong..

BY THE WAY: you can see this error also on your code demo

https://jsfiddle.net/terrylinooo/hhgzbsvy/

just try to submit when password field is empty and then look into "Inspect" option of browser

Technical info:
Win 10
C# MVC (Razor)
Chrome Version 72.0.3626.109 (Official Build) (64-bit)

Thanks..

You could add a config/init parameter to specify what char/string to use instead of "*" ...
Study cases: for example maybe someone wants to use ♥ symbol.

it crashing the page as ...The required anti-forgery form field. Look like it clears-off the AntiForgeryToken field (hidden). issue in asp.net(mvc) web app

How to serialize form after randomizing fields to submit it through jQuery Ajax
$("#frmProject").serialize();

• OS: Windows 10
• Browser [ chrome 78]

Describe the bug

If the condition in line 55 is fullfilled
if (passwordLen < realPassword.length)
the error ReferenceError: event is not defined is fired.

Fix

This can be fixed just passing the event in line 42
obj.on('keyup', passObj, function(event) {

Information

• OS: [macOS]
• Browser [firefox]
• Version [65.0.1 (64-bit)]

Is there cdn that hosts the .js? Like jsdeliver or something.

Sorry I am new to coding, and new to GitHub but what is the best debugging tool for me to use in the newest version of Coding With Chrome?

This is a great plugin, but I observe a small issue.

This is my setting:

$login_form.disableAutoFill({
      passwordField: '.password'
      randomizeInputName: true,
      debugMode: true
    });

The console logs every other field correctly except the password value which logs as '**************';
Am I supposed to retrieve the password through a different means or am I getting something wrong?

This script is great, I find it really useful but I need to use formaction in some of my code to use different handlers and it seems like it is not supported.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit#formaction

Here is a fiddle. It should go to /test when you submit but it doesn't as the script just submits to the default location

https://jsfiddle.net/z9bxek7a/ (see the location by the 404 in the console)

Any ideas on how to fix this?

Does not work as intended (for me) when there are multiple submit forms on the same page. Hitting on the submit button causes all other forms to submit as well. I'm trying to work a fix, but any workaround?

Hello, when I tried to use this plugin my browser shows that error:
Uncaught Error: type property can't be changed

when it trys to run this line:
this.find('[type=submit]').addClass('disableAutoFillSubmit').attr('type', 'button');

I think the problem is at .attr('type', 'button');

Why it needs to change type='submit' to type='button'?

Information

• OS: MacOS Sierra v 10.12.6
• Browser: chrome v 71.0.3578.98 64 bits
• Version: 71.0.3578.98 (Official Build) (64-bit)

Hi, thank you dear friend for this useful library

please publish the library at NPM

I am using ajax to submit a form to a php script. The script potentially returns a result with a 500 header so that ajax will return the error callback. However, disableAutoFill as already unmangled the field names. If I execute disableAutoFill again, any time I submit the form, the event gets fired multiple times. So, how can I reinitialize disableAutoFill if the previous form submission resulted in ajax fail callback? (If this isn't understood, I'll be happy to go over this again, but in excruciating detail!)

Steps to reproduce:

• Type in "test1" as password
• Backspace
• Type in "2"
• Submit

Password will still show as "test1"