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

StackOverflow https://stackoverflow.com/questions/2530

  •  08-06-2019
  •  | 
  •  

题

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

有帮助吗？

解决方案

Firefox 30 忽略 autocomplete="off" 对于密码，选择提示用户是否应将密码存储在客户端上。请注意以下事项 评论 自 2014 年 5 月 5 日起：

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

根据 Mozilla 开发者网络 文档，布尔表单元素属性 autocomplete 防止表单数据在旧版浏览器中缓存。

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

其他提示

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

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

大多数主要浏览器和密码管理器（正确的是，恕我直言）现在忽略 autocomplete=off.

为什么？许多银行和其他“高安全性”网站添加 autocomplete=off “出于安全目的”到他们的登录页面，但这实际上降低了安全性，因为它会导致人们更改这些高安全性网站上的密码，以便于记住（从而破解），因为自动完成功能已被破坏。

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

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

网络开发人员要做什么？

  • 如果您可以将所有密码字段单独保留在页面上，那么这是一个很好的开始，因为密码字段的存在似乎是用户/密码自动完成启动的主要触发因素。否则，请阅读下面的提示。
  • 苹果浏览器 注意到有 2 个密码字段，并在这种情况下禁用自动完成功能，假设它必须是更改密码表单，而不是登录表单。因此，请务必在您允许的任何表单中使用 2 个密码字段（新密码和确认新密码）

  • 铬合金 不幸的是，34 每当看到密码字段时都会尝试使用用户/密码自动填充字段。这是一个非常糟糕的错误，希望他们能够改变 Safari 的行为。但是，将其添加到表单顶部似乎会禁用密码自动填充：

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

我还没有彻底研究 IE 或 Firefox，但如果其他人在评论中提供信息，我将很乐意更新答案。

有时 甚至自动完成=关闭 会 不阻止填充 将凭据放入错误的字段，但不是用户或昵称字段。

此解决方法是对 apinstein 关于浏览器行为的帖子的补充。

修复浏览器自动填充只读状态并将焦点设置为可写（单击并选项卡）

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

更新：Mobile 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/

// 更新结束

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

我注意到 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 失败。此外，如果用户的本地计算机受到威胁，那么任何自动完成数据都可以轻松地被攻击者获取，因为这些数据是以明文形式存储的。

对于可用性当然存在争议，但是在哪些表单字段应该禁用自动完成功能以及哪些不应该禁用方面有一个非常精细的平衡。

三个选项：第一的： 

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

第二： 

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

第三（javascript代码）： 

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

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

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

希望它对其他人有帮助。

在相关或实际上，完全相反的注释上 -

“如果您是上述表单的用户，并且想重新启用自动完成功能，请使用此处使用'记住密码'bookmarklet 书签页. 。它删除了一切 autocomplete="off" 页面上所有表单的属性。继续打好战斗！”

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

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

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

我一直在尝试无数的解决方案，然后我发现了这个：

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

就这么简单，而且它在 Google Chrome 中也有魅力！

我认为 autocomplete=off HTML 5 支持。

问问自己为什么要这样做——在某些情况下这可能是有意义的，但不要只是为了这样做而这样做。

这对用户来说不太方便，甚至在 OS X 中也不是安全问题（下面由 Soren 提到）。如果您担心人们的密码被远程窃取 - 即使您的应用程序使用击键记录器，击键记录器仍然可以做到这一点 autcomplete=off.

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

在这次谈话中，没有一个解决方案对我有用。

我终于想出了一个 纯 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>

这是一种非标准的方法（我认为 Mozilla 和 Internet Explorer 仍然支持它），但扰乱用户的期望是一个坏主意。

如果用户在表单中输入他们的信用卡详细信息，然后让其他人使用该浏览器，那么这与您无关。:)

这对我有用。

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

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

游戏有点晚了……但我刚刚遇到了这个问题并尝试了几次失败，但这一个对我有用 MDN

在某些情况下，即使将自动完成属性设置为OFF，浏览器也会继续建议自动完成值。这种出乎意料的行为对开发人员来说可能会令人困惑。真正强迫无完成的诀窍是将随机字符串分配给类似的属性：

autocomplete="nope"

最佳解决方案：

防止自动完成用户名（或电子邮件）和密码： 

<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

  • 火狐浏览器：44、45、46、47、48、49、50、51、52、53、54、55、56、57 和 58

添加

autocomplete="off"

添加到表单标签将禁用所有浏览器的自动完成功能（之前在该字段中输入的内容） input 该特定形式中的字段。

测试于：

  • 火狐 3.5、4 测试版
  • 互联网浏览器 8
  • 铬合金

尝试添加

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

此外

自动完成=“关闭”

到您不想记住表单数据的输入（username, password, 等）如下图： 

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

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


更新： 下面是基于这种方法的完整示例，可以防止 拖放, 复制, 粘贴, ， ETC。

<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" >

在主要浏览器的最新版本上进行了测试，即 Google Chrome, Mozilla Firefox, Microsoft Edge, ， ETC。并且工作没有任何问题。希望这可以帮助...

对字段使用非标准名称和 ID，因此使用“name_”而不是“name”。浏览器将不会将其视为名称字段。最好的部分是您可以对某些但不是所有字段执行此操作，并且它会自动完成一些但不是所有字段。

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

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

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

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

添加 autocomplete="off" 不会削减它。

将输入类型属性更改为 type="search".
Google 不会对搜索类型的输入应用自动填充功能。

也试试这些如果只是 autocomplete="off" 不起作用：

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

我不敢相信这在报道后这么长时间仍然是一个问题。上述解决方案对我不起作用，因为 safari 似乎知道元素何时未显示或离开屏幕，但是以下解决方案对我有用：

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

希望这对某人有用！

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

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

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

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

一切都像一个魅力，即使浏览器更新，想要忽略自动完成或不。这对我来说是解决问题的最佳方法。

这里提到的所有技巧在 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>

所以就是这样：

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top