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

Question

您可能已经知道,Safari有一个讨厌的自动填充错误,它填写电子邮件,用户名和密码字段,无论您是否设置autocomplete="off".

这是一个基本形式:

<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会查找这些<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在Twitter上指出,Safari正在获得4.0.3更新,其中提到"登录自动填充".有谁知道这个更新是否会解决这个问题？

Answer 1

我有同样的问题.虽然我的解决方案并不完美,但似乎有效.基本上,Safari似乎在寻找带有密码和用户名的输入字段,并且总是试图填充它.因此,我的解决方案是在Safari可以填充的当前版本之前添加一个假的用户名和密码字段.我尝试使用style="display: none;"但是没有用.所以,最终,我刚刚使用style="position:absolute; top:-50px;",这隐藏了输入字段,看起来工作正常.我不想使用JavaScript,但我猜你可以用JavaScript隐藏它.

现在,Safari从未自动填写我的用户名和密码字段.

Answer 2

浏览器忽略的原因autocomplete=off是因为有些网站试图禁用自动填写密码.

那是错的.

2014年7月,Firefox是最后一个主要的浏览器,最终实现了更改,忽略了任何试图关闭自动填充密码的网站.

• 2009年6月:IEInternals博客,他们讨论如何让用户保持控制(存档)
• 2014年2月:Chrome在他们开始忽略时的声明autocomplete=off(存档)
• 2014年1月:Bugzilla Bug 956906 - 当提供通过密码管理器保存密码时忽略autocomplete ="off"(存档)
• Reddit讨论(存档)

关于我们的HTML表单自动完成功能的一个主要用户投诉是"它不起作用 - 我没有看到我之前输入的任何文本." 在调试此类情况时,我们通常会发现该网站已明确禁用该功能使用提供的属性,但当然,用户不知道该网站已经这样做,只是假设IE是错误的.根据我的经验,当隐藏或替换功能时,用户通常会责怪浏览器,而不是网站.

任何网站试图绕过浏览器的偏好都是错误的,这就是浏览器忽略它的原因.没有理由知道为什么网站应该尝试禁用密码保存.

• Chrome忽略了它
• Safari忽略了它
• IE忽略了它
• Firefox忽略了它

在这一点上,Web开发人员通常会抗议"但我不会在任何地方都这样做 - 只有少数才有意义!" 即使这是真的,不幸的是,这是另一种情况,浏览器真的没办法分辨出来.请记住,弹出窗口曾经是网络浏览体验的一个快乐,有用的部分,直到广告商的滥用使他们成为各地用户的祸根.不可避免的是,所有的浏览器都开始阻止弹出窗口,打破了那些使用具有良好品味和自由裁量权的弹出窗口的"好"网站.

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

有人提出了一个很好的用例:

我有一个共享的公共区域,亭子式计算机.我们不希望有人(意外或有意)保存他们的密码,以便下一个用户可以使用它.

这并没有违反声明:

任何网站试图绕过浏览器的偏好都是错误的

那是因为在共享信息亭的情况下:

• 它不是具有古怪政策的网络服务器
• 它是具有奇怪策略的客户端用户代理

该浏览器(在共享计算机)是有要求的一个也没有尝试保存密码.

防止正确的方法浏览器从保存密码
是配置的浏览器不保存密码.

由于您已锁定并控制此自助服务终端计算机:您可以控制设置.这包括保存密码的选项.

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

来自Chrome政策列表:

AutoFillEnabled

启用自动填充功能

数据类型:布尔值(REG_DWORD)

Windows注册表位置: Software\Policies\Chromium\AutoFillEnabled

说明:启用Chromium的自动填充功能,并允许用户使用以前存储的信息(如地址或信用卡信息)自动填写Web表单.如果禁用此设置,用户将无法访问自动填充.如果启用此设置或未设置值,则自动填充将保持在用户的控制之下.这将允许他们配置自动填充配置文件并自行决定是否打开或关闭自动填充功能.

请将这个词告诉企业经理,试图禁用自动填写密码是错误的.浏览器故意无视任何试图这样做的人是错误的.那些人应该停止做错事.™

换句话说

换一种说法:

• 如果用户浏览器
• 错误"请输入您最喜欢的婚前姓名的第一个颜色的名称." 获取新密码
• 和用户
• 不想要他们的浏览器
• 更新自己的密码,
• 然后他们
• 将点击Nope

• 如果我想保存我的HIPPA密码:那是我的权利
• 如果我想保存我的PCI密码:那是我的权利
• 如果我想保存"用户的新密码":这是我的权利
• 如果我想保存一次性密码:这是我的权利
• 如果我想保存我的"第一颜色最喜欢的少女"答案:那是我的权利.

过度统治用户的意愿不是你的工作.这是他们的浏览器; 不是你的.

Answer 3

修复:浏览器通过只读模式自动填充并在焦点上设置可写

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

(焦点=鼠标单击并通过字段标记)

更新:Mobile Safari将光标设置在字段中,但不显示虚拟键盘.New Fix像以前一样工作,但处理虚拟键盘:

<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自动填充开始.无论[字段名称是什么] @Jari

而且有一个假设:

Safari似乎在寻找带有密码和用户名的输入字段,并且总是试图填写它 @ user3172174

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

有时甚至autocomplete = off也不会阻止将凭据填入错误的字段,但不会阻止用户或昵称字段填写.

上面的readonly-fix对我有用.

Answer 4

将css添加到输入将隐藏safari按钮伪元素,用户将无法使用自动完成

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

Answer 5

只需将搜索输入名称，Safari 将忽略自动填充字段。

<input type="password" name="notsearch_password">

Answer 6

在浏览Apple的Safari HTML页面并且没有找到任何关于自动完成的内容之后,我做了一些搜索和思考.

在阅读了关于Apple讨论的(温和)相关问题之后,我记得默认是不允许记住密码等(可以在iDevice系统设置中或在提示符下启用).由于Apple已将此功能移出浏览器并进入其(专有的i)操作系统(本文的屏幕截图),我相信他们完全忽略了HTML表单/字段属性.

除非他们改变他们对这个功能的心态,因为我确信这是他们预期的行为,在他们锁定的设备上,我会假设这不会消失.对于原生iOS应用程序,这可能有所不同.绝对保持表单autocomplete ="off",希望有一天他们会回到该功能的HTML5标准.

我知道这不包括任何解决方法,但我认为如果你接受它是iDevices上的非浏览器"功能",它是有道理的(以Apple的方式).

Answer 7

这个问题已经得到了成功的回答,但截至今天的日期,如果没有做出一些奇怪的特殊修改,这个解决方案对我没有用 - 所以如果我决定回到它那里,我会在这里注意到这一点.至于其他人的.

• 假输入需要在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">

对于记录,此hack有用的特殊情况是管理员正在编辑其他用户的配置文件,而Safari正在用管理员的电子邮件替换用户的电子邮件.我们已经决定,对于这个Safari"功能"创建的小量(但令人沮丧)的支持请求,不值得维护一个似乎需要随着Safari收紧而发展的黑客攻击,而是为这些用户提供支持关于如何关闭自动填充.

Answer 8

我不敢相信这在报道后这么长时间仍然是一个问题。上述解决方案对我不起作用，因为 safari 似乎知道元素何时未显示或离开屏幕，但是以下解决方案对我有用：

<div style="position:absolute;height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

希望这对某人有用！