資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
