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

html browser autocomplete

1063326 观看

30回复

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

作者: Brett Veenstra 的来源 发布者: 2019 年 7 月 26 日

回应 (30)


2487

决定

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

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

根据Mozilla Developer Network文档,Boolean表单元素属性autocomplete可防止表单数据在旧版浏览器中缓存。

<input type="text" name="foo" autocomplete="off" />
作者: nlucaroni 发布者: 05.08.2008 04:24

292

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

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

作者: Ben Combee 发布者: 20.10.2008 01:36

218

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

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

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

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

什么是Web开发人员?

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

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

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

作者: apinstein 发布者: 23.04.2014 04:00

141

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

上面的readonly-fix对我有用。

作者: dsuess 发布者: 16.06.2014 04:04

98

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

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

作者: brendan 发布者: 05.08.2008 04:27

83

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

作者: Geynen 发布者: 24.11.2016 05:07

58

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

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

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

在信用卡安全代码的字段上关闭它尤为重要。正如此页面所述:

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

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

作者: Sam Hasler 发布者: 23.01.2009 09:21

32

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

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

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

作者: Securatek 发布者: 17.09.2011 12:33

29

三种选择:第一种:

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

第二:

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

第三(javascript代码):

$('input').attr('autocomplete', 'off');
作者: yajay 发布者: 19.03.2013 10:05

27

我通过使用随机字符解决了谷歌Chrome的无休止的争斗。当您始终使用随机字符串渲染自动完成时,它将永远不会记住任何内容。

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

希望它能帮助其他人。

作者: step 发布者: 04.08.2018 02:22

21

在相关或实际上,在完全相反的说明 -

“如果您是上述表单的用户并希望重新启用自动填充功能,请使用此bookmarklets页面中的'记住密码'书签。它会删除autocomplete="off"页面上所有表单的所有属性。继续战斗! “

作者: Antti Kissaniemi 发布者: 08.09.2008 07:29

20

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

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

作者: Jon Adams 发布者: 16.09.2008 03:35

19

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

作者: EndangeredMassa 发布者: 05.08.2008 04:32

19

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

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

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

作者: Kaszoni Ferencz 发布者: 01.05.2015 05:56

18

我认为autocomplete=offHTML 5支持。

问问自己为什么要这样做 - 在某些情况下可能有意义,但不要仅仅为了这样做。

它对用户来说不太方便,甚至在OS X中也没有安全问题(Soren在下面提到)。如果您担心人们的密码被远程窃取 - 即使您的应用程序使用,按键记录器仍然可以执行此操作autcomplete=off

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

作者: user631300 发布者: 23.02.2011 11:24

18

在这次谈话中,没有一个解决方案适合我。

我终于想出了一个纯HTML解决方案,它不需要Javascript,在现代浏览器中工作(除了IE;必须至少有一个捕获,对吗?),并且不需要你为整个表单禁用自动完成。

只需关闭自动完成功能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>
作者: lifo 发布者: 15.08.2013 07:02

17

这是一种非标准的方式(我认为Mozilla和Internet Explorer仍然支持它)但是弄乱用户的期望是一个坏主意。

如果用户在表单中输入他们的信用卡详细信息,然后让其他人使用该浏览器,则不是您的担忧。:)

作者: sparkes 发布者: 05.08.2008 04:26

16

这适合我。

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

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

作者: Muhammad Awais 发布者: 30.12.2016 03:05

13

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

在某些情况下,即使autocomplete属性设置为off,浏览器也会继续建议自动完成值。对于开发人员来说,这种意想不到的行为非常令人费解 真正强制不完成的技巧是为属性分配一个随机字符串,如下所示:

autocomplete="nope"
作者: AAH-Shoot 发布者: 22.03.2016 07:38

13

最好的解决方案:

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

<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

适用于:

  • Chrome: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

作者: Cava 发布者: 20.03.2018 04:31

13

尝试添加

readonly onfocus =“this.removeAttribute('readonly');”

此外

自动填充=“关闭”

到你不想记住表单数据(输入(S) 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');" >


更新:以下是基于此方法的完整示例,可防止拖放复制粘贴等。

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

测试在主流浏览器的最新版本的IE Google ChromeMozilla FirefoxMicrosoft Edge,等,并没有任何问题的工作。希望这可以帮助...

作者: Murat Yıldız 发布者: 01.11.2017 01:26

12

添加

autocomplete="off"

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

测试:

  • Firefox 3.5,4 BETA
  • Internet Explorer 8
作者: Hash 发布者: 11.02.2011 05:14

11

Use a non-standard name and id for the fields, so rather than "name" have "name_". Browsers will then not see it as being the name field. The best part about it is that you can do this to some but not all fields and it will autocomplete some but not all fields.

作者: Teifion 发布者: 05.08.2008 04:27

11

In order to avoid the invalid XHTML you can set this attribute using javascript. Example using jQuery:

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

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

The problem is that users without javascript will do get the autocomplete functionality.

作者: cherouvim 发布者: 12.12.2010 06:34

11

Adding autocomplete="off" is not gonna cut it.

Change input type attribute to type="search".
Google doesn't apply auto-fill to inputs with a type of search.

作者: Matas Vaitkevicius 发布者: 28.10.2015 04:32

10

try these too if just autocomplete="off" doesn't work:

autocorrect="off" autocapitalize="off" autocomplete="off"
作者: jeff 发布者: 04.12.2012 06:24

10

据报道,我不敢相信这仍是一个问题。以上解决方案对我来说不起作用,因为safari似乎知道元素何时没有显示或屏幕外,但以下对我有用:

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

希望对某人有用!

作者: Ben 发布者: 23.04.2016 11:02

10

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

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

<? $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>

然后服务器处理这样的post变量:

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']);

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

即使浏览器更新,所有工作都像魅力,想要忽略自动完成。这是解决这个问题的最好方法。

作者: Simmoniz 发布者: 02.06.2015 08:37

9

这里提到的黑客都没有在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>
作者: Jakob Løkke Madsen 发布者: 02.07.2015 10:40

9

所以这是它:

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

作者: Stav Bodik 发布者: 29.05.2016 07:57
32x32