如何在 HTML 中阻止浏览器记住密码?

htmlweb developmentfront end technology更新于 2024/10/17 4:28:17

您是否注意到，在任何网页上填写表单数据时，都会提示先前输入的值?现在的问题是，浏览器在哪里找到这些特定的值?浏览器将数据存储在 Cookie 中，并从那里获取。

它还将登录凭据存储在 Cookie 中，以便在用户再次访问登录页面时向用户提供建议。在填写联系表单或任何其他表单时建议数据，但在填写登录或签名表单时则不建议，这是一种很好的做法。

现在，想象一下您在应用程序中启用了记住密码的场景，任何用户在与他人坐在一起时都会输入密码。此时，如果浏览器提示密码，其他人就可以看到完整的密码，您的用户帐户就可能被黑客入侵。

因此，我们应该始终阻止浏览器记住密码，以保护用户的隐私，避免密码意外泄露。在本教程中，我们将学习如何使用各种方法阻止浏览器在 HTML 中记住密码。

使用"Autocomplete"HTML 属性

我们使用"autocomplete"HTML 属性控制密码建议。当"autocomplete"启用时，它会将密码存储在 Cookie 中并在下次输入时提供建议;当"autocomplete"关闭时，它不会在浏览器中存储任何输入数据，也不会提供建议。

此外，我们可以使用"new-password"值作为 autocomplete 属性的值，以建议任何新密码。

语法

用户可以按照以下语法使用 autocomplete 属性来阻止浏览器记住密码。

<input type="password" autocomplete="off">

在上面的语法中，我们使用了值为"off"的"autocomplete"属性来关闭密码建议。

示例 1

在下面的示例中，我们创建了用户名和密码输入字段。此外，我们还创建了一个按钮，当用户点击该按钮时，它会执行 showData() 函数。此外，我们还在输入字段中使用了 autocomplete 属性，以防止浏览器记住密码。

在 showData() 函数中，我们访问输入的值并将其显示在网页上。在输出中，用户可以填写表单并点击提交按钮。之后，再次尝试填写表单，并检查浏览器是否不会提供用户名或密码建议。

<html>
<body>
   <h3> Using the <i> autocomplete attribute </i> to prevent browser to store password </h3>
   <!-- creating the login form -->
   <form method = "post">
      <label for = "username"> Username: </label>
      <input type = "text" id = "username" name = "username" autocomplete = "off"> <br> <br>
      <label for = "pwd"> Password: </label>
      <input type = "password" id = "pwd" name = "pwd" autocomplete = "off"> <br> <br>
      <input type = "button" value = "Submit" onclick = "showData()">
   </form>
   <div id = "output"> </div>
   <script>
      function showData() {
         let output = document.getElementById("output");
         var username = document.getElementById("username").value;
         var password = document.getElementById("pwd").value;
         output.innerHTML = "Username: " + username + "<br>" + "Password: " + password;
         output.innerHTML += "<br><br> <b> Note: </b> The browser will not store the password. Try to fill out the form again!";
      }
   </script>
</html>

示例 2

在下面的示例中，我们使用"new-password"作为自动完成属性的值。当用户填写密码输入字段时，它会向用户显示新的强密码。

在输出中，用户可以尝试填写密码字段，并观察到它建议一个新的强密码，而不是建议你之前在密码字段中输入的旧值。

<html>
<body>
   <h3> Using the <i> autocomplete = "new-password" attribute and value </i> to prevent browser to store password </h3>
   <form method = "post">
      <label for = "username"> Username: </label>
      <input type = "text" id = "username" name = "username" autocomplete = "new-password"> <br> <br>
      <label for = "pwd"> Password: </label>
      <input type = "password" id = "pwd" name = "pwd" autocomplete = "new-password"> <br> <br>
      <input type = "button" value = "Submit" onclick = "showData()">
   </form>
   <div id = "output"> </div>
   <script>
      function showData() {
         let output = document.getElementById("output");
         var username = document.getElementById("username").value;
         var password = document.getElementById("pwd").value;
         output.innerHTML = "Username: " + username + "<br>" + "Password: " + password;
         output.innerHTML += "<br><br> <b> Note: </b> The browser will not store the password. Try to fill out the form again!";
      }
   </script>
</html>

删除 Cookie 以防止浏览器记住密码

正如我们在简介中讨论的那样，浏览器会将之前填写的输入数据存储在 Cookie 存储中。因此，一旦用户提交表单，我们就可以从 Cookie 存储中删除密码数据。这样，浏览器就无法从 Cookie 存储中获取任何数据来提供建议。

语法

用户可以按照以下语法从 Web 浏览器中删除 Cookie。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

在上述语法中，我们使用"document.cookie"来访问浏览器的 Cookie。之后，我们将已过期的 Cookie 赋值为空值。任何 Cookie 的过期日期过后都会自动删除。

示例 3

在下面的示例中，我们创建了登录表单。当用户点击按钮时，它会调用 saveandDeletePass() 函数。在该函数中，我们首先访问了输入值。之后，我们将数据存储在 Cookie 中。接下来，我们从 Cookie 中删除了这些数据。

现在，用户可以尝试再次填写表单，检查浏览器是否建议填写任何先前的数据。

<html>
<body>
   <h3> Deleting the <i> cookies values </i> to prevent browser to store password </h3>
   <form method = "post">
      <label for = "username"> Username: </label>
      <input type = "text" id="username" name = "username" placeholder = "Enter your username" required> <br> <br>
      <label for = "pwd"> Password: </label>
      <input type = "password" id = "pwd" name = "pwd" placeholder = "Enter your password" required> <br> <br>
      <input type = "button" value = "Submit" onclick = "SaveandDeletePass()">
   </form>
   <div id = "output"> </div>
   <script>
      function SaveandDeletePass() {
         var username = document.getElementById("username").value;
         var password = document.getElementById("pwd").value;
         var output = document.getElementById("output");
         // saving the username and password in cookies
         document.cookie = "username=" + username;
         document.cookie = "password=" + password;
         output.innerHTML += "Username and Password saved successfully <br>";
         
         // deleting the cookies
         document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
         document.cookie = "password=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
         
         // displaying the output
         output.innerHTML += "Username and Password deleted successfully";
      }
   </script>
</html>

我们学习了两种不同的方法来防止浏览器记住密码。第一种方法，我们使用了 autocomplete 属性，并分别将值设置为"off"和"new-password"。第二种方法，我们删除了 Cookie。防止浏览器记住密码是保护用户隐私的最佳做法。