题 如何在Web表单字段/输入标记上禁用浏览器自动完成?


你怎么禁用 autocomplete 在主要的浏览器中为特定的 input (要么 form field)?


2260
2017-08-05 16:22


起源


还有一种用法包括用于创建或编辑用户的管理表单;您不希望表单预先填写您当前的凭据。这也适用于密码更改表单,尤其是那些设计为 留空以保持当前密码。 - Álvaro González
您想要这样做的另一个原因是密码,验证码和信用卡信息无法填写。 - Jeff Atwood
另请注意,某些渗透测试需要在某些字段上禁用自动完成功能 - Jeff Atwood
请仔细考虑一下。禁用保存信用卡信息等是有道理的,但除非您是银行,否则阻止密码自动填充可以显着减少有多少用户懒得登录您的网站,尤其是在狭窄键盘上输入密码的手机上需要付出很多努力。 - John Mellor
在其他情况下,这可能是非常有效的事情 - 例如在用户管理表单中 - 添加/更新用户 - 在管理大型系统中的用户组时,您几乎不希望自动完成密码。 - Dave Amphlett


答案:


Firefox 30忽略了 autocomplete="off" 对于密码,选择提示用户而不是密码是否应存储在客户端上。请注意以下内容 评论 从2014年5月5日起:

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

根据 Mozilla开发人员文档 表单元素属性 autocomplete 防止表单数据在旧版浏览器中缓存。

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

2219
2017-08-05 16:24



这在Firefox 3.0.3中对我不起作用我不得不将自动完成属性放在FORM而不是INPUT中。 - Winston Fassett
自动填充仅在HTML 5标准中定义,因此它将破坏您针对HTML 4运行的任何验证。* ... - Jrgns
@Winston,你应该把它放在表单上,​​并把它放在输入元素本身上。这样你就可以涵盖浏览器的所有非标准性。 - AviD
并记得禁用你的 autocomplete = on 在测试您的网络应用程序之前,扩展程序(如果您使用的是Chrome)。否则你会感觉像我一样愚蠢。 ;) - Jo Liss
autocomplete =“<除了开或关之外的任何东西>” - swapab


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

提交表单后,您可以在服务器端处理它之前删除该部分。这将阻止Web浏览器查找您的字段的上下文,也可能有助于防止XSRF攻击,因为攻击者无法猜测表单提交的字段名称。


248
2017-10-20 13:36



与使用autocomplete =“off”相比,这是一个更好的解决方案。您所要做的就是在每个页面加载时生成一个新名称,并将该名称保存到$ _SESSION以备将来使用: $_SESSION['codefield_name'] = md5(uniqid('auth', true)); - enchance
不,这不是更好的解决方案,因为此设置的首选项来源是用户代理,也称为Web浏览器。支持某些行为(HTML 5尝试做)和通过代表用户决定强制它之间存在差异,您建议这是一个“更好的解决方案”。 - amn
此解决方案可以适用于所有浏览器,因此在这方面它“更好”。仍然,amn是正确的,决定代表您的用户禁用自动填充不是一个好主意。这意味着我只会在非常特定的情况下禁用自动完成功能,例如当您计划构建自己的自动完成功能并且不希望发生冲突或奇怪的行为时。 - macguru2000
关于XSRF攻击,我不确定你所描绘的是什么类型的攻击,但攻击者不能像服务器端一样剥离端部以识别字段?或者,如果攻击者发布了字段,他们是否无法附加自己的随机字符串,因为它会被服务器剥离? - xr280xr
@ macguru2000构建自己的自动完成是一个完全合法和常见的用例。实际上,浏览器应该让开发人员更容易在需要时关闭自动完成功能,而不是强迫我们使用像这样的黑客 - whoadave


大多数主流浏览器和密码管理器(正确地,恕我直言)现在都忽略了 autocomplete=off

为什么?许多银行和其他“高安全性”网站增加了 autocomplete=off 到他们的登录页面“出于安全目的”但这实际上降低了安全性,因为它导致人们更改这些高安全性站点上的密码以便易于记忆(并因此破解),因为自动完成被破坏。

很久以前,大多数密码管理员开始忽视 autocomplete=off,现在浏览器开始只为用户名/密码输入做同样的事情。

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

什么是Web开发人员?

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

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

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


187
2018-04-23 04:00



你是什​​么意思“在你的页面上添加这个似乎禁用页面的自动填充:” - wutzebaer
@wutzebaer,Chrome注意到隐藏的密码字段并停止自动完成。据说这是为了防止网站在没有用户注意的情况下窃取密码信息。 - David W
您的代码片段会阻止Chrome,Firefox,IE 8和IE 10上的登录字段自动填充。没有测试IE 11.好东西!只有简单的答案仍然有效。 - Sam Watkins
您的safari注释似乎也适用于Chrome,至少截至2015年12月。我在注册表单上有一个用户名和密码字段,该字段是使用登录表单中的数据自动填充的。创建两个 type='password' 在一个页面上的字段导致浏览器的“保存密码”自动完成被忽略,这使得整个负载有意义,因为登录表单往往要求密码两次登录表单只要求它一次。 - Matt Fletcher
似乎不再适用于Chrome 55,除非隐藏额外的密码字段,否则会失败。 - jokkedk


有时 甚至自动完成=关闭 将 不要阻止填补 凭证到错误的字段,但不是用户或昵称字段。

此解决方法是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上有这种奇怪的行为 相同的形式。 我猜,浏览器会查找密码字段以插入您保存的凭据。然后它会自动填充(只是因为观察而猜)最近的textlike-input字段,它出现在DOM中的密码字段之前。由于浏览器是最后一个实例,您无法控制它,

上面的readonly-fix对我有用。


120
2018-06-16 16:04



如果没有javascript那么整个表单都会失败。 -1 - Jimmy Kane
@JimmyKane的关键是首先使用javascript添加属性(dsuess在这里没有完成,但只是为了完整性而添加)。 - trnelson
@tmelson我明白但仍然为什么使用js甚至禁用?让我们避免使用可以在本地改进的东西。我再次同意你的观点。 - Jimmy Kane
这在IE8中无法正常工作,只有在您重新聚焦并再次聚焦之后,首次对焦时,只读密码字段才可编辑。不错的想法,但不幸的是它有点太hacky并且不安全使用。 - Sam Watkins
这样做 不 在所有浏览器上正常工作(例如IE 11和IE Edge)。一旦到了 readonly 被删除,随后选择字段会导致自动完成返回。 - Gone Coding


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

这将适用于Internet Explorer和Mozilla FireFox,缺点是它不是XHTML标准。


93
2017-08-05 16:27



我注意到将它添加到表单元素并不总是阻止它应用于表单中的各个输入。因此,最好将其直接放在输入元素上。 - sholsinger
实际上@sholsinger,最好把它放在表单上,​​并在输入元素本身上。这样你就可以涵盖浏览器的所有非标准性。 - AviD
可悲的是,从IE 11开始,微软不再尊重这一点了 input type="password"。希望没有其他浏览器选择删除此功能。 - SamHuckaby
设置 autocomplete="off" 在...上 form 是唯一适用于Chrome的东西。 - Andrew


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您的更改生效,很多时候浏览器将页面保存在缓存中,这给我的印象是它不起作用,但浏览器实际上没有带来更改。


57
2017-11-24 17:07



这也可以在Chrome中用于其他类型的字段,而不仅仅是type =“password”。 - Jake
我使用它与密码,电子邮件和文本类型,它工作。我用它就像这样:autocomplete =“new” - Crak_mboutin
它不适用于v63 chrome - Palaniichuk Dmytro


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

但是,我认为这值得说明 为什么 在某些情况下使用它作为对此的一些答案是一个好主意 重复 问题表明最好不要关掉它。

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

在信用卡安全代码的字段上关闭它尤为重要。如 这一页 状态:

“永远不要存储安全代码......它的价值取决于这样一种假设:提供它的唯一方法是从实体信用卡中读取它,证明提供它的人实际上持有了这张卡。”

问题是,如果它是一台公共计算机(网吧,图书馆等),那么其他用户就可以轻易窃取您的卡详细信息,甚至在您自己的机器上也可以使用恶意网站 窃取自动填充数据


53
2018-01-23 21:21



如果我去了一个网站,它记得我的卡在下拉列表中我会非常不开心。 id开始想知道他们怎么会这么粗心。 - Simon_Weaver
更简单/更关键的案例。当我访问我网站管理员部分的用户页面时,它会尝试将用户名和密码设置为我的管理员用户名和密码,而不能告诉他这不是登录表单。我想记住我的管理员密码,但是它尝试将记住的用户名/密码应用于我随后编辑的任何用户是一个严重的错误。 - rjmunro


我不得不乞求与那些避免禁用自动完成的答案不同。

提出的第一件事是,在登录表单字段上未明确禁用自动完成是PCI-DSS失败。此外,如果用户的本地计算机受到威胁,则攻击者可以轻易获得任何自动完成数据,因为它以明文形式存储。

肯定存在可用性的争论,但是当涉及到哪些表单字段应该禁用自动完成时哪些不应该存在时,存在非常好的平衡。


29
2017-09-17 00:33



我刚注意到,当您使用AutoComplete填充文本输入时,IE不会触发onChange事件。我们有几十种形式和超过一千种onChange事件(输入验证,业务逻辑)遍布它们。最近我们将IE升级到更新的版本,突然之间发生了奇怪的事情。幸运的是,我们正在运行一个内部网应用程序,自动完成对我们来说不是一个用户体验问题,更容易关闭它。 - Robotron
如果用户本地计算机受到了损害,那么它们就会被搞砸了。它可能安装了一个键盘记录器,它可能添加了假的SSL根证书,并通过假代理等发送了所有内容。我有一个真正的理由禁用自动完成 - 当我以管理员身份登录并访问编辑用户页面时,它会分配那个用户我的管理员用户名和密码。我需要防止这种行为。 - rjmunro
浏览器供应商似乎在寻找自己的兴趣。保存的密码=用户锁定。自动完成开/关过于简单 - 为什么不是一个复杂的语义提示标准( html.spec.whatwg.org/multipage/... ),顺便说一句,允许浏览器从每个用户访问的网站收集有价值的语义数据? - aro_tech
我试图解决的具体用例是:他们已经登录了。但现在他们即将访问更敏感的东西。我想展示一个让他们重新认证的对话框,反对他们走出去吸烟和一个坏人坐在椅子上的可能性。已经尝试了几种技术来打败自动完成,但没有任何作用。现在我想,或许,至少,使用好旧的'password = window.prompt(“请重新输入密码”)'加上会话中的用户名,并尝试对其进行身份验证。 - David


三种选择: 第一:

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

第二:

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

第三(javascript代码):

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

24
2018-03-19 10:05



第一个和第二个选项应该是一个选项,因为它根据浏览器的处理方式而有所不同。 - rybo111
试过$ formElement.attr('autocomplete','off');它不起作用。 - highmaintenance


我一直在尝试无穷无尽的解决方案,然后我发现了这个:

代替 autocomplete="off" 只是简单地使用 autocomplete="false"

就这么简单,它就像谷歌Chrome中的魅力一样!


18
2018-05-01 05:56



正如你在chrome中所说,off值不起作用。它需要是“假的” - azuax
这在Chrome 43中不起作用 - Sevin7
适用于Chrome 44.0.2403.130。 - GuiGS
试过这个:$ formElement.attr('autocomplete','false');抱歉不行。 - highmaintenance