Diseño web y programación

Con el foco en php, laravel y geolocalización

Ofuscar dirección de email con css

Ofuscar la dirección de email, o ciertos datos de nuestra página web, es siempre una buena idea para proteger nuestra información de boot y robots, que recorren la red en busca de datos personales, y que suele terminar, con una avalancha de spam, en nuestro buzón de email.

El problema de la ofuscación, es que estos mismos programas que inspeccionan las webs en busca de datos, saben como moverse entre el código ofuscado.

Tengamos en cuenta, que la ofuscación con javascript (por ejemplo) es reversible, y por tanto, se pueden descifrar los datos que estamos intentado ocultar de una forma relativamente sencilla, por lo que debemos intentar un enfoque diferente.

No existe una solución perfecta para el problema, pero utilizando css, podemos complicar las cosas considerablemente, y lo mejor de todo, es que es sumamente sencillo de hacer.

La mejor forma de verlo, es mediante un ejemplo. Empecemos por ofuscar esta dirección de email:

email@email.com

Lo primero que tenemos que hacer, es poner a nuestro email en un contenedor 'div', y asignarle una clase:

<div class="ofuscar">email@email.com</div>

Y ahora, en nuestra hoja de estilos, creamos la clase 'ofuscar', que hemos mencionado antes:

.ofuscar{
    unicode-bidi: bidi-override;
    direction: rtl;
}

Esta clase lo que va a hacer es invertir el orden de escritura, quedando de la siguiente manera en el código fuente del navegador:

<div class="ofuscar">moc.liame@liame</div>

Pero aún no hemos terminado, podemos mejorar el sistema. Vamos a añadir otra nueva clase:

 .ofuscar span, 
 .ofuscar b, 
 .ofuscar em {
      display: none;
 }

Es decir, vamos a asignar a etiquetas que van a estar contenidas en nuestra clase, la propiedad display: none, para que no se vean.

¿Y para qué?, pues para hacer algo así:

<div class="ofuscar">m<b>en un lugar de la mancha...</b>oc.lia<em>de cuyo nombre no...</em>me@lia<span>quiero acordarme....</span>me</div>

Lo que hemos hecho, ha sido meter "ruido" dentro de etiquetas, que no se van a ver, para desconcertar totalmente a cualquier boot que intente obtener información de nuestro html.

Esto último, es un poco locura, y no es nada práctico, pero en fin, es una opción más.

A modo de resumen, creo que podríamos hacer algo así con PHP:

<?php 
    $key        = "<b>TexTO sIn SeNtIDo</b>";
    $email      = "email@email.com";
    $ofuscate   = str_replace(['@', '.'], ['@' . $key, '.' . $key], $email);

    print '<div class="ofuscar">' . $ofuscate . '</div>';
?>

Obteniendo algo así:

<div class="ofuscar">email@<b>TexTO sIn SeNtIDo</b>email.<b>TexTO sIn SeNtIDo</b>com</div>

Para finalizar, y si eres usuario de Laravel, te aconsejo que instales el package Laravel Collective y simplemente hagas esto:

Html::mail('direccion@dominio.com');

Automáticamente ofuscará tu email.