禁用用户名和密码上的 Safari 自动填充

问题描述

您可能已经知道，无论您是否设置了 autocomplete="off"，Safari 都有一个令人讨厌的自动填充错误，其中填写电子邮件，用户名和密码字段。

这是一个基本的形式：

<form action="/" method="post">
    <p>
        <label>E-mail</label>
        <input type="text" name="email" value="" />
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="password" value="" />
    </p>
</form>

… Safari 自动填写这些字段在页面加载，应该，工作做得好！

如果将 autocomplete="off"放到字段和/或表单元素中，Safari 仍会自动填充这些字段：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>E-mail</label>
        <input type="text" name="email" value="" autocomplete="off" />
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="password" value="" autocomplete="off" />
    </p>
</form>

即使这样也不行：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>E-mail</label>
        <input type="text" name="secretfield1" value="" autocomplete="off"/>
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="secretfield2" value="" autocomplete="off" />
    </p>
</form>

… 如果 Safari 包含字母”E-mail”，”Password” 等，并浏览自动填充，Safari 就会查找这些<label> 元素。

Aaaahhhhha！我想，试过：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>%REPLACE_EMAIL_TITLE%</label>
        <input type="text" name="%REPLACE_EMAIL_NAME%" value="" autocomplete="off"/>
    </p>
    <p>
        <label>%REPLACE_PASSWORD_TITLE%</label>
        <input type="password" name="%REPLACE_PASSWORD_NAME%" value="" autocomplete="off" />
    </p>
</form>

… 并使用 JavaScript 将真实姓名替换为％TAGS％。 Safari 自动填充踢入。无论您是否在更换时设置了 10 秒超时。

那真的是唯一的选择吗？

<form action="/" method="post" autocomplete="off">
    <p>
        <label>That electronic postal address we all use, but can't write the title here because Safari fills this with YOUR information if you have autofill turned on</label>
        <input type="text" name="someelectronicpostaladdress" value="" autocomplete="off"/>
    </p>
    <p>
        <label>A set of characters, letters, numbers and special characters that is so secret that only you or the user you are changing it for knows, but can't write the title here because Safari sucks</label>
        <input type="password" name="setofseeecretcharacters" value="" autocomplete="off" />
    </p>
</form>

我希望不是？

更新：@skithund pointed out in Twitter，该 Safari is getting a 4.0.3 update，其中提及”Login AutoFill” 。有人知道这个更新是否会解决这个问题？

最佳解决思路

我有同样的问题。虽然我的解决方案并不完美，但似乎还是有效的。基本上，Safari 似乎通过密码和用户名查找输入字段，并始终尝试填写。所以，我的解决方案是在 Safari 可以填写的当前版本之前添加一个假的用户名和密码字段。我试过使用 style="display: none;"，但没有工作。所以，最终我刚刚使用了 style="position:absolute; top:-50px;"，并将输入栏隐藏起来，似乎工作正常。我不想使用 JavaScript，但我猜你可以用 JavaScript 隐藏它。

现在 Safari 不会自动完成我的用户名和密码字段。

次佳解决思路

浏览器忽略 autocomplete=off 的原因是因为有一些 web-sites 尝试禁用 auto-completing 的密码。

那是错的。

而 2014 年 7 月，Firefox 是最终实现更改的最后一个主要浏览器，忽略任何尝试关闭自动完成密码的 web-site 。

June 2009: IEInternals blog where they discuss keeping the user in control(archive)
2014 年 2 月：Chrome 公布，当他们开始忽略 autocomplete=off(archive)
January 2014: Bugzilla Bug 956906 – ignore autocomplete=”off” when offering to save passwords via the password manager(archive)
Reddit discussion(archive)

One of the top user-complaints about our HTML Forms AutoComplete feature is 「It doesn』t work– I don』t see any of my previously entered text.」 When debugging such cases, we usually find that the site has explicitly disabled the feature using the provided attribute, but of course, users have no idea that the site has done so and simply assume that IE is buggy. In my experience, when features are hidden or replaced, users will usually blame the browser, not the website.

任何 web-site 企图规避浏览器的偏好都是错误的，所以浏览器忽略它。没有理由知道为什么 web-site 应该尝试禁用保存密码。

Chrome 会忽略它
Safari 忽略它
IE 忽略它
Firefox 忽略它

At this point, web developers typically protest 「But I wouldn』t do this everywhere– only in a few little bits where it makes sense!」 Even if that』s true, unfortunately, this is yet another case where there』s really no way for the browser to tell the difference. Remember, popup windows were once a happy, useful part of the web browsing experience, until their abuse by advertisers made them the bane of users everywhere. Inevitably, all browsers began blocking popups, breaking even the 「good」 sites that used popups with good taste and discretion.

如果我是一个特殊的 snowflake 怎么办？

有人提出了一个好的 use-case：

I have a shared, public area, kiosk style computer. We don’t want someone to (accidentally or intentionally) save their password so the next user could use it.

这不违反声明：

Any attempt by any web-site to circumvent the browser’s preference is wrong

这是因为在共享信息亭的情况下：

它不是具有奇怪的策略的 web-server
它是具有奇怪的策略的客户端 user-agent

浏览器 (共享计算机) 是要求不尝试保存密码的浏览器。

防止浏览器保存密码的正确方法是将浏览器配置为不保存密码。

由于您已锁定并控制此信息亭计算机：您可以控制设置。这包括保存密码的选项。

在 Chrome 和 Internet Explorer 中，您可以使用组策略 (例如注册表项) 配置这些选项。

从 Chrome Policy List：

AutoFillEnabled

Enable AutoFill

Data type: Boolean (REG_DWORD)

Windows registry location: SoftwarePoliciesChromiumAutoFillEnabled

Description: Enables Chromium’s AutoFill feature and allows users to auto complete web forms using previously stored information such as address or credit card information. If you disable this setting, AutoFill will be inaccessible to users. If you enable this setting or do not set a value, AutoFill will remain under the control of the user. This will allow them to configure AutoFill profiles and to switch AutoFill on or off at their own discretion.

请将这个词传递给企业管理员，试图禁用自动完成密码是错误的。这是错误的浏览器是故意忽视任何人谁试图做到这一点。那些人应该停止做错事

第三种解决思路

修复：浏览器自动填入 readonly-mode 并设置可写入焦点

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

(焦点=鼠标点击并选择字段)

更新：Mobile Safari 将游标设置在该字段中，但不显示虚拟键盘。新修复工作像以前一样，但处理虚拟键盘：

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示 https://jsfiddle.net/danielsuess/n0scguv6/

//UpdateEnd

说明：浏览器自动将凭据填充到错误的文本字段中？

好的，你刚刚注意到：

Safari autofill kicks in. No matter [what the fields are named] @Jari

并有一个假设：

Safari seems to look for an input field with password and username and always tries to fill it @user3172174

有时我注意到这个奇怪的行为在 Chrome 和 Safari 上，当密码字段是相同的形式。我想，浏览器会查找一个密码字段来插入您保存的凭据。然后将用户名自动填写到最接近的 textlike-input 字段中，该字段出现在 DOM 中的密码字段之前 (仅由于观察而猜测) 。由于浏览器是最后一个实例，您无法控制它，

有时甚至 autocomplete = off 不会阻止将凭据填入错误的字段，而不是用户或昵称字段。

以上这个 readonly-fix 为我工作。

第四种思路

在浏览 Apple’s Safari HTML pages 并且没有找到任何自动完成后，我做了一些搜索和思考。

苹果讨论阅读 a (mildly) related question 后，我记得默认是不允许记住的密码，等 (可以在 i 设备的系统设置中启用，或在提示) 。由于苹果公司已经搬到这个功能了浏览器，进入他们的 (专有的，我)OS(screen shots on this article)，我相信他们完全忽略了 HTML 表单/字段属性。

除非他们改变他们对这个功能的心态，因为我确信这是他们的预期行为，在他们锁定的设备上，我会在假设这不会消失的情况下工作。这可能与原生 iOS 应用不同。保留表单 autocomplete = “off” 和 hopefully they’ll one day get back to the HTML5 standard 的功能。

我知道这不包括任何工作，但是我认为如果您将其作为 iDevices 上的 non-browser ‘feature’ 来说，这是有道理的 (以苹果的方式) 。

第五种思路

这个问题已经成功回答了，但截止到今天为止，解决方案对我来说没有什么奇怪的变化 – 所以我在这里注意到了我自己的参考，如果我决定回来和其他人一样。

假输入需要在 dom 中的真实电子邮件输入之后。
假输入需要一个假标签。
假标签不能绝对定位。
无法使用显示，可见度或不透明度隐藏假元素。

我发现唯一的解决方案是使用 overflow: hidden 来剪切伪元素的可见性。

<label for="user_email">Email</label>
<input autocomplete="off" type="text" value="user@email.com" name="user[email]" id="user_email">
<!-- Safari looks for email inputs and overwrites the existing value with the user's personal email. This hack catches the autofill in a hidden input. -->
<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">

为了记录，这个黑客来的有用的特定情况是管理员正在编辑其他用户的配置文件，而 Safari 正在用管理员的电子邮件替换用户的电子邮件。我们已经决定，对于 Safari ‘feature’ 创建的小型 (但令人沮丧的) 支持请求，不必保持一个似乎需要随着 Safari 收紧而变化的黑客，而是为这些用户提供如何支持关闭自动填充。

第六种思路

::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

参考文献

Disabling Safari autofill on usernames and passwords

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

禁用用户名和密码上的 Safari 自动填充