CODEWITHSUNDEEP
javascriptangularjsfirefoxautocompleteforms
BairDev
BairDev

Reputation: 3201

Prevent Firefox from autocompleting any form with password field

We have a Single Page Application, built with AngularJS. Like many apps we have a login form with one input[type=text] (email) and one input[type=password] (password). Alright. Firefox saves the data (if the user confirms) and can autocomplete the form next time.

We also have a form for editing or creating a user. Of course there are input fields of type text and password, too. Firefox autocompletes these fields in any case for any user.

Our user edit form:

<!--span>made by selectize directive: no id, no name<span-->
<input type="text" tabindex="0"></input>
<input
    id="whatever"
    autocomplete="off"
    class="form-control"
    name="hi"
    ng-minlength="settings.loginSettings.passwordMinLength"
    ng-model-options="{debounce: {'default': 500, 'blur': 0}}"
    ng-model="userData.password" 
    ng-required="!userData.id" 
    placeholder="{{ '_settings.password' | translate }}" 
    type="password" />

Our form has a different id than the login form, it has the autocomplete="off" attribute (which is turned off in FF >= 30, although it is apparently HTML5 standard) and the password field has different name and id attributes than the one in the login form. Other suggestions, like adding one more hidden (style="display: none") text input field do not work.

I've created a very dirty JS hack in the user edit controller, which empties the dirty fields and the related model fields, but the user does see strange things going on on the page.

Most discussions of this issue here are quite old, but on the other hand tons of apps have a login form and a user editing form. I guess we are missing something simple here?

Thanks for any advice!

Upvotes: 3

Views: 2604

Answers (2)

Samuel
Samuel

Reputation: 543

This is an old thread but another solution would be to set autocomplete='new-password' in the input field.

<input
 id="whatever"
 autocomplete="new-password"
 class="form-control"
 name="hi"
 ng-minlength="settings.loginSettings.passwordMinLength"
 ng-model-options="{debounce: {'default': 500, 'blur': 0}}"
 ng-model="userData.password" 
 ng-required="!userData.id" 
 placeholder="{{ '_settings.password' | translate }}" 
 type="password" />

see MDM web docs

Upvotes: 5

Ilya
Ilya

Reputation: 2167

I have fixed same issue by adding fake fields above real fields.

<input id="prevent_autofill" type="text" style="display:none;" value="" name="prevent_autofill"></input>
<input id="password_fake" type="password" style="display:none;" value="" name="password_fake"></input>

<input id="real_login" type="text" value="" name="real_login"></input>
<input id="real_password" type="password" value="" name="real_password"></input>

Upvotes: 4

Related Questions