logo标签列表

Chrome/Firefox自动填充新密码（autocomplete=new-password）无法正常工作

htmlautocompletechange-password
8
我正在尝试将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>



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

这并不完全是一个“如何使用autocomplete=new-password”的重复问题，因为行为似乎已经改变或者文档记录不够完善。

我没有Chrome 79和Firefox 71。我已在Ubuntu上测试了Chrome 85和FF 80。它按预期工作。你说的“不应该使用该信息自动填充密码 - 然而，它确实这样做”是什么意思？因为预期的行为是，如果用户希望，他们不应该在没有用户许可的情况下填写它，但是他们应该使用该信息。 - x00
如果你想知道为什么，那么是有原因的：由于用户不必记住浏览器为他们存储的密码，他们能够选择比以前更强的密码。因此，许多现代浏览器不支持在登录字段中使用autocomplete="off"。这回答了你的问题吗？ - x00
4个回答
7

由于您没有回复我的评论，我认为我的假设是正确的。因此，我将把评论作为答案发布：

我没有Chrome 79和Firefox 71。我在Ubuntu上测试了Chrome 85和FF 80。

它按预期工作。

我假设您所说的

不应使用该信息自动填充密码 - 然而，它确实这样做。

是指：

  • 当密码字段获得焦点时，浏览器显示下拉列表，其中包含以前存储的密码的填充选项。

在您看来，这似乎是

[浏览器]不应使用该信息自动填充密码。
[...]行为似乎已更改或未经记录。

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

从this（您链接的同一页面上的上一个段落）中可以看到原因：

即使没有主密码，在浏览器中管理密码通常被认为是安全的净增益。由于用户不必记住浏览器为他们存储的密码，因此他们可以选择比以前更强的密码。
因此，现代许多浏览器不支持在登录字段中使用autocomplete="off"。
如果一个站点将username和password字段设置为autocomplete="off"，那么浏览器仍然会提示是否记住这个登录信息，如果用户同意，浏览器将在用户下次访问该页面时自动填充这些字段。
当然，这与autocomplete="new-password"无关。
如果您正在定义一个用户管理页面，用户可以在该页面上指定另一个人的新密码，并且因此要防止密码字段的自动填充，则可以使用autocomplete="new-password"。
这是一个提示，浏览器不一定要遵守。然而，现代浏览器已经停止使用autocomplete="new-password"自动填充input元素，因为这个原因。
从中可以得到以下信息：
1. 自动填充不等同于建议。 2. 浏览器可以但不应该阻止自动填充。 3. autocomplete="new-password" 可以防止自动填充，但不能阻止建议。
因此，当设置autocomplete="new-password"时，浏览器停止填充这些字段，但仍然显示带有建议的下拉列表。
autocomplete="new-password"并没有阻止建议，而且总是可用的，这是有明确原因的。
是的，也许措辞有点混淆，但是完全按照行为进行。

关于此功能的历史和用例，您可以在这里阅读

现在来谈谈用例...为什么需要它？

  1. 如果多个用户可以访问计算机，则禁用建议不会阻止他们以不同的用户身份登录到站点。他们可以在设置中看到密码并使用它们。为了防止这种情况发生，用户必须在计算机上拥有不同的帐户。
  2. 如果您不希望他们在new-password的位置使用旧密码，那么是的，它会稍微复杂一些（实际上很糟糕-当事情变得复杂时，用户倾向于使用较差的密码），但不会阻止他们记住旧密码或从设置中获取它。为此，您需要在代码中检查密码是否真的是新密码。
  3. 如果您无论如何都想阻止建议，则可以使用@Moayad.AlMoghrabi的答案中的技巧（我没有测试过，但我相信他已经测试过了）。但是，如果不知道您的用例，我强烈建议不要这样做。它会破坏用户体验，并且不会增强安全性。相反，会减少安全性。
1
我能理解为什么这个回答被踩了，但这确实是正确的答案。感谢解释。 - Ishmaeel
这确实是正确的答案。使用浏览器的用户之前已经决定保存密码，因此浏览器会继续显示密码。如果浏览器没有这样做，可能会导致问题，因为一旦密码被保存，用户可以自愿忘记密码。确实正确的答案。 - Pape
7
这似乎是浏览器强制页面按照某种方式运作的问题/优势，即使将autocomplete="new-password"设置为关闭或者off，这个问题也不能得到解决。但是有一种方法可以解决浏览器意外引起的这个问题。

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

- 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>
1
我知道你在说什么，在你的情况下，你应该离开它。显然，安全是一个重要问题，上面的答案是完全正确的。但有一些变通方法，比如使用只读模式，虽然只读模式已经被提到过了，但我会尝试使用只读模式来实现你的目标，但是只读模式并不总是能够产生预期结果。有一种不太好的方法，我感觉有人会对我的回答进行严厉的批评，但我认为作为开发者，你需要所有的信息，你如何处理这些信息是你的决定。
伪元素
谷歌的Chrome和Safari，在自动填充方面最令人讨厌。解决这个问题的一种方法是为密码和登录输入创建HTML伪元素。使用CSS display属性将它们隐藏起来，设置为none。由于谷歌只会自动填充一个密码输入元素和一个用户名文本输入元素，这个变通方法可以欺骗谷歌自动填充那些未显示的元素。
这种方法存在的问题
这种方法的问题在于，你需要确保在后端验证数据，更重要的是，你需要确保使用正确的元素从数据库中提取数据。最糟糕的问题是，随着事物的更新，这种解决方法将会在某个时刻停止工作，并且元素将会在没有你知道的情况下显示，这会让不了解你网站的开发人员非常困惑，或者以我们无法预测的方式使浏览器混乱，因为变化还没有到来。这是你始终需要注意的事情。我曾经经常使用这种方法，但我停止了，因为比我更懂的人真的不喜欢我这样做。

  • 注： 每个浏览器都有不同的表现形式。一些浏览器，特别是移动版本和Safari实际上会改变您的元素的外观，这在我看来是不必要的。但与此同时，他们这样做是为了尝试提供Web标准以增强安全性，并使像我那样不精通技术的85岁祖母等人更容易使用。正如所指出的，浏览器的行为是不同的，人们可以选择不同的浏览器。自动填充是用户从浏览器获得的体验的一部分，并且是决定人们选择哪种浏览器的重要因素。如果您使用类似我解释的方法进行操作，则会改变该浏览器的体验，并给用户带来您想要的体验，但可能不是他们想要的。

  • 如果您决定使用或至少尝试此方法，请让我知道它的效果如何，这是一种相当简单的黑客/解决方法，我已经非常擅长欺骗浏览器，如果我的示例对您无效，我可以帮助您。请告诉我您使用的后端和正在尝试的浏览器，我将为您提供工作代码，但首先请考虑您真正想要的是什么。有时候，我们必须妥协，特别是如果这符合客户使用我们构建的网站/应用程序的最佳利益，或者为了改善不仅仅是客户而且还包括我们的服务器和自己的安全性。

body{
  width: 100vw;
  padding: 0;
  margin: 0;
  background-color: #ddb;
  overflow-x: hidden;
}

#login-psuedo{
  display: none;
}

#pwd-psuedo{
  display: none;
}
<html>
<head>
   <style></style>
</head>

<body>
  <form>     
    <input id="login-psuedo" type="text" name="login-psuedo"/>
    
    <input id="pwd-psuedo" type="password" name="pwd-psuedo" autocomplete="new-password"/>
    
    <br />

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

如果你不理解什么，只需要问。 - JΛYDΞV
0

我知道这是一个相当老的问题。 但在表单标签中添加autocomplete="off"可能会有所帮助（我知道并非所有情况都适用-因为某些字段可能需要自动填充-特别是在测试时）

现在适用于Firefox* (*98.0.2 (64位))
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接