如何禁用 Web 表单字段 / 输入标签上的浏览器自动完成功能?

如何在主要浏览器中为特定input (或form field )禁用autocomplete

答案

Firefox 30 会忽略密码的autocomplete="off" ,而是选择提示用户是否应将密码存储在客户端上。请注意以下 2014 年 5 月 5 日的评论

  • 密码管理器总是提示是否要保存密码。未经用户许可,不会保存密码。
  • 我们是继 IE 和 Chrome 之后第三个实现此更改的浏览器。

根据Mozilla 开发人员网络文档,布尔表单元素属性autocomplete可以防止将表单数据缓存在较旧的浏览器中。

<input type="text" name="foo" autocomplete="off" />

除了autocomplete=off ,还可以通过生成页面的代码来使表单字段名称随机化,也许可以通过在名称末尾添加一些特定于会话的字符串来实现。

提交表单后,您可以先剥离该部分,然后再在服务器端对其进行处理。这将阻止 Web 浏览器为您的字段查找上下文,也可能有助于防止 XSRF 攻击,因为攻击者将无法猜测表单提交的字段名称。

现在,大多数主要的浏览器和密码管理器(正确的是 IMHO)都会忽略autocomplete=off

为什么?许多银行和其他 “高安全性” 网站都出于 “出于安全目的” 在其登录页面上添加了autocomplete=off补全autocomplete=off但这实际上降低了安全性,因为这会使人们更改这些高安全性网站上的密码容易记住(从而破解)。 ),因为自动填充功能已损坏。

很久以前,大多数密码管理器开始忽略autocomplete=off ,现在浏览器开始仅对用户名 / 密码输入执行相同的操作。

不幸的是,自动完成实现中的错误将用户名和 / 或密码信息插入到不合适的表单字段中,从而导致表单验证错误,或者更糟的是,意外地将用户名插入用户故意留空的字段中。

Web 开发人员要做什么?

  • 如果您可以自己将所有密码字段保留在页面上,那么这是一个很好的开始,因为似乎密码字段的存在是触发用户 / 密码自动完成功能的主要触发因素。否则,请阅读以下提示。
  • Safari注意到有两个密码字段,并且在这种情况下会禁用自动完成功能,前提是该密码必须是更改密码形式,而不是登录形式。因此,请确保在您允许的任何表单中使用 2 个密码字段(新密码并确认新密码)
  • 不幸的是, Chrome 34 会在看到密码字段时尝试使用用户 / 密码自动填充字段。这是一个非常糟糕的错误,希望它们会改变 Safari 的行为。但是,将其添加到表单顶部似乎会禁用密码自动填充功能:

    <input type="text" style="display:none">
    <input type="password" style="display:none">

我尚未对 IE 或 Firefox 进行彻底调查,但是如果其他人在评论中有信息,我将很乐意更新答案。

有时, 即使 autocomplete = off不会阻止将凭据填充到错误的字段中,但不能阻止将用户或昵称字段填充

此解决方法是 apinstein 关于浏览器行为的文章的补充。

修复浏览器以只读方式自动填充并设置为可写焦点(单击和标签)

<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

因为浏览器会自动将凭据填充到错误的文本字段!?

当密码字段的格式相同时 ,我会在 Chrome 和 Safari 上发现这种奇怪的行为我猜想,浏览器会寻找一个密码字段来插入您保存的凭据。然后,它会自动填充(仅出于观察目的而猜测)最接近的类似文本的输入字段,该字段出现在 DOM 中的密码字段之前。由于浏览器是最后一个实例,您无法控制它,

上面的只读修复对我有用。

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

这将在 Internet Explorer 和 Mozilla FireFox 中运行,缺点是它不是 XHTML 标准。

Chrome 的解决方案是将autocomplete="new-password"到输入类型的密码中。

例:

<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>

Chrome 会始终在发现密码类型的框时自动对数据进行自动填充,足以表明该框是否为autocomplete = "new-password"

这对我来说很好。

注意:请确保使用 F12 所做的更改生效,许多浏览器将页面保存在缓存中,这给我留下了不好的印象,即该页面不起作用,但浏览器实际上并未带来更改。

正如其他人所说,答案是autocomplete="off"

但是,我认为有必要说明为什么在某些情况下使用此方法是个好主意,因为对此的一些答案和重复的问题表明最好不要将其关闭。

停止将存储信用卡号的浏览器留给用户。太多的用户甚至没有意识到这是一个问题。

尤其是在信用卡安全码字段中将其关闭非常重要。如该页面所述:

“永远不要存储安全代码... 其价值取决于以下假设:提供该安全代码的唯一方法是从实物信用卡中读取该安全代码,从而证明提供该安全代码的人实际上持有该卡。”

问题是,如果这是一台公用计算机(网络咖啡馆,图书馆等),那么其他用户很容易窃取您的卡详细信息,即使是在您自己的计算机上,恶意网站也可能窃取了自动完成的数据

为了避免禁用自动完成功能,我不得不与这些回答有所不同。

首先要提到的是,未在登录表单字段上明确禁用自动完成功能是 PCI-DSS 失败。另外,如果用户的本地计算机受到威胁,则由于攻击者会以无格式存储任何自动完成的数据,因此攻击者可以轻松获取这些数据。

当然,可用性是有争议的,但是在哪些表单字段应禁用自动完成功能以及哪些不应该禁用自动完成功能方面,这是一个很好的平衡。

我已经通过使用随机字符解决了与 Google Chrome 的无休止的斗争。当您始终使用随机字符串呈现自动完成功能时,它将永远不会记住任何内容。

<input name="name" type="text" autocomplete="rutjfkde">

希望对其他人有帮助。

三个选择:第一:

<input type='text' autocomplete='off' />

第二:

<form action='' autocomplete='off'>

第三(JavaScript 代码):

$('input').attr('autocomplete', 'off');