400440309. Implementación de CAPTCHA de Audio

– ¡Toc! ¡Toc!
– ¿Quién es?
-Soy yo, Dave. Ábreme…

Cuando Cheech y Chong realizaron esta rutina en los años 70, se hizo tan popular como lo fue en la generación anterior “¿Quién va primero?” de Abbot y Costello. Mientras “Dave” negociaba la posibilidad de abrir la puerta, los dos sabían que estaban hablando con seres humanos. Pero cuando consideramos si “abriremos la puerta” a los comentarios a nuestro blog o cualquier otro feedback, no tenemos tanta suerte. De hecho, en la mayoría de los casos, es probable que estemos tratando con una máquina que nos pide entrar.

Es probable que hayamos visto las zonas de desastre que quedan a raíz de un ataque robot en un blog o en otro portal de feedback de web, cuando no se utiliza un mecanismo de filtrado en la sección de comentarios. Desde luego no es un sitio atractivo. La basura excesiva en el blog puede alejar a los lectores además de traer indeseables asociaciones Google con nuestro nombre.

En un aspecto incluso más importante, la protección de la información personal sobre bancos, bases de datos de empleados, y otros sitios es fundamental para que los webmasters decidan si están tratando con seres humanos. El método normal para poder hacerlo es alguna forma de CAPTCHA, abreviatura de “ Completely Automated Public Turing Test to Tell Computers and Humans Apart» (www.captcha.net), que requiere que leamos algún tipo de texto distorsionado como el de la figura número 1, y a continuación introducir correctamente la secuencia del texto en un cuadro de diálogo. Leer el texto es (teóricamente) sencillo para nosotros, pero difícil para un ordenador.

Figura 1

Una CAPTCHA típica.

Considero una CAPTCHA como un candado que fuera fácil de abrir para los humanos, pero difícil de descifrar para las máquinas. Desde luego, el cerrar nuestro coche o casa con llave no es un método absolutamente seguro de impedir que los “malos” hagan lo peor. La idea de un candado o alarma es realmente ponerle más difícil a alguien el andar con tus cosas – tan difícil que pasarán de largo. Ese es también realmente el objetivo práctico de CAPTCHA.

¿Ves lo que yo?

Ver a Esther Williams chapoteando por el agua en esas viejas películas de los 40 es una buena manera de pasar una tarde lluviosa. Pero intentar descifrar la pantalla de un ordenador que muestra unas sílabas de similar turbulencia no es la idea que nadie tiene de una interesante velada. Una CAPTCHA de audio, por otro lado, es una atractiva alternativa a su equivalente visual.

Hay quien puede sentirse lo suficientemente disuadido ante la idea de tener que navegar otra CAPTCHA visual más como para alejarse de nuestro sitio web. Al ofrecer una alternativa que puede resultar más fácil de navegar para algunos puede constituir un incentivo para que mucha gente abra la puerta virtual a los comentarios sobre nuestro sitio.

Otra razón más para considerar alternativas a los mecanismos de CAPTCHA visual tiene que ver con una normativa gubernamental denominada “Sección 508”, oficialmente conocida como “Ley federal de Accesibilidad y Cumplimiento en materia de Tecnologías Electrónicas y de Información”

La sección 508 (www.section508.gov) dice que cuando las agencias del gobierno federal desarrollan o usan información electrónica, están obligadas a poner esa información a disposición de todos por igual. En el caso de CAPTCHA, ello implica que la gente que no puede leer una CAPTCHA tendría que tener acceso a un mecanismo de entrada alternativo. Al menos, esa es mi traducción de la cuestión “gubernamental” de la normativa.

Hasta la fecha, los requisitos de la Sección 508 son sólo aplicables a los sitios con lazos financieros al gobierno federal. Sin embargo, tiene sentido, desde el punto de vista tanto de la empresa como de los seres humanos, ofrecer alternativas de accesibilidad para gente que tiene situaciones físicas distintas. Conviene pensar en implementar estas alternativas en nuestro sitio web personal además de en los sitios comerciales que desarrollemos.

Buenos consejos

La gente que tiene problemas de vista sería una audiencia natural para una CAPTCHA de audio. Con ello en mente, cualquier implementación CAPTCHA de audio debería construirse de tal forma que sea fácil de usar para quienes utilizan un lector de pantalla.

Podemos comprobar si nuestro CAPTCHA de audio funciona bien para alguien que utiliza un lector de pantalla mediante el “Microsoft Narrator” que viene con Windows. Activamos esta característica en Windows XP al seleccionar Inicio| Todos los programas| Accesorios| Accesibilidad| Narrador.

Cualquier instrucción que vaya con nuestra CAPTCHA ha de ser concisa. Alguien que use un lector de pantalla no desea que éste le vuelva a leer unas instrucciones excesivamente verbosas.

La implementación que presento en este artículo puede utilizarse sin tener que emplear el ratón. Esta característica es especialmente útil para alguien que use lectores de pantalla. Les pido a los usuarios que inserten una clave específica para iniciar el audio. Una vez iniciado el audio, traslado la atención al propio cuadro de texto y lo envío para su validación al obtener la tecla de Introducir.

Cuando se implementa una CAPTCHA de audio, sigue siendo necesario ocultárselo de alguna forma a los robots. No obstante, hay formas de engañar a estas máquinas que son menos intrusivas y más fáciles de gestionar para un humano que el uso de dibujos con letras distorsionadas.

Algunas CAPTCHA de audio actualmente en uso intentan frustrar a los robots de descifrado de audio oscureciendo el audio. Para mí, eso destruye alguno de sus fines. Al igual que las sílabas en turbulencia antes mencionadas, al oscurecer el audio, hacemos que a los humanos les resulte también más difícil de entender.

En lugar de añadir ruidos de fondo o cualquier otro obstáculo similar al sonido, podemos probar a añadir algo de sencilla lógica oral que una máquina encontraría difícil de descifrar y analizar. En la implementación que yo he hecho, pido cuatro números.
El reto empieza con una sencilla instrucción “Por favor, introduzca estos cuatro números…”..,Y a continuación dice cuatro números aleatorios (Figura 2). Hay una serie de ficheros de audio MP3 para los números 0-9 disponible online; véase (www.ddj.com/code.

Figura 2

La UI simple.

Una buena adición que debería contribuir a oscurecer el reto para los robots, sería incluir de forma aleatoria una frase entre dos de los números como “no un 7, sino un…” Así, por ejemplo, en vez de oír “Por favor, introduzca estos cuatro números: 4,3,6,2”, el usuario oye: “Por favor introduzca estos cuatro números: 4,3,6, no 7 sino 2”.

Naturalmente, en este ejemplo tendríamos que añadir lógica para garantizar que el cuarto número que se pide no sea un 7. Otros métodos podrían sencillamente añadir frases como “y un”, “a continuación presione introducir”, etc. La idea es añadir sólo el audio necesario para engañar a los robots sin confundir ni frustrar a los usuarios.

Cinta en carrete

Al crear mi CAPTCHA de audio, mis objetivos eran mantener las cosas sencillas usando sólo una pequeña cantidad de código sin ninguna dependencia externa. También quería mantener las instrucciones y la interacción del usuario lo más sencilla posible. Una solución que use PHP parecía la mejor, con algo de JavaScript para gestionar la independencia del navegador y la entrada del teclado.

El fichero principal, index.htm (Listado número 1), empieza estableciendo una sesión PHP con una invocación a session_start(). Las sesiones se usan en PHP como un mecanismo de persistencia, permitiendo que los datos se pasen de una página a otra. Para más información sobre las sesiones PHP, véase us2.php.net/session).

Tras establecer la sesión, el script PHP carga una matriz con cuatro números aleatorios, del 0 al 9. Estos números sirven de base para el audio generado aleatoriamente y se utilizan para verificar la posterior entrada del usuario.
Los cuatro dígitos se concatenan juntos a continuación y se almacenan en la variable de matriz global $_SESSION. Aquí hago uso de la característica de matriz asociativa de PHP, denominando este índice de matriz «captchaAnswer».

Listado número 1

() = GetRand();

// Get a random number from 0-9

function GetRand()

return rand(1,10)-1;

$_SESSION('captchaAnswer') = $fileName(0) . $fileName(1) . $

fileName(2) . $fileName(3);

?>

Al cargarse la página, se invoca una función Init() de JavaScript. Eso solo garantiza que el cuadro de texto esté libre de entradas anteriores. Las dos funciones siguientes establecen el navegador y el SO del usuario. Si el usuario utiliza Internet Explorer en Windows, lo que necesitamos es usar un Media Player insertado en Windows para que reproduzca los ficheros de sonido.

Se invoca una función KeyCheck() de JavaScript cuando el navegador obtiene un mensaje onkeyup. Yo utilizo la tecla hacia arriba en vez de hacia abajo porque esta última puede ser generada más de una vez si el usuario mantiene una tecla hacia abajo durante un cierto período de tiempo.

KeyCheck() obtiene el código de la tecla, la tecla que apretó y soltó el usuario. Obtiene este código bien mediante el window.event que se encuentra insertado en IE o mediante la variable pasada que estará presente en los navegadores basados en Mozilla.

Yo elegí utilizar la tecla P para iniciar el audio. No es necesario comprobar si se introduce una P minúscula porque el navegador hace “doblado de tipo”, que quiere decir que cualquier carácter introducido en minúscula se convierte en mayúscula. Podría haber usado aquí casi cualquier tecla.

Quería utilizar la barra de espaciado porque eso es lo que se utiliza en muchos paquetes de software de audio para iniciar o detener la reproducción. Pero la barra de Espaciado es ya una tecla muy utilizada en los navegadores para bajar de página, así que me decidí por P de “Play”.

Cuando se detecta la techa P hacia arriba, KeyCheck() elimina cualquier dato que pueda haber en el cuadro de texto. A continuación reproduce el fichero de audio de una o dos maneras, dependiendo del navegador y del SO. Si se utiliza IE/Windows, se utiliza el Media Player insertado en Windows. El Media Player tiene un modelo de objetos que permite el control de scripts. Al invocar el controls.play() del Player se inicia el Media Player.

Si el usuario no está en IE/Windows, el script usa lo que el usuario haya establecido como el reproductor de medios por defecto. Cuando probé esto, vi que cuando usaba la etiqueta embed HTML, el fichero de sonido creado de forma dinámica no se reproducía. Al usar en su lugar la etiqueta iframe, con una estructura de tamaño 0, se reproduce el fichero.

Cuando se ha iniciado el audio, cambio el enfoque al cuadro de texto de entrada. Esta secuencia – activar el audio al darle a la tecla P, cambiar el enfoque al cuadro de texto de entrada, y aceptar la tecla de Introducir como señal de que se ha completado la entrada – le permite al usuario no tener que utilizar el ratón.

Debajo de KeyPress() hay un código que inserta el Windows Media Player si el usuario está en IE/Windows. Al parámetro url se le da el valor de PlaySound.php. Este es el fichero que genera el audio. Además. autoStart es Falso, por lo que el audio no se iniciará cuando se carga la página por primera vez. Si queremos, podemos cambiar este valor a True, dependiendo de cómo estemos presentando la CAPTCHA.

Tras la sección de JavaScript vienen los datos de forma. La forma toma el input del usuario para CAPTCHA e invoca el fichero CaptchaSubmit.php para verificar los datos del input. Por último, incluyo una sección div para contener la estructura HTML que se puede generar en KeyPress().

Están tocando nuestra canción

El script PlaySound.php (Listado número 2) usa PHP para formar un flujo MP3 de forma dinámica mediante la concatenación de ficheros MP3 más cortos. La función header() de PHP escribe el tipo de contenido como MPEG. A continuación, inicio el flujo con una breve introducción que dice sencillamente “Por favor, introduzca estos cuatro números.” Esto es el fichero Intro.mp3, que inicia el flujo.

El script extrae a continuación los cuatro números de la matriz $_SESSION . Los números se almacenan en la matriz como una sola cadena, de manera que el script destruye la cadena y almacena los números en una matriz de filename. A continuación, para cada número, se añade el correspondiente fichero MP3 al flujo. Esta es la sección en la que podemos querer incluir algunas palabras adicionales.

Por último, se imprime el flujo como estándar, y gracias al encabezamiento de tipo de contenido, el navegador lo interpreta como si fuera un fichero MP3. Naturalmente, hay muchas formas diferentes de reproducir sonido en la Web.

Yo elegí MP3 porque es fácil de concatenar ficheros separados ya que no hay información de encabezados sobre la que preocuparse como sí la hay con los ficheros .wab. Podemos también experimentar con distintos tipos de ficheros para nuestra CAPTCHA, como quizá por ejemplo Flash.

Listado número 2

('captchaAnswer');

/* this works under PHP4,

can use str_split() here instead in PHP5 */

$fileName = array();

for ($i = 0; $i < strlen($str); $i++) $fileName() = substr($str,$i,1);

foreach ($fileName as $fileNumer)

$thisFile = $fileNumer . ".mp3";

$fh = fopen($thisFile, 'r');

$allAudio .= fread($fh, filesize($thisFile));

fclose($fh);

/* output the resulting MP3 */

print $allAudio;

?>

El último fichero, CaptchaSubmit.php (Listado número 3) sirve para comprobar las entradas del usuario y da como resultado un sencillo mensaje para indicar el éxito o el fracaso. CheckAnswer() comprueba primero si se envió algo y si se ha establecido la sesión PHP. A continuación comprueba la respuesta enviada por el usuario con la prueba inicializada en el fichero index.htm, retornando True o False (1 o 0), según sea apropiado.

Listado número 3

if (!isset($_POST('userAnswer')) || !isset($_SESSION('captchaAnswer')))

return 0;

else if ($_POST('userAnswer') == $_SESSION('captchaAnswer'))

return 1;

return 0;

print "";

print $_POST('userAnswer');

if(CheckAnswer())

print " is correct.";

else

print " is not correct, please go back and try again.";

print"";

?>

Querremos cambiar la mitad inferior de este script, que da como resultado éxito o fracaso, con nuestros propios criterios de éxito, probablemente un redireccionado de vuelta a nuestro blog o a otra página de medios.

Audio alternativo

La solución que he perfilado aquí es sencilla y, a nivel de sonido, básica. Si tenemos un sitio web al que viene gente para divertirse, podríamos probar a hacer que cualquier CAPTCHA necesario sea de alguna forma divertido, o al menos que tenga relación con nuestro sitio web.

Por ejemplo, si tenemos un sitio que es frecuentado por músicos, podemos probar con tonos musicales en vez de con números. Un músico, con un oído entrenado, puede notar qué intervalos hay entre dos o más notas.

Podemos sustituir los cuatro números aleatorios por cuatro notas aleatorias, dentro de una octava, y preguntar por los intervalos entre ellas. O podemos hacer sonar un acorde mayor, uno menor y uno disminuido y preguntarle al músico que nombre los tipos de acorde.

Por otro lado, si nuestro sitio atrae a los devotos de Stephen Hawking, podemos probar a pedirles un problema matemático, como la raíz cúbica de 9. Para un sitio de astronomía podemos preguntar por las distancias astrológicas, como cuántos kilómetros hay de la Tierra a la Luna.

Otra alternativa, que encajaría especialmente bien con el método de audio que he presentado, sería el pedir ciertas letras del alfabeto. Por ejemplo, podríamos decir “Introducir la primera y la quinta letra del alfabeto”, sustituyendo las palabras “primera” y “quinta” por posiciones aleatorias.

Como otra idea más, podemos probar a usar ficheros de sonidos con palabras que rimen, e incluir una en el grupo que no rime con las demás. Y le pedimos al usuario que introduzca la que no rima. Seguro que se nos ocurren otras variaciones para “nombra lo que no pertenece al grupo”. Al procurar que nuestro CAPTCHA tenga relación con nuestro tema, se puede eliminar parte de lo oneroso del proceso CAPTCHA.

Eso es un envoltorio

Buscar alguna forma de distinguir entre usuarios humanos e intrusos mecánicos es un mal necesario en muchas aplicaciones web. Es importante que consideremos la posibilidad de usar una combinación de métodos para que los componentes del feedback de nuestro sitio estén accesibles para todos aquellos que navegan por Internet.

Con un poco de imaginación, podremos hacer que se mezcle sin problemas en nuestro sitio web. En cualquier caso, debe ser simple y sencillo. Después de todo, el CAPTCHA es sólo la puerta, y no lo que hay al otro lado.

DDJ