Browsers remember information which is submitted through <input fields on websites for the first time when we use that particular website in that browser. So another time when we again submit data on that website through that browser then there is a suggestion list of submitted values in that field. Many times this may create security issues for many cases.
Method 1: One of the known methods is to use autocomplete attribute to prevent browser to remember the password. In the input field, if we define autocomplete=”off” then many times the input value is not remembered by the browser.
Syntax:
<input type = "password" autocomplete="off">
Example: In many cases, if we don’t use the autocomplete=”off” property then the browsers give us suggestions of the input fields, like below
This is for password field, but also we get the suggestions for other fields except password., like below,
To prevent this kind of things use autocomplete=”off” property. see below code,
Example 1:
html
<!DOCTYPE html><html><body> <div style="background-color: #7fff00; width: 30%;"> <h2 style="color: #006400;"> Preventing Password remember </h2> <!-- autocomplete = "off" it causes for allover the form where input fields are used --> <form name="Frm" autocomplete="off"> User Name :<input id="username" type="text" name="userName" /> <br /><br /> Password: <input id="password" type="password" name="passWord" /> <br /><br /> <input id="uname" type="submit" /> </form> </div></body></html> |
Output:
Now, there is no suggestions for fields are given.
In many modern browsers this attribute does not make any effect. So, in this case, if we use one more thing under the input field then this problem can be fixed.
<input type=”password” autocomplete=”off” readonly onclick=”this.removeAttribute(‘readonly’);” >
Here, readonly property sets or returns a boolean value if the field is read-only, or not, read-only field cannot be modified.
Example 2:
html
<!DOCTYPE html><html><body> <div style="background-color: #7fff00; width: 30%;"> <h2 style="color: #006400;"> Preventing Password remember </h2> <form name="Frm"> User Name :<input id="username" type="text" name="userName" autocomplete="off" readonly onclick="this.removeAttribute( 'readOnly');" /> <br /><br /> Password: <input id="password" type="password" name="passWord" autocomplete="off" readonly onclick="this.removeAttribute( 'readOnly');" /> <br /><br /> <!--"removeAttribute()" method removes the specified attribute from an element--> <input id="uname" type="submit" /> </form> </div></body></html> |
Output:
Method 2: Now another method by which we can use to remove the password, also other values from the form. The values are stored in the browser in the form of a cookie, so if the cookies are deleted then the password, as well as other values, also deleted. So only we have to add a function to delete the cookies.
Example:
html
<html><head> <script type="text/javascript"> function savePass() { passVal = "password = " + escape(document.Frm.passWord.value) + ";"; document.cookie = passVal + "expires = Sun, 01-May-2021 14:00:00 GMT"; document.getElementById("show").innerHTML = "Password saved, " + document.cookie; } function dltPass() { document.cookie = passVal + "expires = Sun, 01-May-2019 14:00:00 GMT"; // Set the expiration date to // removes the saved password document.getElementById("show").innerHTML = "Password deleted!!!"; // Removes the password from the browser document.getElementById("pass").value = ""; // Removes the password from the input box } </script></head><body> <div style="background-color: #7fff00; width: 30%;"> <h2 style="color: #006400;"> Preventing Password remember </h2> <form name="Frm"> User Name :<input id="username" type="text" name="userName" /> <br /><br /> Password: <input id="pass" type="password" name="passWord" /> <br /><br /> <input id="uname" type="button" value="submit" onclick="savePass();" /> <input id="remove" type="button" value="Remove given Password" onclick="dltPass();" /> <p id="show"></p> </form> </div></body></html> |
Output:
Method 3: Another method of preventing browsers to remember password is, using autocomplete=”new-password”, by this the browser will give random password suggestions while filling the password field in any form. So the actual password will not be saved in the browser. The browser hides the actual password and showing rand suggestions all the time.
<input type = "password" autocomplete="new-password">
Example:
html
<html><body> <div style="background-color: #7fff00; width: 30%;"> <h2 style="color: #006400;"> Preventing Password remember </h2> <form name="Frm"> User Name :<input id="username" type="text" name="userName" /> <br /><br /> Password: <input id="password" type="password" name="passWord" autocomplete="new-password" /> <br /><br /> <!--used autocomplete="new-password" --> <input id="uname" type="submit" /> </form> </div></body></html> |
Output:
