如何在网页表单字段/输入标签上禁止浏览器自动完成?

html forms browser autocomplete


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




Answer 1 nlucaroni


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

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

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

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



Answer 2 Ben Combee


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

当表单提交时,你可以在服务器端处理它们之前将这部分内容剥离出来。这将防止Web浏览器找到你的字段的上下文,也可能有助于防止XSRF攻击,因为攻击者无法猜测表单提交的字段名。




Answer 3 apinstein


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

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

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

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

网站开发人员要做什么?

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

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

我还没有彻底调查IE或Firefox,但如果其他人在评论中得到信息,我将很乐意更新答案。




Answer 4 dsuess


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

这个变通方法是在apinstein的关于浏览器行为的帖子之外。

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

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

更新:移动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

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

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

上面这个readonly-fix对我有用。




Answer 5 Geynen


Chrome的解决方案是将 autocomplete="new-password" 到输入类型的密码中。请检查以下示例。

Example:

<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 所做的更改生效,许多浏览器将页面保存在缓存中,这给我留下了不好的印象,即该页面不起作用,但浏览器实际上并未带来更改。