Quinta-feira, 09 de julho de 2009 às 11h00

Gerando código de segurança com imagens

Faça o curso: jQuery na Prática

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:

<%
'Gera imagem de segurança
Function gerarNumeros()
'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,
'só lembrando de criar as imagens para estes.
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")
'Usando 5 caracteres do array, a palavra é formada randomicamente
Randomize
For i = 1 to 6
gerarNumeros = gerarNumeros & caracter(ubound(caracter) * Rnd)
Next
End Function

codigo_seguranca = gerarNumeros()

%>
<script language="JavaScript">
function Monta()
{
var texto_seguranca = "<%= codigo_seguranca %>"; //Chama a função ASP e atribui o resultado à variavel texto_segurança
var comeco = "<img src='"; //Abre a tag da imagem
var meio = ".gif'"; //propriedades da imagem, aqui tambem pode ser configurado o tamanho/altura
var fim = "> "; //Fecha a tag da imagem
for(x = 0; x < texto_seguranca.length; x ++)
{
p_texto = texto_seguranca.charAt(x); //Pega caracter por caracter para formar a imagem de cada um
document.getElementById("resultado").innerHTML += comeco + p_texto + meio + p_texto + fim; //Junta as tags da imagem
}
}
</script>
<head>
<script language="JavaScript" >
function enviardados(){
if(document.form.texto_imagem.value=="" || document.form.texto_imagem.value.length < 4)
{
alert( "Preencha campo com o código da imagem (6 caracteres)!" );
document.form.texto_imagem.focus();
return false;
}
return true;
}
</script>
</head>
<body onload="Monta()">
<form method="post" action="validaCodigo.asp" name="form" OnSubmit="return enviardados();">
<table border="0" cellspacing="0" cellpadding="0" width="420" height="36">
<tr>
<td align="center" background="imagem_fundo.gif" width="112" height="36"><span id="resultado"></span></td>
<td width="70" align="center">Digite:</td>
<td width="163"><input type="text" name="texto_imagem" size="20"></td>
<td width="75"><input type="submit" value="Validar"><input type="hidden" value="<%= codigo_seguranca %>" name="hd_texto"></td>
</tr>
</table>
</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:

<%
'Valida imagem de segurança
hd_texto = request("hd_texto")
'Como usamos no array somente letras maiusculas, então passamos tudo o que foi digitado para maiuscula.
texto_imagem = ucase(request("texto_imagem"))
if hd_texto <> texto_imagem then
%>
<script>
alert("Código de segurança inválido, tente novamente!")
document.location.href = "geraCodigo.asp";
</script>
<%
else
response.write "Código validado com sucesso."
%>
<br>
<br>
<a href="geraCodigo.asp">Efetuar nova validação.</a>
<%
end if
%>

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!

Nenhum comentário até agora

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


Sobre o Autor
José Carlos Macoratti é 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.

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.