Gerando código de segurança com imagens
A geração de código de segurança usando imagens é
uma tentativa de evitar o ataque dos execráveis ‘robôs’ que procuram injetar
código malicioso por toda a parte.
Eu já tratei o assunto no artigo
ASP .NET – Usando
validação por imagem – CAPTCHA onde falei
sobre a tecnologia CAPTCHA.
CAPTCHA é um acrônimo de
Completely Automated Public Turing test to tell
Computers and Humans Apart, envolve um computador (um
servidor) que pede que um usuário termine um teste. Como os computadores são
incapazes de resolver o CAPTCHA, todo usuário que incorpora uma solução correta
é, presumidamente, humano. O termo foi inventado em 2000 por Luis von Ahn,
Manuel Blum , Nicholas J. Hopper e por John Langford.
A tecnologia ASP já teve seus momentos de glória,
mas mesmo assim ainda é muito usada, e, por este motivo, estou publicando este
artigo, uma colaboração recebida, onde é mostrada como você pode implementar uma
forma de gerar código de segurança usando imagens similar ao CAPTCHA.
O projeto é composto por 2 arquivos e diversos
arquivos de imagens:
- geraCodigo.asp – Apresenta a página para
inclusão do código de segurança e gera o código de segurança; (Contém também
código JavaScript para validar a nível do cliente o código informado) - validaCodigo.asp – Efetua a validação do
código informado na página geraCodigo.asp; - diversos arquivos no formato .gif representando
imagens dos números e do alfabeto;
O código do arquivo geraCodigo.asp é dado a
seguir:
<%<br />'Gera imagem de segurança<br />Function gerarNumeros()<br />'Monta array com os caracteres que serão usados para gerar o código de segurança. Podem ser adicionados as letras em minusculas e/ou outros caracteres,<br />'só lembrando de criar as imagens para estes.<br />caracter = Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z")<br />'Usando 5 caracteres do array, a palavra é formada randomicamente<br />Randomize<br />For i = 1 to 6<br />gerarNumeros = gerarNumeros & caracter(ubound(caracter) * Rnd)<br />Next<br />End Function<br /><br />codigo_seguranca = gerarNumeros()<br /><br />%><br /><script language="JavaScript"><br />function Monta()<br />{<br />var texto_seguranca = "<%= codigo_seguranca %>"; //Chama a função ASP e atribui o resultado à variavel texto_segurança<br />var comeco = "<img src='"; //Abre a tag da imagem<br />var meio = ".gif'"; //propriedades da imagem, aqui tambem pode ser configurado o tamanho/altura<br />var fim = "> "; //Fecha a tag da imagem<br />for(x = 0; x < texto_seguranca.length; x ++)<br />{<br />p_texto = texto_seguranca.charAt(x); //Pega caracter por caracter para formar a imagem de cada um<br />document.getElementById("resultado").innerHTML += comeco + p_texto + meio + p_texto + fim; //Junta as tags da imagem<br />}<br />}<br /></script><br /><head><br /><script language="JavaScript" ><br />function enviardados(){<br />if(document.form.texto_imagem.value=="" || document.form.texto_imagem.value.length < 4)<br />{<br />alert( "Preencha campo com o código da imagem (6 caracteres)!" );<br />document.form.texto_imagem.focus();<br />return false;<br />}<br />return true;<br />}<br /></script><br /></head><br /><body onload="Monta()"><br /><form method="post" action="validaCodigo.asp" name="form" OnSubmit="return enviardados();"><br /><table border="0" cellspacing="0" cellpadding="0" width="420" height="36"><br /><tr><br /><td align="center" background="imagem_fundo.gif" width="112" height="36"><span id="resultado"></span></td><br /><td width="70" align="center">Digite:</td><br /><td width="163"><input type="text" name="texto_imagem" size="20"></td><br /><td width="75"><input type="submit" value="Validar"><input type="hidden" value="<%= codigo_seguranca %>" name="hd_texto"></td><br /></tr><br /></table><br /></form>A validação é feita pelo código ASP do arquivo
validaCodigo.asp após a submissão do formulário. O código deste arquivo é
dado abaixo:
<%<br />'Valida imagem de segurança<br />hd_texto = request("hd_texto")<br />'Como usamos no array somente letras maiusculas, então passamos tudo o que foi digitado para maiuscula.<br />texto_imagem = ucase(request("texto_imagem"))<br />if hd_texto <> texto_imagem then<br />%><br /><script><br />alert("Código de segurança inválido, tente novamente!")<br />document.location.href = "geraCodigo.asp";<br /></script><br /><%<br />else<br />response.write "Código validado com sucesso."<br />%><br /><br><br /><br><br /><a href="geraCodigo.asp">Efetuar nova validação.</a><br /><%<br />end if<br />%>Um exemplo bem simples mas funcional. Teste o
exemplo on-line :
http://www.macoratti.net/codseg/geraCodigo.asp
Pegue o projeto completo aqui:
codigoSegurancaASP.zip
Até o próximo artigo!
é referência em Visual Basic no Brasil e autor dos livros "Aprenda Rápido: ASP" e "ASP, ADO e Banco de Dados na Internet". Mantenedor do site macoratti.net.
