Safari autofills hidden "reset password token" input

Viewed 645

Safari is actually overwriting a HIDDEN form field that is supposed to represent a password reset token (ID is user_reset_password_token and name is user[reset_password_token]) with my email address.

As you can imagine, resetting the password doesn't work when the token is incorrect, so I've got an issue.

I've confirmed that it works just fine if I disable autofill in Safari, or use any browser other than Safari.

Does anyone have a solution to this issue?

4 Answers

Just had the same issue. I solved the problem with adding readonly attribute to my hidden input, like this:

= f.hidden_field :reset_password_token, readonly: true

so I've got this:

<input id="user_reset_password_token" name="user[reset_password_token]" readonly="readonly" type="hidden" value="YXHRuRgppyzxqsdEXiNm">

There is no real clean way to do that. one workaround is to have a fake input before that so that safari will autofill it and not your input. somethink like that for example :

<input id="fake_password" name="fake_user[password]" style="position:absolute; top:-100px;" type="text" value="Safari Autofill Me">

The top-100px is here to hide this input, because display:none can prevent autofill in some cases...

Disable autocomplete for the hidden field:

HTML:

<input name="reset_password_token" type="hidden" autocomplete="off">

Rails (using form-helper):

<%= f.hidden_field :reset_password_token, autocomplete: 'off' %>

Setting readonly and autocomplete=off attributes on the input didn't work in Safari on iOS. We had to add an onSubmit callback to the form that replaces the value with the correct value. It's ugly, but it fixed the bug.

Related