Neste artigo, eu vou mostrar como podemos realizar a validação da força de uma senha usando jQuery em uma aplicação ASP .NET MVC.
Muitas vezes somos solicitados a criar uma conta cadastrando um login e uma senha para ter acesso a um web site ou a dados sensíveis de um sistema. Como algumas senhas são fáceis de quebrar usando técnicas de força bruta, é comum dar o feedback aos usuários para mostrar a força da senha escolhida, sinalizando ao usuário se a sua senha é ou não tão segura.
Veja como podemos verificar a força de uma senha fornecida por um usuário fornecendo informações que indicam se a senha é fraca ou forte. Algumas senhas são muito fracas e nunca devem ser utilizadas, geralmente elas incluem data de nascimento, números de telefone, números ou letras repetidos e nomes pessoais.
Outras podem ser descritas como fracas ou fortes de acordo com o comprimento da senha e do tipo de caracteres que ela contém. Por exemplo, se sua aplicação permite senhas de quatro caracteres de comprimento com a utilização das 26 letras do alfabeto, o número máximo de senhas possíveis é de aproximadamente 450.000. Este é um número pequeno para um computador moderno e um ataque de força bruta poderá quebrar a senha com certa facilidade.
Podemos aumentar o número de senhas possíveis, permitindo que caracteres adicionais sejam incluídos na senha. Se continuarmos com uma senha de quatro caracteres, mas permitindo uma combinação de letras maiúsculas e minúsculas, as combinações possíveis aumentam de 450.000 para cerca de 7,5 milhões. Adicionando dígitos numéricos, símbolos e espaços para aumentar o conjunto de caracteres a cem, podemos chegar a 100 milhões de senhas possíveis com apenas quatro caracteres, o que é um número considerável.
Outra forma de aumentar o número de combinações possíveis é aumentar o comprimento da senha. Com os cem caracteres fornecidos por letras, dígitos e símbolos, estendendo a senha para dez caracteres de tamanho, temos 100.000.000.000.000.000.000 combinações possíveis. Um número tão alto faz com que um ataque de força bruta não seja tão temido.
Recursos usados:
Criando o projeto no Visual Studio 2013 Express for web
Abra o VS Express 2013 for web e clique em New Project. A seguir, selecione a linguagem Visual C# e o template ASP .NET Web Application.
Informe o nome Mvc_Validar_ForcaSenha e clique no botão OK:
A seguir, selecione o template Empty, marque o folder MVC e clique no botão OK:
Será criado um projeto MVC com a seguinte estrutura exibida na janela Solution Explorer:
Definindo o Controller
Vamos agora definir o nosso controlador chamado HomeController.
Clique com o botão direito na pasta Controllers e a seguir em Add -> Controller. Selecione a opção MVC 5 Controller – Empty e clique no botão Add:
Informe o nome HomeController e clique no botão Add:
Na Action Index do controller criado vamos definir o código que retorna uma View().
Também vamos definir uma nova Action Index(string Senha) para tratar o POST retornando uma view e a mensagem sobre a senha informada:
using System.Web.Mvc; namespace Mvc_Validar_ForcaSenha.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } [HttpPost] public ActionResult Index(string Senha) { ViewBag.Message = "A senha informada foi :" + Senha; return View(); } } }
Preparando o ambiente
Antes de continuar, vamos referenciar no projeto o plugin para verificar a força da senha. Existem muitas opções que você pode usar e eu escolhi o plugin que pode ser baixado neste link.
Após baixar o arquivo passwordStrengthMeter.js, copie-o na pasta Scripts do projeto. Veja abaixo o código deste arquivo:
var shortPass = 'Muito Curta' var badPass = 'Ruim' var goodPass = 'Boa' var strongPass = 'Forte' function passwordStrength(password,username) { placar = 0 //password < 4 if (password.length < 4 ) { return shortPass } //password == username if (password.toLowerCase()==username.toLowerCase()) return badPass //tamanho da senha placar += password.length * 4 placar += ( verificarRepeticao(1,password).length - password.length ) * 1 placar += ( verificarRepeticao(2,password).length - password.length ) * 1 placar += ( verificarRepeticao(3,password).length - password.length ) * 1 placar += ( verificarRepeticao(4,password).length - password.length ) * 1 //senha tem 3 numeros if (password.match(/(.*[0-9].*[0-9].*[0-9])/)) placar += 5 //senha tem dois simbolos if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)) placar += 5 //senha tem caracteres maiusculos e minusculos if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) placar += 10 //senha tem numeros e caracteres if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) placar += 15 // //senha tem numeros e símbolos if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/)) placar += 15 //senha tem caractere e símbolo if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/)) placar += 15 //senha tem apenas numeros ou caracteres if (password.match(/^\w+$/) || password.match(/^\d+$/) ) placar -= 10 // vreificando o placar entre : 0 < placar < 100 if ( placar < 0 ) placar = 0 if ( placar > 100 ) placar = 100 if (placar < 34 ) return badPass if (placar < 68 ) return goodPass return strongPass } // verificarRepeticao(1,'aaaaaaabcbc') = 'abcbc' // verificarRepeticao(2,'aaaaaaabcbc') = 'aabc' // verificarRepeticao(2,'aaaaaaabcdbcd') = 'aabcd' function verificarRepeticao(pLen,str) { res = "" for ( i=0; i<str.length ; i++ ) { repeated=true for (j=0;j < pLen && (j+i+pLen) < str.length;j++) repeated=repeated && (str.charAt(j+i)==str.charAt(j+i+pLen)) if (j<pLen) repeated=false if (repeated) { i+=pLen-1 repeated=false } else { res+=str.charAt(i) } } return res }
Eu alterei somente o texto inicial do arquivo para exibir a mensagem em português no arquivo Javascript original e os comentários.
Criando a View
Agora vamos criar uma view onde vamos exibir uma caixa de texto para que o usuário informe a senha e um controle Button para que o usuário realize o Post da informação.
Clique com o botão direito do mouse sobre no interior da View Index e a seguir em Add View;
A seguir, defina as opções para criar a view conforme a figura abaixo:
A seguir, inclua o código abaixo para esta view que será criada na pasta Views/Home, com o nome Index.cshtml:
@{ ViewBag.Title = "Validação da Força da Senha com jQuery"; } <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/passwordStrengthMeter.js"></script> <script language="javascript"> var result = ""; jQuery(document).ready(function () { $('#txtpassword').keyup(function () { $('#result').html(passwordStrength($('#txtpassword').val(), "")) result = $('#result').html(); if (result == "Muito Curta") { $('#result').attr({ 'style': 'color:Red;' }); } if (result == "Ruim") { $('#result').attr({ 'style': 'color:Olive;' }); } if (result == "Boa") { $('#result').attr({ 'style': 'color:Lime;' }); } if (result == "Forte") { $('#result').attr({ 'style': 'color:Green;' }); } }) }) function ValidateForm() { if (result == "Boa" || result == "Forte") { return true; } else { alert("A senha é FRACA."); return false; } } </script> @using (Html.BeginForm("Index", "Home")) { <h2>Macoratti .net</h2> <hr /> <div> Password: @Html.Password("Senha", "", new { @Id = "txtpassword" }) <span id='result'></span> </div> <br /> <div style="text-align:center"> <input type="submit" value="Submit" onclick="javascript:return ValidateForm();" /> </div> <div style="color:Red;font-weight:bold;">@ViewBag.Message</div> }
Você pode alterar as cores de exibição do texto e incrementar o script com outros recursos.
Executando o projeto iremos obter a exibição da página abaixo. Ao digitar a senha veremos uma mensagem exibindo a sua validação:
1. Senha muito curta
2. Senha ruim
3. Senha boa
4. Senha forte
Quando o usuário clicar no botão Submit para enviar o post da senha teremos:
Pegue o projeto completo aqui: Mvc_Validar_ForcaSenha.zip