Chrome/Firefox 自动完成=新密码不起作用

igo*_*s07 6 html autocomplete change-password

我正在尝试添加autocomplete=new-password到一些用户编辑表单中,但它未能遵循 Chrome 79 和 Firefox 71 中的正确行为。这两种浏览器都应该支持它

这里有什么问题?
我创建了两个非常简单的示例来消除对问题的任何外部干扰。它们可以从任何 HTTP 服务器(例如php -S localhost:8999)提供服务。第一个页面触发“保存登录”功能,但第二个页面不应该使用该信息来自动完成密码 - 然而,它确实如此。

<!-- login.htm -->
<html>

<head></head>

<body>
  <form action="edit.htm" method="post">
    <label>Login <input type="text" name="login" /></label></br>
    <label>Password <input type="password" name="pwd" /></label><br />
    <input type="submit">
  </form>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)


<head></head>

<body>
  <form>
    <label>Login <input type="text" name="login" /></label></br>
    <label>New Password <input type="password" name="pwd" autocomplete="new-password" /></label><br />
    <input type="submit">
  </form>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

这不完全是“如何使用 autocomplete=new-password”的重复,因为行为似乎已经改变或记录不全。

小智 8

这似乎是浏览器强制页面以这种方式运行的一个问题/优点,并且在设置autocomplete="new-password"时或者即使您将该值设置为关闭时,绝对不会解决这个问题。但似乎有一种解决方法可以解决浏览器意外引起的这个问题。

- HTML方式:

您可以通过在表单顶部添加隐藏字段来分散浏览器的注意力来解决此问题

<!--  fake fields are a workaround for chrome/opera autofill getting the wrong fields -->
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
<input id="password" style="display:none" type="password" name="fakepasswordremembered">
Run Code Online (Sandbox Code Playgroud)

-JS方式:

您只需将密码输入设置为只读即可更改其状态

<html>
<head></head>
<body>
<form>
        <label>Login <input type="text" name="login"/></label></br>
        <label>New Password <input type="password" id="password" name="pwd" readonly autocomplete="new-password"/></label><br/>
        <input type="submit">
</form>
<script>
    document.getElementById('password').onfocus = function() {
        document.getElementById('password').removeAttribute('readonly');
    };
</script>
</html>
Run Code Online (Sandbox Code Playgroud)


x00*_*x00 7

由于您没有回复我的评论,我认为我的假设是正确的。所以我将发布评论作为答案:

我没有 Chrome 79 和 Firefox 71。我已经在 Ubuntu 上的 Chrome 85 和 FF 80 上进行了测试。

它按预期工作。

我假设通过

不应使用该信息来自动完成密码 - 但确实如此。

你的意思是:

  • 当密码字段获得焦点时,浏览器会显示一个下拉列表,其中包含一个选项,可以使用以前存储的密码填写该字段。

这在你看来是

[浏览器] 不应使用该信息来自动完成密码。
[...] 行为似乎已经改变或者没有记录。

但实际上这正是预期的行为。

这里(您链接的同一页面上的前一段)您可以看到原因:

即使没有主密码,浏览器内密码管理通常也被视为安全的净收益。由于用户不必记住浏览器为他们存储的密码,因此他们可以选择比其他方式更强的密码。

因此,许多现代浏览器不支持autocomplete="off"登录字段

如果网站设置了autocomplete="off"用户名和密码字段,则浏览器仍然会记住此登录信息,如果用户同意,浏览器将在用户下次访问该页面时自动填充这些字段。

当然,这autocomplete="off"不是关于autocomplete="new-password"

让我们进一步阅读

如果您正在定义一个用户管理页面,其中用户可以为另一个人指定新密码,因此您希望防止自动填充密码字段,则可以使用autocomplete="new-password".

这是一个提示,浏览器不需要遵守。然而,出于这个原因,现代浏览器已经停止自动填充 <input>元素。autocomplete="new-password"

由此:

  1. 自动填充与建议不同
  2. 浏览器CAN,但不SHOULD阻止自动填充
  3. autocomplete="new-password"阻止自动填充而不是建议

因此,当您设置autocomplete="new-password"浏览器时,将停止填充这些字段,但继续显示带有建议的下拉菜单。

没有什么可以autocomplete="new-password"阻止建议,而且建议总是可用是有明确原因的。

是的,也许措辞有点令人困惑,但遵循这个词的行为。

有关此功能背后的历史和用例,您可以在此处阅读

现在关于用例...为什么需要这个?

  1. 如果多个用户有权访问该计算机,则禁用建议不会阻止他们以其他用户身份登录网站。他们可以在设置中查看密码并使用它们。为了防止这种情况,用户必须在计算机上拥有不同的帐户。
  2. 如果您不希望他们使用旧密码代替new-password,那么,是的,这会使事情变得有点复杂(这实际上很糟糕 - 当事情很复杂时,用户往往会使用糟糕的密码),但不会阻止他们记住旧密码,或者再次从设置中获取密码为此,您需要检查代码中的密码是否确实是新的。
  3. 如果你想阻止建议,那么你可以使用 @Moayad.AlMoghrabi 的答案中的 hack(我还没有测试过它们,但我相信他做了)。但在不了解您的用例的情况下,我强烈建议您不要这样做。它破坏了用户体验并且不会提高安全性。反之则减少。