禁用用户名和密码的chrome自动填充不适用于较新版本

Posted 2023-03-05

【中文标题】禁用用户名和密码的chrome自动填充不适用于较新版本

【英文标题】：Disable chrome autofill for username and password not working for newer versions

【发布时间】：2019-06-22 10:14:27

【问题描述】：

我的项目在 ReactJS 和 Redux 中，我正在为我的表单使用 redux-form。我网站的一个页面中有两种形式（都有输入类型文本和密码字段）。现在，chrome 在另一个表单中显示了一个表单的自动填充列表，并且由于我网站中的跳出率增加，它无法正常工作。

我想禁用自动填充和自动完成下拉列表，但没有得到任何解决方案。我的 Chrome 版本是 71.0.3578.98。

我尝试了以下方法（从其他 Stack Overflow 链接中读取）；但它们都不起作用。

使用自动完成值 off/nope/new-password（看起来 chrome 在用户名/密码字段的情况下会忽略这一点）(https://***.com/a/38257374/6487887) (Disabling Chrome Autofill) 对表单使用 autocomplete="off" 而不是输入字段 使用隐藏的输入类型文本和密码 (https://www.20spokes.com/blog/what-to-do-when-chrome-ignores-autocomplete-off-on-your-form) 为各个字段使用不同的名称 将字段设为只读，然后在焦点上删除只读

唯一似乎可以正常工作的方法是将字段设为只读并在用户开始键入时删除只读（onKeyDown 事件）。然后，如果用户按退格键并且输入为空，则 make 再次为只读，否则自动填充下拉列表再次显示。这个解决方案更像是一个 hack，我想知道任何更好的解决方案。

PS：这是一个重复的问题，但我没有任何适用于新版 Chrome 的相关解决方案。我关注的链接： Disabling Chrome Autofill、Chrome ignores autocomplete="off"、How to disable Chrome to autofill username/email password?、Disable Google Chrome Autocomplete / Autofill / Suggestion 等等。

【参考方案1】：

我一直在尝试找到一种可靠的方法来完全停止这种情况，我发现唯一可行的解​​决方案是在主体顶部放置几个隐藏字段。

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

Hacky，我知道，但我什至尝试了 Coderer 提到的 Chrome team response link 中给出的确切示例：

例如，如果您的 CRM 工具中有一个地址输入字段，但您不希望 Chrome 自动填充，您可以为其赋予相对于您所要求的内容有意义的语义含义：例如自动完成=“新用户街道地址”。如果 Chrome 遇到这种情况，它不会尝试自动填充该字段。

...但这不起作用（尽管该帖子已有多年历史）。

【参考方案2】：

您是否尝试过this official Chrome team response 的建议？

如果您确实想禁用自动填充，我们此时的建议是利用 autocomplete 属性为您的字段赋予有效的语义含义。如果我们遇到无法识别的自动完成属性，我们不会尝试填充它。

如果您没有有效的name 属性，这实际上不会起作用。那么，您是否尝试过类似<input type="text" name="fieldX" autocomplete="my-site-field-x"> 的方法？用于name 和autocomplete 的值可能很重要，因为我听说有些人建议Chrome 有时会对规范中的识别值进行模糊匹配（如address、telephone、email、等等）。

【讨论】：

那篇文章是 2016 年发布的，不再有效。谷歌本周推出了一个更新（v. 72.0.3626.x），它忽略了所有自动完成设置，包括“新密码”。如果它在代码中的任何位置检测到“密码”类型的输入字段，它将在找到的第一个（或随机）输入字段中自动填充用户名。

那么，Chrome 团队中是否有人发布了任何更新的指南？对于不包含密码的表单，我已成功使用此指南。 （顺便说一句，在我个人的使用中，我不记得上一次自动填充实际上做了我想要的......）

【参考方案3】：

我可以通过在输入之前创建隐藏输入并为原始输入名称添加随机数来禁用 Chrome 自动填充功能：

<input type="text" name="address" value="" readOnly=true style=display: "none"/>
<input
  ref=inputRef
  className="form-control"
  type="text"
  name="address " + Math.random()    <--- add random number to prevent Chrome autofill
  required
  placeholder="New York"
  value=location.address
  onChange=handleInputChange
/>

【参考方案4】：

我找到了一种可以使隐藏输入解决方案发挥作用的方法。我在我的项目中使用它来禁用 chrome 自动填充我的用户名。

<!-- add a dummy input element and make sure chrome will auto-populate your username(or address etc) to it -->
<input type="text" style="pointer-events: none; opacity: 0; position: absolute">

pointer-events: none;  => make it not the target of pointer events
opacity: 0;   => make it disappear
position: absolute;   => don't let it break your dom structure

在 Chrome 75.0.3770.100 中运行良好。

希望对你有帮助。

【参考方案5】：

这会起作用

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

【参考方案6】：

替代方法

这个问题的根本原因是设置 input type="password" 自动使所有保存的凭据弹出，并且似乎没有任何工作可以阻止它。

此解决方案的总体思路是避免设置 type="password" 并使输入文本看起来像密码字段。幸运的是，在 Chrome 中执行此操作非常简单，但不幸的是，这不适用于 Firefox、Internet Explorer 和 Firefox android，根据此链接https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security

解决办法

而不是使用类型设置为密码的经典输入

<input type="password"/>

执行以下操作：

<input type="text" style="-webkit-text-security: disc;"/>

希望此解决方案对您有用。