Esconder con CSS el email a los spambots

07/7/05 - Cuando publicamos una dirección de correo en una página web debemos saber que no tardará mucho en ser rastreada e incorporada a bases de datos de emails para hacer spam. Es una auténtica paliza tener que recibir decenas o cientos de mensajes basura al cabo del día o la semana, así que merece la pena poner en marcha algún mecanismo para evitar que los spambots (robots en busca de direcciones de email) cacen nuestro correo electrónico.

En DesarrolloWeb.com ya publicamos algunos trucos posibles para evitar que encuentren nuestro email escrito en la web, en el artículo Ocultar un email de un enlace para evitar el spam. Ahora vamos a mostrar otro mecanismo que hemos encontrado en una página web. En concreto, este artículo es una traducción libre de este otro artículo en inglés: Hiding email address from spambots, escrito por Lim Chee Aun.

En este caso vamos a mostrar un código que serviría para mostrar por CSS la dirección de correo electrónico. El email aparece en la hoja de estilos, nunca en el cuerpo de la página, por lo que el spambot lo va a tener muy difícil para obtener nuestro correo.

Se trata de utilizar unas características avanzadas de las hojas de estilo en cascada, que permiten definir cierto contenido, en este caso una dirección de correo electrónico, para colocar antes o después de un texto.

Concretamente vamos a utilizar CSS2 (hojas de estilo en cascada especificación 2), que incluye la definición de pseudo-elements (pseudo elementos) "before" y "after", que sirven para insertar contenidos antes y después de ciertos elementos.

En este caso, vamos a definir con CSS 2 la inclusión de un contenido después de una etiqueta HTML, en concreto la etiqueta <ADDRESS>, que sirve en principio para escribir una dirección en una página.

Nota: Conocimos los pseudo-element en un artículo del manual de CSS: Pseudo-element en CSS

El código CSS sería el siguiente:

address:after{
/* \40 es un código para escribir el caracter '@' */
content: " <nombre\40 dominio.com>";
}

Nota: El carácter @ en hojas de estilo en cascada se puede escribir con el código especial \40. Ponemos un espacio después de \40 para que quede claro que el carácter especial llega hasta allí. Podéis probar a quitar el espacio y veréis como en ocasiones la @ se transforma en otro carácter, dependiendo de lo que se haya escrito después. Ese espacio en blanco no afecta al texto, es decir, no se verá en la página.

El código HTML que deberíamos escribir para mostrar la dirección de correo sería el siguiente:

<address>© 2005 loquesea.com</address>

Como se puede ver, en el código HTML no aparece la dirección de correo electrónico en ninguna parte, con lo que el spambot no se enterará de que allí se muestra un correo.

Se puede ver el ejemplo en una página aparte.

Atención los usuarios de Internet Explorer 6. Este navegador no soporta los pseudo-elementos after o before, con lo que este ejemplo no funcionará.

En nuestro ejemplo hemos incorporado la declaración de estilos en el mismo fichero HTML, pero tal vez sería más efectivo si colocásemos la declaración de estilos en un archivo externo, que luego incluiríamos con la etiqueta en la cabecera de la página.

Conclusión

Hemos podido ver otra ingeniosa manera de ocultar la dirección de email. Sin embargo, cabe destacar que las características avanzadas de CSS2 no están soportadas por todos los navegadores.

En general, desventaja a destacar es que, con este código, la accesibilidad de la página disminuye considerablemente. Puesto que sólo ciertos navegadores mostrarán las direcciones de correo electrónico. Asimismo, esas direcciones no se podrán pinchar para enviar un correo electrónico directamente, es decir, no se pueden mostrar como enlaces. En Firefox, ni siquiera podemos seleccionar el texto de la dirección de correo, simplemente se nos permite verlo.

No obstante, es una nueva manera de mostrar un correo electrónico no accesible a programas de rastreo de emails. Hoy todavía no es una manera muy adecuada, pero tal vez lo será con el tiempo.

Recordamos que este artículo es una traducción de otro, escrito en inglés y publicado en la URL: http://www.phoenity.com/newtedge/hide_email_spambots/

Autoría, licencia y acciones sobre este artículo

Informe de Lim Chee Aun* URL: http://cheeaun.phoenity.com/ Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestran 2 comentarios revisados

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba