数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中阻止浏览器记住密码？
您是否曾经注意到，在任何网页上填写表单数据时，都会提示之前的输入值？现在，问题是浏览器在哪里找到该特定值？浏览器将数据存储在 Cookie 存储中，并从那里获取它。
它还将登录凭据存储在 Cookie 存储中，以便在用户再次访问登录页面时提示用户。在填写联系表单或任何其他表单时提示数据是一种很好的做法，但在填写登录或注册表单时则不是。
现在，考虑一下您在应用程序中启用了“记住密码”的情况，并且任何用户在与任何人一起时都在键入密码。此时，如果浏览器提示密码，其他人可能会看到整个密码，并且您的用户帐户可能会被黑客入侵。
因此，我们应该始终阻止浏览器记住密码，以保护用户的隐私并避免意外泄露密码。在本教程中，我们将学习如何使用各种方法阻止浏览器在 HTML 中记住密码。
使用“自动填充”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”作为 autocomplete 属性的值。当用户填写密码输入字段时，它会向用户显示新的强密码。
在输出中，用户可以尝试填写密码字段并观察到它提示新的强密码，而不是提示之前在密码字段中输入的旧输入值。
<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>
我们学习了两种不同的方法来阻止浏览器记住密码。在第一种方法中，我们使用带有“off”和“new-password”值的 autocomplete 属性。在第二种方法中，我们删除了 Cookie。通过阻止浏览器记住密码，提高用户隐私是最佳实践。
761 次浏览
