<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog do Beraldo &#187; acessibilidade</title>
	<atom:link href="http://www.rberaldo.com.br/blog/tag/acessibilidade/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rberaldo.com.br/blog</link>
	<description>Programação, Música, Entretenimento e o que mais me vier à mente</description>
	<lastBuildDate>Mon, 06 Feb 2012 14:30:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Técnicas de CAPTCHA</title>
		<link>http://www.rberaldo.com.br/blog/tecnicas-de-captcha/</link>
		<comments>http://www.rberaldo.com.br/blog/tecnicas-de-captcha/#comments</comments>
		<pubDate>Tue, 08 Sep 2009 00:02:39 +0000</pubDate>
		<dc:creator>Beraldo</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Programação]]></category>
		<category><![CDATA[acessibilidade]]></category>
		<category><![CDATA[captcha]]></category>

		<guid isPermaLink="false">http://www.rberaldo.com.br/blog/?p=53</guid>
		<description><![CDATA[CAPTCHA é um recurso amplamente usado nos dias de hoje. Porém, seu mau uso gera conteúdo inacessível a usuários com deficiência visual ou deficiência de aprendizagem.]]></description>
			<content:encoded><![CDATA[<p>CAPTCHA (<em>Completely Automated Public Turing test to tell Computers and Humans Apart</em>) é um recurso amplamente usado nos dias de hoje. Porém, seu mau uso gera conteúdo inacessível a usuários com deficiência visual ou deficiência de aprendizagem, como dislexia.</p>
<p>CAPTCHA consiste em um teste para verificar se quem está acessando o site é, deveras, um ser humano e não um robô (como um bot de busca ou de spam). Normalmente é exibida uma imagem com letras e números distorcidos, os quais devem ser digitados pelo usuário numa caixa de texto. Apesar de ser o mais usado, é o menos acessível.</p>
<p><span id="more-53"></span><br />
<img src="http://www.rberaldo.com.br/blog/img/captcha-sample.gif" alt="Exemplos de imagens de captcha" /><br />
<em>Exemplos de imagens de CAPTCHA</em></p>
<p>Porém, há diversas outras formas de se fazer uma verificação CAPTCHA. Por exemplo, é possível gerar contas matemáticas simples, para que o usuário forneça a resposta. Também é possível adicionar campos <em>hidden</em> (ocultos) ou campos invisíveis via CSS (numa div com &#8220;display:none&#8221;, por exemplo). Um ser humano não preencherá esses campos, logo, se forem enviados com valores diferentes de vazio, conclui-se que o usuário é um bot.</p>
<p>Vamos a alguns exemplos simples.</p>
<p><strong>Usando o método comum, de imagem</strong></p>
<p>form.php</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>form method<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;post&quot;</span> action<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;verifica.php&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>p<span style="color: #339933;">&gt;</span>Digite o código exibido na imagem<span style="color: #339933;">&lt;/</span>p<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>input type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text&quot;</span> name<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;codigo&quot;</span> id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;codigo&quot;</span> <span style="color: #339933;">/&gt;</span>
<span style="color: #339933;">&lt;</span>img src<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;img.php&quot;</span> <span style="color: #339933;">/&gt;</span>
<span style="color: #339933;">&lt;</span>input type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;submit&quot;</span> value<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;enviar&quot;</span> <span style="color: #339933;">/&gt;</span>
<span style="color: #339933;">&lt;/</span>form<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>img.php</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #990000;">session_start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$_SESSION</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'codigo'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">rand</span><span style="color: #009900;">&#40;</span> <span style="color: #cc66cc;">1111</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">9999</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$im</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecreate</span><span style="color: #009900;">&#40;</span> <span style="color: #cc66cc;">45</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">20</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$background_color</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecolorallocate</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$im</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">255</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">255</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">255</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$text_color</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecolorallocate</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$im</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">255</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">15</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">40</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">imagestring</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$im</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">15</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #000088;">$_SESSION</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'codigo'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$text_color</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #990000;">header</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">&quot;Content-type: image/png&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">imagepng</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$im</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">imagedestroy</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$im</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>verifica.php</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #990000;">session_start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'codigo'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$_SESSION</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'codigo'</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;código correto&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #b1b100;">else</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;código errado&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #990000;">session_destroy</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>Esse exemplo é bem simples, apenas o básico do sistema. Dá para melhorar a imagem, criptografar o código na sessão, a fim de evitar que o número seja visualizado por meio de scripts ou códigos maliciosos, com o intuito de burlar a identificação. </p>
<p><strong>Gerando contas matemáticas simples</strong></p>
<p>Também é possível gerar alguns cálculos matemáticos simples, para verificar se o usuário não é um bot. Um exemplo simples:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// operando 1</span>
<span style="color: #000088;">$op1</span> <span style="color: #339933;">=</span> <span style="color: #990000;">rand</span><span style="color: #009900;">&#40;</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">20</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// operando 2</span>
<span style="color: #000088;">$op2</span> <span style="color: #339933;">=</span> <span style="color: #990000;">rand</span><span style="color: #009900;">&#40;</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">20</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// operador</span>
<span style="color: #000088;">$operador</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'+'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'-'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'*'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'/'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$operador</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$operador</span><span style="color: #009900;">&#91;</span> <span style="color: #990000;">array_rand</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$operador</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$expressao</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$op1</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$operador</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$op2</span><span style="color: #339933;">;</span>
<span style="color: #990000;">eval</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\$</span>valor = <span style="color: #006699; font-weight: bold;">$op1</span> <span style="color: #006699; font-weight: bold;">$operador</span> <span style="color: #006699; font-weight: bold;">$op2</span>;&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$expressao</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">' = '</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$valor</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Nesse caso, bastaria comparar o conteúdo de $valor com o número enviado pelo formulário. Claro que dá para fazer melhorias, como verificar se, quando for divisão, o resultado é inteiro, ou verificar se uma subtração não gera números negativos etc.</p>
<p><strong>Campos ocultos</strong></p>
<p>Uma forma que conheci há uns dias é verificar o preenchimento de campos ocultos. Geralmente os bots preenchem todos os campos encontrados no código-fonte HTML. Logo, também preencherá um campo oculto. Se isso ocorrer, saberemos que ele é um robô.</p>
<p>É possível usar um campo do tipo hidden ou um text comum, oculto via CSS. A vantagem de um campo text oculto por CSS é a dificuldade de o bot descobrir que o campo é invisível. Um campo do tipo hidden é facilmente identificado no código-fonte. Porém, podemos usar o seguinte código:</p>
<pre class="brush:html">
<div class="oculta">
<input type="text" name="nome_do_campo" id="id_do_campo" />
</div>
</pre>
<p>E definiremos a classe CSS &#8220;oculta&#8221; num arquivo CSS à parte, a fim de dificultar a leitura do bot:</p>
<pre class="brush:css">
.oculta
{
    display: none;
}
</pre>
<p>Assim o campo será lido pelo bot como um campo de texto comum, mas ele não saberá que é oculto, logo o preencherá.</p>
<p>Essas foram apenas algumas técnicas alternativas à tradicional imagem de autenticação. Pesquisando no Google, há diversas outras opções, mas a  lógica não difere muito da apresentada aqui.</p>
<p>Links interessantes:<br />
<a href="http://www.maujor.com/w3c/turingtest.html" target="_blank" onclick="urchinTracker('/outgoing/www.maujor.com/w3c/turingtest.html?referer=');">http://www.maujor.com/w3c/turingtest.html</a><br />
<a href="http://www.captcha.net" target="_blank" onclick="urchinTracker('/outgoing/www.captcha.net?referer=');">http://www.captcha.net</a><br />
<a href="http://recaptcha.net" target="_blank" onclick="urchinTracker('/outgoing/recaptcha.net?referer=');">http://recaptcha.net</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.rberaldo.com.br/blog/tecnicas-de-captcha/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

