Compruebe la seguridad de la contraseña con JavaScript o jQuery y expresiones regulares (¡también con ejemplos del lado del servidor!)
Estaba investigando un poco para encontrar un buen ejemplo de un verificador de seguridad de contraseña que use JavaScript y Expresiones regulares (Regex). En la aplicación de mi trabajo, hacemos una publicación para verificar la seguridad de la contraseña y es bastante inconveniente para nuestros usuarios.
¿Qué es Regex?
Una expresión regular es una secuencia de caracteres que define un patrón de búsqueda. Normalmente, estos patrones son utilizados por algoritmos de búsqueda de cadenas para encontrar or encontrar y reemplazar operaciones en cadenas, o para la validación de entrada.
Este artículo definitivamente no es para enseñarle expresiones regulares. Solo sepa que la capacidad de usar expresiones regulares simplificará absolutamente su desarrollo mientras busca patrones en el texto. También es importante tener en cuenta que la mayoría de los lenguajes de desarrollo han optimizado el uso de expresiones regulares ... así que en lugar de analizar y buscar cadenas paso a paso, Regex suele ser mucho más rápido tanto en el servidor como en el cliente.
Busqué bastante en la web antes de encontrar un ejemplo de algunas grandes expresiones regulares que buscan una combinación de longitud, caracteres y símbolos. Sin embargo, el código era un poco excesivo para mi gusto y estaba hecho a medida para .NET. Así que simplifiqué el código y lo puse en JavaScript. Esto hace que valide la seguridad de la contraseña en tiempo real en el navegador del cliente antes de volver a publicarla... y proporciona algunos comentarios al usuario sobre la seguridad de la contraseña.
Teclea una contraseña
Con cada golpe del teclado, la contraseña se compara con la expresión regular y luego se proporciona información al usuario en un intervalo debajo de ella.
Función de seguridad de la contraseña de JavaScript
La Expresiones regulares Haga un trabajo fantástico al minimizar la longitud del código. Esta función de JavaScript comprueba la seguridad de una contraseña y si frustrarla es fácil, media, difícil o extremadamente difícil de adivinar. A medida que la persona escribe, muestra consejos para animarla a ser más fuerte. Valida la contraseña en base a:
- Longitud Mínima – Si la longitud es inferior o superior a 8 caracteres.
- Caso mixto – Si la contraseña tiene mayúsculas y minúsculas.
- Números – Si la contraseña incluye números.
- Caracteres especiales – Si la contraseña incluye caracteres especiales.
La función muestra la dificultad, así como algunos consejos para fortalecer aún más la contraseña.
function checkPasswordStrength(password) {
// Initialize variables
var strength = 0;
var tips = "";
// Check password length
if (password.length < 8) {
tips += "Make the password longer. ";
} else {
strength += 1;
}
// Check for mixed case
if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
strength += 1;
} else {
tips += "Use both lowercase and uppercase letters. ";
}
// Check for numbers
if (password.match(/\d/)) {
strength += 1;
} else {
tips += "Include at least one number. ";
}
// Check for special characters
if (password.match(/[^a-zA-Z\d]/)) {
strength += 1;
} else {
tips += "Include at least one special character. ";
}
// Return results
if (strength < 2) {
return "Easy to guess. " + tips;
} else if (strength === 2) {
return "Medium difficulty. " + tips;
} else if (strength === 3) {
return "Difficult. " + tips;
} else {
return "Extremely difficult. " + tips;
}
}
Si desea actualizar el color de la punta, también puede hacerlo actualizando el código después de la // Return results
la línea.
// Get the paragraph element
var strengthElement = document.getElementById("passwordStrength");
// Return results
if (strength < 2) {
strengthElement.textContent = "Easy to guess. " + tips;
strengthElement.style.color = "red";
} else if (strength === 2) {
strengthElement.textContent = "Medium difficulty. " + tips;
strengthElement.style.color = "orange";
} else if (strength === 3) {
strengthElement.textContent = "Difficult. " + tips;
strengthElement.style.color = "black";
} else {
strengthElement.textContent = "Extremely difficult. " + tips;
strengthElement.style.color = "green";
}
Función de seguridad de la contraseña de jQuery
Con jQuery, en realidad no tenemos que escribir el formulario con una actualización de entrada:
<form>
<label for="password">Enter password:</label>
<input type="password" id="password">
<p id="password-strength"></p>
</form>
También podemos modificar el color de los mensajes si lo deseamos.
$(document).ready(function() {
$('#password').on('input', function() {
var password = $(this).val();
var strength = 0;
var tips = "";
// Check password length
if (password.length < 8) {
tips += "Make the password longer. ";
} else {
strength += 1;
}
// Check for mixed case
if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
strength += 1;
} else {
tips += "Use both lowercase and uppercase letters. ";
}
// Check for numbers
if (password.match(/\d/)) {
strength += 1;
} else {
tips += "Include at least one number. ";
}
// Check for special characters
if (password.match(/[^a-zA-Z\d]/)) {
strength += 1;
} else {
tips += "Include at least one special character. ";
}
// Update the text and color based on the password strength
var passwordStrengthElement = $('#password-strength');
if (strength < 2) {
passwordStrengthElement.text("Easy to guess. " + tips);
passwordStrengthElement.css('color', 'red');
} else if (strength === 2) {
passwordStrengthElement.text("Medium difficulty. " + tips);
passwordStrengthElement.css('color', 'orange');
} else if (strength === 3) {
passwordStrengthElement.text("Difficult. " + tips);
passwordStrengthElement.css('color', 'black');
} else {
passwordStrengthElement.text("Extremely difficult. " + tips);
passwordStrengthElement.css('color', 'green');
}
});
});
Endurecimiento de su solicitud de contraseña
Es esencial que no se limite a validar la construcción de la contraseña en su JavaScript. Esto permitiría a cualquier persona con herramientas de desarrollo de navegador omitir el script y usar la contraseña que desee. SIEMPRE debe utilizar una verificación del lado del servidor para validar la seguridad de la contraseña antes de almacenarla en su plataforma.
Función PHP para la seguridad de la contraseña
function checkPasswordStrength($password) {
// Initialize variables
$strength = 0;
// Check password length
if (strlen($password) < 8) {
return "Easy to guess";
} else {
$strength += 1;
}
// Check for mixed case
if (preg_match("/[a-z]/", $password) && preg_match("/[A-Z]/", $password)) {
$strength += 1;
}
// Check for numbers
if (preg_match("/\d/", $password)) {
$strength += 1;
}
// Check for special characters
if (preg_match("/[^a-zA-Z\d]/", $password)) {
$strength += 1;
}
// Return strength level
if ($strength < 2) {
return "Easy to guess";
} else if ($strength === 2) {
return "Medium difficulty";
} else if ($strength === 3) {
return "Difficult";
} else {
return "Extremely difficult";
}
}
Función de Python para la seguridad de la contraseña
def check_password_strength(password):
# Initialize variables
strength = 0
# Check password length
if len(password) < 8:
return "Easy to guess"
else:
strength += 1
# Check for mixed case
if any(char.islower() for char in password) and any(char.isupper() for char in password):
strength += 1
# Check for numbers
if any(char.isdigit() for char in password):
strength += 1
# Check for special characters
if any(not char.isalnum() for char in password):
strength += 1
# Return strength level
if strength < 2:
return "Easy to guess"
elif strength == 2:
return "Medium difficulty"
elif strength == 3:
return "Difficult"
else:
return "Extremely difficult"
Función C# para la seguridad de la contraseña
public string CheckPasswordStrength(string password) {
// Initialize variables
int strength = 0;
// Check password length
if (password.Length < 8) {
return "Easy to guess";
} else {
strength += 1;
}
// Check for mixed case
if (password.Any(char.IsLower) && password.Any(char.IsUpper)) {
strength += 1;
}
// Check for numbers
if (password.Any(char.IsDigit)) {
strength += 1;
}
// Check for special characters
if (password.Any(ch => !char.IsLetterOrDigit(ch))) {
strength += 1;
}
// Return strength level
if (strength < 2) {
return "Easy to guess";
} else if (strength == 2) {
return "Medium difficulty";
} else if (strength == 3) {
return "Difficult";
} else {
return "Extremely difficult";
}
}
Función Java para la seguridad de la contraseña
public String checkPasswordStrength(String password) {
// Initialize variables
int strength = 0;
// Check password length
if (password.length() < 8) {
return "Easy to guess";
} else {
strength += 1;
}
// Check for mixed case
if (password.matches(".*[a-z].*") && password.matches(".*[A-Z].*")) {
strength += 1;
}
// Check for numbers
if (password.matches(".*\\d.*")) {
strength += 1;
}
// Check for special characters
if (password.matches(".*[^a-zA-Z\\d].*")) {
strength += 1;
}
// Return strength level
if (strength < 2) {
return "Easy to guess";
} else if (strength == 2) {
return "Medium difficulty";
} else if (strength == 3) {
return "Difficult";
} else {
return "Extremely difficult";
}
}
Y si solo está buscando un excelente generador de contraseñas, he creado una pequeña herramienta en línea para eso.