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


2789

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


2
在某些系统中,测试人员必须一遍又一遍地手动输入很多信息,将选项配置为可选项可能会很有用,以便在测试时可以将其禁用,然后单击“选项卡>向下箭头>选项卡>向下箭头等”。 。”
Simon_Weaver

Answers:


2623

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

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

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

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

45
在Firefox 3.0.3中,这对我不起作用,我不得不将autocomplete属性放在FORM中,而不是INPUT中。
温斯顿·法塞特

17
仅在HTML 5标准中定义了自动完成功能,因此它将破坏您针对HTML 4运行的所有验证。*
Jrgns

96
@Winston,您应该将其同时放在表单上,​​并在输入元素本身上。这样,您就可以涵盖浏览器的所有非标准性。
AviD 2010年

83
请记住,在测试Web应用程序之前,请禁用扩展功能中的autocomplete =(如果您使用的是Chrome)。否则,您会像我一样感到很傻。;)
Jo Liss


314

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

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


10
与使用autocomplete =“ off”相比,这是一个更好的解决方案。您要做的就是在每次加载页面时生成一个新名称,并将该名称保存到$ _SESSION中,以备将来使用:$_SESSION['codefield_name'] = md5(uniqid('auth', true));
强化

78
不,这不是更好的解决方案,因为此设置的首选来源是用户代理,也称为Web浏览器。支持某些行为(HTML 5尝试执行此行为)与通过代表用户来决定强制行为之间有区别,您认为这是“更好的解决方案”。
13年

15
该解决方案可以在所有浏览器上使用,因此在这方面是“更好”的。不过,amn是正确的,决定代表用户禁用自动完成并不是一个好主意。这意味着我只会在非常特殊的情况下禁用自动完成功能,例如,当您计划构建自己的自动完成功能并且不希望出现冲突或奇怪的行为时。
macguru2000

8
关于XSRF攻击,我不确定您要描绘的是哪种类型的攻击,但是攻击者难道不能像在服务器端识别字段那样以同样的方式剥掉末端部分吗?或者,如果攻击者正在发布字段,它们是否不能附加自己的随机字符串,因为它将被服务器剥离?
xr280xr 2015年

9
@ macguru2000建立自己的自动完成功能是完全合法且常见的用例。确实,浏览器应该使开发人员在需要时可以更轻松地关闭自动完成功能,而不是强迫我们使用此类黑客程序
令人震惊的

235

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

为什么?许多银行和其他“高安全性”网站autocomplete=off“出于安全目的” 添加到其登录页面中,但这实际上降低了安全性,因为这会导致人们更改这些高安全性站点上的密码,因为自动完成功能很容易记住(因而可以破解)坏了。

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

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

Web开发人员要做什么?

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

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

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


5
您的意思是“在页面上添加此内容似乎会禁用页面的自动填充:”
wutzebaer 2014年

5
@ wutzebaer,Chrome注意到隐藏的密码字段并暂停自动完成。据说这是为了防止网站在没有用户注意的情况下窃取密码信息。
David W

6
您的代码段阻止Chrome,Firefox,IE 8和IE 10上的登录字段自动完成。未测试IE11。好东西!只有简单的答案仍然有效。
山姆·沃特金斯

3
您的野生动物园笔记似乎也可以在Chrome上使用,至少从2015年12月起也是如此。我在注册表单上有一个用户名和密码字段,该字段会自动填写登录表单中的数据。type='password'在一页上创建两个字段会导致浏览器的“保存密码”自动完成功能被忽略,这很有意义,因为登录表单只要求输入一次时,注册表单就会要求输入两次密码。
马特·弗莱彻

3
除非不再隐藏额外的密码字段,否则似乎无法在Chrome 55中正常工作,否则将无法达到目的。
jokkedk

160

有时,即使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中的密码字段之前。由于浏览器是最后一个实例,您无法控制它,

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


8
如果没有javascript,则整个表单将失败。-1
Jimmy Kane 2014年

8
@JimmyKane的关键是首先还要使用javascript添加属性(dsuess此处并未完成此操作,只是出于完整性考虑而添加)。
trnelson

@tmelson我了解,但仍然为什么要使用js甚至将其禁用?让我们避免使用js来改进本机。我再次同意你的看法。
吉米·凯恩

3
这在IE8中无法正常工作,只读密码字段在您首次将其聚焦时是不可编辑的,只有在您重新聚焦并再次聚焦之后才可编辑。这是个好主意,但不幸的是,它有点过于hacky,使用起来不安全。
山姆·沃特金斯

在所有浏览器(例如IE 11和IE Edge)上,这不能正常工作。一旦readonly删除,随后选择该字段将导致自动完成返回。
Gone Coding

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

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


我注意到,将其添加到form元素并不总是阻止将其应用于表单中的各个输入。因此,最好将其直接放置在输入元素上。
sholsinger 2010年

15
实际上,@ sholsinger最好将其同时放在表单上和输入元素本身上。这样,您就可以涵盖浏览器的所有非标准性。
AviD 2010年

2
可悲的是,从IE 11开始,Microsoft不再尊重它input type="password"。希望没有其他浏览器选择删除此功能。
SamHuckaby 2014年

autocomplete="off"在上进行设置form是唯一适用于Chrome的功能。
安德鲁

106

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


2
这在Chrome中也适用于其他类型的字段,而不仅仅是键入=“ password”。
杰克

我将它与密码,电子邮件和文本类型一起使用,并且可以正常工作。我只是这样使用它:autocomplete =“ new”
Crak_mboutin

autocomplete =“ nope” name =“ pswd”,并在真实密码输入字段之前使用<input name =“ dummyPassword” type =“ password” style =“ display:none;”>。这对我有用。
Denuka,


现在,这几乎适用于所有浏览器,而不仅限于Chrome:autocomplete#Browser_compatibility
Andrew Morton

60

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

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

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

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

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

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


7
如果我去了一个站点,并且它记得下拉菜单中的卡片,我会非常不高兴。id开始想知道他们怎么可能这么粗心。
2009年

8
更简单/更关键的情况。当我访问网站管理员部分的用户页面时,它会尝试将其用户名和密码设置为我的管理员用户名和密码,而无法告知这不是登录表单。我想记住我的管理员密码,但这是一个严重错误,它试图将记住的用户名/密码应用于随后我编辑的任何用户。
rjmunro 2015年

34

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

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

希望对其他人有帮助。


2
这样效果更好。您可以添加一个小的JS,为每次页面加载生成一个随机代码,然后将该代码添加到输入字段中:<code> function autoId(){var autoId =“”; var dict =“ ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789”;for(var i = 0; i <12; i ++){autoId + = dict.charAt(Math.floor(Math.random()* dict.length)); } return autoId; } $('。autocompleteoff')。attr('autocomplete',autoId()); </ code>您可以将autocompleteoff类添加到所需的输入字段中。
Raghuram Kasyap '18年

在我的Chrome版本68.0.3440.106(正式版本)(64位)中不起作用
Sukanya Purushothaman

Chrome已修复,现在可以使用标准的“关闭”功能
-MacK,

1
遗憾的是,它的工作原理比铬
合金的

1
今天,我发现Chrome浏览器将使用“关闭”覆盖随机字符串。我不敢相信Chrome开发人员这样做会造成不良影响和无法控制的情况。为什么哦,我知道了。
步骤

33

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

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

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


我刚刚注意到,当您使用自动完成填充文本输入时,IE不会触发onChange事件。我们有数十种形式,一千多个onChange事件(输入验证,业务逻辑)遍布其中。最近,我们将IE升级到了较新的版本,突然开始发生奇怪的事情。幸运的是,我们正在运行Intranet应用程序,而自动完成功能对我们来说不是UX问题,只需关闭它就容易了。
Robotron

3
如果用户的本地计算机受到威胁,则它们会费时。它可能安装了键盘记录器,可能添加了伪造的SSL根证书,并且所有内容都通过虚假代理发送,等等。我确实有理由禁用自动填充功能-当我以管理员身份登录并访问“编辑用户”页面时,它会分配该用户我的管理员用户名和密码。我需要防止这种行为。
rjmunro 2015年

1
浏览器供应商似乎正在寻找自己的利益。保存的密码=用户锁定。自动完成打开/关闭太简单了-为什么不使用复杂的语义提示标准(html.spec.whatwg.org/multipage/…),该标准允许浏览器从每个站点收集有价值的语义数据用户访问?
aro_tech

我要解决的特定用例是:他们已经登录。但是现在他们将要访问更敏感的内容。我想显示一个对话框,使他们重新进行身份验证,以防止他们走开时冒烟,有坏人坐在椅子上的可能性。已经尝试了几种技巧来克服自动补全功能,但没有任何效果。现在我正在考虑,至少可以使用旧的'password = window.prompt(“请重新输入密码”)'和会话中的用户名,然后尝试进行身份验证。
David

31

三个选择:第一:

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

第二:

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

第三(JavaScript代码):

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

2
第一个和第二个选项应该是一个选项,因为它取决于浏览器的处理方式。
rybo111

尝试$ formElement.attr('autocomplete','off'); 它不起作用。
本·辛克莱

22

在相关或实际上完全相反的音符上-

“如果您是上述表单的用户,并且想要重新启用自动完成功能,请在此书签页面上使用'记住密码'书签。它会删除该页面上autocomplete="off"所有表单的所有属性。请继续战斗! ”


20

我们确实使用过sasb在一个站点上的想法。这是一个运行医生办公室的医疗软件网络应用程序。但是,我们的许多客户都是外科医生,他们使用许多不同的工作站,包括半公共终端。因此,他们希望确保不了解自动保存密码含义或不注意的医生不会意外地使他们的登录信息易于访问。当然,这是在IE8,FF3.1等中开始采用私有浏览的想法之前。即使如此,许多医生也被迫在医院使用老式IT不变的旧浏览器。

因此,我们让登录页面生成了仅适用于该帖子的随机字段名称。是的,它不太方便,但是只是在不将登录信息存储在公共终端上的情况下打了用户的脑袋。


20

在此对话中,没有任何解决方案对我有用。

我终于想通了一个纯HTML的解决方案,需要没有使用Javascript,在现代浏览器上运行(IE除外;有过至少1捕,对吧?),并且不要求您为整个表单自动完成禁用。

只需关闭上的自动完成功能form,然后将其打开即可使input您在表单中使用它。例如:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

这完全是我要找的东西!
马可·

20

刚设定autocomplete="off"。这样做有一个很好的理由:您想提供自己的自动完成功能!


20

我一直在尝试无休止的解决方案,然后发现了这一点:

而不是autocomplete="off"简单地使用autocomplete="false"

就这么简单,它在Google Chrome浏览器中也很吸引人!


正如您在chrome中所说,off值不起作用。它必须是“假”
azuax

在Chrome 44.0.2403.130上对我有效。
GuiGS

1
试过这个:$ formElement.attr('autocomplete','false'); 对不起不起作用。
本·辛克莱

20

这对我有用。

<input name="pass" type="password" autocomplete="new-password" />

我们还可以在其他控件(例如文本,选择等)中使用此策略


这应该是最新的答案。唯一适用于最新版本的答案
Nick Chan Abdullah,

19

我认为autocomplete=offHTML 5支持该功能。

问问自己自己为什么要这样做-在某些情况下这可能是有道理的,但不要仅仅为了这样做而这样做。

这对于用户来说不太方便,甚至在OS X中也没有安全问题(下面由Soren提到)。如果您担心别人的密码被远程窃取,即使您的应用程序使用了击键记录器,仍然可以这样做autcomplete=off

作为选择使用浏览器的用户,我的大部分信息都记住了,如果您的网站不记得我的信息,我会觉得很烦。


17

此外

autocomplete="off"

采用

readonly onfocus="this.removeAttribute('readonly');"

对于输入,你不希望他们能记住表单数据(usernamepassword等),如下图所示:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

希望这可以帮助。


1
在IE11中,即使在onfocus删除了readonly属性之后,我也无法在文本框中键入内容。但是,如果我第二次单击文本框,则可以键入。
mcallahan

我遇到了与IE11相同的问题(直到第二个焦点时才能键入)。添加模糊,然后再次聚焦。 $(document).on('focus', 'input:password[readonly="readonly"]', function () { $(this).prop('readonly', false).blur().focus(); });
palmsey

@Andrew当然可以。这是使该问题不堪重负的核心原则,我还添加了包含完整代码示例的更新;)
MuratYıldız18年

我还添加了onfocusout="this.setAttribute('readonly', 'readonly');"
-rinatdobr

16

最佳解决方案:

防止自动填充用户名(或电子邮件)和密码:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

防止自动填写字段:

<input type="text" name="field" autocomplete="nope">

说明: autocomplete继续工作<input>autocomplete="off"不起作用,但是您可以更改off为随机字符串,例如nope

适用于:

  • 铬:49、50、51、52、53、54、55、56、57、58、59、60、61、62、63和64

  • Firefox:44、45、46、47、48、49、50、51、52、53、54、55、56、57和58


2
我发现这在我的初步测试中有效。太奇怪了,“关闭”不起作用。
Craig Jacobs

这不适用于Android上的Chrome。我尝试为autocomplete属性设置字符串值,但该属性仍将先前的条目显示为输入下的自动完成建议。
tebs1200 '18

@ tebs1200哪一个?密码字段还是文本字段?
卡瓦

@Cava抱歉,回复延迟。文本字段。设置为什么值都无所谓autocomplete,我仍然会根据先前输入的值获得建议下拉列表。在台式机上很好,但在Android chrome上不行。
tebs1200 '18

14

游戏有点晚了...但是我只是遇到了这个问题,并尝试了几次失败,但这在MDN上对我有用

在某些情况下,即使将autocomplete属性设置为off,浏览器也会继续建议自动补全值。对于开发人员而言,这种意外行为可能会令人困惑。真正强制不完成的技巧是为属性分配一个随机字符串,如下所示:

autocomplete="nope"

13

添加

autocomplete="off"

标记到表单标签将禁用该input特定表单内所有字段的浏览器自动完成功能(以前在该字段中键入的内容)。

经过测试:

  • Firefox 3.5、4个测试版
  • Internet Explorer 8


12

在字段中使用非标准名称和ID,因此“名称”不是“名称”。这样浏览器就不会将其视为名称字段。最好的部分是您可以对部分但不是全部字段执行此操作,它将自动完成部分但不是全部字段。


问题在于,如果任何其他站点使用“ name_”来实现相同的目标,那么您将回到正题。
ConroyP

3
因此将其设为“ mysite_name”。如果有人在使用它,我会问他们问题...
Steve Perks,

这弄乱了一些自动填充的实用程序
Simon_Weaver

12

为了避免无效的XHTML,您可以使用javascript设置此属性。使用jQuery的示例:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

问题是没有JavaScript的用户将获得自动完成功能。


38
这不能避免无效的xhtml,它只是在您将无效位声明为有效后才动态添加无效位!
2011年

@Andiih:那么有没有办法使自动完成功能在xhtml中起作用?
cherouvim 2011年

1
工作(或停止工作是目标):如上所述。但是有效-不。
2011年

11

如果autocomplete="off"无法使用,也可以尝试以下方法:

autocorrect="off" autocapitalize="off" autocomplete="off"

11

我很难相信这已经被报道了这么久了。上面的解决方案对我不起作用,因为safari似乎知道何时不显示元素或不在屏幕外,但是以下内容对我有用:

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

希望对某人有用!


1
因此,将其放在实际的用户名和密码字段之前有效吗?浏览器填充了那些内容,而不是真实的内容
Andrew

11

就是这样:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}
<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">


1
如果样式文本框可以防止显示可见密码闪烁,则看起来是个好主意。
安德鲁(Andrew)

1
非常感谢,这项工作+1了,我对您的解决方案的改进是通过单行使其完成:<input oninput =“ this.type ='password'” id =“ inputpassword” type =“ text”>
Hasnaa Ibraheem19年

@HasnaaIbraheem感谢(:有时更具可读性更好。
STAV Bodik

11

这是浏览器现在忽略的安全问题。浏览器会使用输入名称来标识和存储内容,即使开发人员认为该信息是敏感的,也不应该存储。将输入名称更改为两个请求之间的值将解决问题(但仍将保存在浏览器的缓存中,并且还会增加浏览器的缓存)。要求用户激活或禁用浏览器设置中的选项不是一个好的解决方案。该问题可以在后端修复。

这是我的解决办法。我在框架中实现的一种方法。所有自动完成元素都是使用隐藏输入生成的,如下所示:

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

然后,服务器处理以下变量:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

该值可以照常访问

var_dump($_POST['username']);

而且浏览器将无法根据先前的请求或先前的用户来建议信息。

即使浏览器进行了更新,所有功能都像超级按钮一样,都希望忽略或不忽略自动完成功能。这是为我解决此问题的最佳方法。


10

这里提到的所有骇客都无法在Chrome中使用。此处对此问题进行了讨论:https : //code.google.com/p/chromium/issues/detail?id=468153#c41

将此添加到<form>作品中(至少现在):

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

1
请注意,使用此技术,FireFox仍将实际上自动填充该隐藏字段,该字段将在提交表单时包括在内。这可能很不好,因为密码将通过可能不安全的连接进行传输。幸运的是,添加maxlength="0"确实可以防止Firefox自动填充字段。
Mikal Schacht Jensen

9

您可以在输入中使用。

例如;

<input type=text name="test" autocomplete="off" />
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.