Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to prevent browser to remember password in HTML?
Have you ever observed that filling the form data on any web page suggests the previous input values? Now, the question is where the browser is finding that particular value? The browser stores the data in the cookie storage and fetches it from there.
It also stores the login credentials in the cookie storage to suggest to users when they visit the login page again. It is a good practice to suggest data while filling out the contact form or any other form but not while filling out the login or sign form.
Now, think about the scenario in which you enabled the remember password in your application, and any user is typing the password when sitting with any person. At this time, if the browser suggests the password, another person can see the whole password, and your user's account can be hacked.
So, we should always prevent browsers from remembering passwords to provide privacy to our users and avoid the unintentional disclosure of passwords. In this tutorial, we will learn to prevent browsers to remember password in HTML using various approaches.
Using the ‘Autocomplete’ HTML Attribute
We control the password suggestion using the ‘autocomplete’ HTML attribute. When ‘autocomplete’ is on, it stores the password in the cookies and suggests next time, and when ‘autocomplete’ is off, it doesn’t store any input data in the browser and never suggests it.
Also, we can use the ‘new-password’ value for the autocomplete attribute to suggest any new password.
Syntax
Users can follow the syntax below to use the autocomplete attribute to prevent browsers from remembering the password.
<input type="password" autocomplete="off">
In the above syntax, we used the ‘autocomplete’ attribute with the ‘off’ value to turn off password suggestions.
Example 1
In the example below, we created the username and password input field. Also, we created the button which executes the showData() function when users click the button. Furthermore, we used the autocomplete attribute with input fields to prevent browsers from remembering passwords.
In the showData() function, we access the value of input and display it on the web page. In the output, users can fill out the form and click on the submit button. After that, try again to fill out the form and check that browser won’t give a username or password suggestion.
<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>
Example 2
In the example below, we used the ‘new-password’ as a value of the autocomplete attribute. It shows the new strong password to users when users are filling the password input field.
In the output, users can try to fill the password field and observe that it suggests a new strong password rather than suggesting old input values which you entered previously in the password field.
<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>
Deleting the Cookies to Prevent the Browser From Remembering the Password
As we discussed in the introduction, the browsers store the previously filled input data in the cookie storage. So, once users submit the form, we can delete the password data from the cookies storage. So, the browser can’t get any data from cookie storage for suggestions.
Syntax
Users can follow the syntax below to delete the cookie from the web browser.
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
In the above syntax, we used the ‘document.cookie’ to access the cookies of the browser. After that, we assigned null values to the cookies with a passed expiry date. When the expiry date gets passed for any cookie, it automatically gets deleted.
Example 3
In the example below, we created the login form. When users click the button, it invokes the saveandDeletePass() function. In the function, we accessed the input values initially. After that, we stored the data in the cookies. Next, we deleted the data from the cookies.
Now, users can try to fill out the form again to check whether the browser suggests any previous data.
<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>
We learned two different approaches to prevent browsers from remembering the password. In the first approach, we used the autocomplete attribute with the ‘off’ and ‘new-password’ values. In the second approach, we delete the cookies. It is the best practice to increase the privacy of your users by preventing browsers from remembering the password.
375 Views
