Disabling Safari autofill on usernames and passwords

后端未结

关注

 17  1712

You might already know, that Safari has a nasty autofill bug where it fills email, username and password fields no matter if you set autocomplete=\"off\" or not

相关标签:

17条回答

悲&欢浪女

2020-11-29 04:18
You can disable it by adding this attribute to password input
```
autocomplete="new-password"
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2020-11-29 04:20
This question has already been successfully answered, but as of today's date, the solution didn't work for me without making some oddly particular changes - so I'm noting it here as much for my own reference if I decide to come back to it as for everyone else's.
- The fake input needs to be after the real email input in the dom.
- The fake input requires a fake label.
- The fake label cannot be absolutely positioned.
- Can't use display, visibility or opacity to hide the fake elements.
The only solution I found was to clip the visibility of the fake elements with overflow: hidden.
```
<label for="user_email">Email</label>
<input autocomplete="off" type="text" value="user@email.com" name="user[email]" id="user_email">

<label for="fake_email" aria-hidden="true" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)">Email</label>
<input type="text" name="fake[email]" id="fake_email" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)" tab-index="-1" aria-hidden="true">
```
For the record, the particular case this hack came in useful for was one where an admin is editing the profile of other users and Safari was replacing the email of the user with the email of the admin. We've decided that for the small (but frustrating) amount of support requests that this Safari 'feature' creates, it's not worth maintaining a hack that seems to need to evolve as Safari tightens up on it, and instead provide support to those users on how to turn off autofill.
0 讨论(0)
发布评论:

提交评论
- 加载中...
轮回少年

2020-11-29 04:21

I had the same problem. And though my solution is not perfect, it seems to work. Basically, Safari seems to look for an input field with password and username and always tries to fill it. So, my solution was to add a fake username and password field before the current one which Safari could fill. I tried using style="display: none;" but that did not work. So, eventually, I just used style="position:absolute; top:-50px;" and this hid the input field out of sight and seemed to work fine. I did not want to use JavaScript but I guess you could hide it with JavaScript.

Now Safari never autocompleted my username and password fields.

0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2020-11-29 04:25
It seems the browser programmers think they know more than the website writers. While it's sometimes handy to allow the user to save passwords, there are other times when it's a security risk. For those times, this workaround might help:

Start by using a conventional text input, instead of a 'password' type.
```
Password: &nbsp <input type="text" id="fkpass" name="bxpass" class="tinp" size="20" />
```
Then - if you wish - set the focus to the input field.
```
<BODY onLoad="fitform()">
```
Put the JS at the end of the page.
```
<script type="text/javascript">
document.entry.fkpass.focus();
function fitform() {
document.getElementById('fkpass').autocomplete = 'off';
}
</script>
```
Now you have a conventional form field. What good is that?
Change the CSS style for that input so it uses a font that is all 'bullets' instead of characters.
```
<style type="text/css">
@font-face { font-family: fdot; src: url('images/dot5.ttf'); }
@font-face { font-family: idot; src: url('images/dot5.eot'); }
@font-face { font-family: wdot; src: url('images/dot5.woff'); }
@font-face { font-family: w2dot; src: url('images/dot5.woff2'); }
.tinp { font-family: fdot, idot, wdot, w2dot; color: #000; font-size:18px; }
</style>
```
Yes, you could 'tidy up' the code, and add .svg to it.

Either way, the end result is indistinguishable from the 'real' password input, and the browser won't offer to save it.

If you want the font, it's here. It was created with CorelDraw and converted with an online webfont conversion utility. (dot_webfont_kit.zip 19.3k)

I hope this helps.
0 讨论(0)
发布评论:

提交评论
- 加载中...
暗喜

2020-11-29 04:27
For me, this problem was very sharp. But only about password autofill.

Safari generates it's 'strong' password into a sign-in form. Not a sign-up form. Only the user's password will work in sign-in form, not generated. Obvious.

I made a few tries to disable it with advice from here. But without results.

BTW. It was easy to fix with angular binding. So. This code will work 4 you only in case of using Angular2+ in the web layer.
```
<mat-form-field appearance="fill">
  <mat-label>Enter your password</mat-label>
  <input #pwd 
         matInput
         [type]="pwd.value.length === 0 ? 'text': 'password'"
         formControlName="passwordCtrl"
  required>
</mat-form-field>
```
Attribute [type] use one side binding with "[", "]". And automatically set value by the condition "(condition) ? option1: option2". If no symbols in the input - then the type is 'text'.

And not very 'clever' Safari browser doesn't perform autofill. So. Goal reached. Autofill disabled.

After more than 1 symbol in the input field. Type changes to 'password' very fast. And the user has no idea about something that happened. The type of the field is 'password'.

Also, it works with (keypressed) Event. Or using [(ngModel)]="pwd" instead of #pwd. And access by reactive forms.

But the basic thing that solved the problem for my cases - angular binding.
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤街浪徒

2020-11-29 04:28
Better than use JS to clear content - simply fake password field:
```
<input type="text" name="user" />
<input fake_pass type="password" style="display:none"/>
<input type="password" name="pass" />
```
A password type doubled put the browser in incertitude so it autocompletes only user name

fake_pass input should not have name attribute to keep $_POST clean!
0 讨论(0)
发布评论:

提交评论
- 加载中...