Los navegadores recuerdan la información que se envía a través de < campos de entrada en los sitios web por primera vez cuando usamos ese sitio web en particular en ese navegador. Entonces, en otro momento, cuando volvamos a enviar datos en ese sitio web a través de ese navegador, hay una lista de sugerencias de valores enviados en ese campo. Muchas veces esto puede crear problemas de seguridad en muchos casos.
Método 1: uno de los métodos conocidos es utilizar el atributo de autocompletar para evitar que el navegador recuerde la contraseña. En el campo de entrada , si definimos autocompletar = «desactivado» , muchas veces el navegador no recuerda el valor de entrada.
Sintaxis:
<input type = "password" autocomplete="off">
Ejemplo: en muchos casos, si no usamos la propiedad autocompletar = «apagado» , los navegadores nos dan sugerencias de los campos de entrada, como a continuación
Esto es para el campo de contraseña, pero también recibimos sugerencias para otros campos, excepto contraseña., como a continuación,
Para evitar este tipo de cosas, use la propiedad autocomplete=”off” . vea el siguiente código,
Ejemplo 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>
Producción:
Ahora, no hay sugerencias para los campos que se dan.
En muchos navegadores modernos, este atributo no tiene ningún efecto. Entonces, en este caso, si usamos una cosa más debajo del campo de entrada, entonces este problema se puede solucionar.
<input type=”password” autocompletar=”off” readonly onclick=”this.removeAttribute(‘readonly’);” >
Aquí, la propiedad de solo lectura establece o devuelve un valor booleano si el campo es de solo lectura o no, el campo de solo lectura no se puede modificar.
Ejemplo 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>
Producción:
Método 2: Ahora otro método por el cual podemos usar para quitar la contraseña, también otros valores del formulario. Los valores se almacenan en el navegador en forma de cookie, por lo que si se eliminan las cookies, también se eliminarán la contraseña y otros valores. Tan solo tenemos que añadir una función para borrar las cookies.
Ejemplo:
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>
Producción:
Método 3: Otro método para evitar que los navegadores recuerden la contraseña es usar autocomplete=”nueva-contraseña” , de esta manera el navegador dará sugerencias de contraseña aleatorias mientras completa el campo de contraseña en cualquier formulario. Por lo tanto, la contraseña real no se guardará en el navegador. El navegador oculta la contraseña real y muestra sugerencias todo el tiempo.
<input type = "password" autocomplete="new-password">
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por SoumikMondal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA