Los spammers son un gran problema hoy en día. Si desea compartir su información de contacto sin verse abrumado por el correo no deseado, necesita una solución. Me encontré con este problema hace unos meses. Mientras investigaba cómo solucionarlo, encontré diferentes soluciones interesantes. Sólo uno de ellos era perfecto para mis necesidades.

En este artículo, le mostraré cómo proteger fácilmente su dirección de correo electrónico de los robots de spam con múltiples soluciones. Depende de usted decidir qué técnica se adapta a sus necesidades.

El caso tradicional

Digamos que usted tiene un sitio web. Desea compartir sus datos de contacto y no desea compartir solo sus enlaces sociales. La dirección de correo electrónico debe estar allí. Fácil, ¿verdad? Escribes algo como esto:

<a href="mailto:[email protected]">Send me an Email

Y luego lo peinas según tus gustos.

Bueno, incluso si esta solución funciona, tiene un problema. Hace que su dirección de correo electrónico esté disponible literalmente para todos, incluidos los rastreadores de sitios web y todo tipo de robots de spam. Esto significa que su bandeja de entrada puede verse inundada con toneladas de basura no deseada, como ofertas promocionales o incluso alguna campaña de phishing.

Estamos buscando un compromiso. Queremos que sea difícil para los bots obtener nuestras direcciones de correo electrónico, pero lo más simple posible para los usuarios normales.

La solución es la ofuscación.

Ofuscación es la práctica de hacer algo difícil de entender. Esta estrategia se usa con el código fuente por múltiples razones. Uno de ellos es ocultar el propósito del código fuente para dificultar la manipulación o la ingeniería inversa. Primero veremos diferentes soluciones que se basan en la idea de ofuscación.

El enfoque HTML

Podemos pensar en los bots como un software que navega por la web y rastrea las páginas web. Una vez que un bot obtiene un documento HTML, interpreta el contenido y extrae información. Este proceso de extracción se llama web scraping. Si un bot está buscando un patrón que coincida con el formato del correo electrónico, podemos intentar disfrazarlo usando un formato diferente. Por ejemplo, podríamos usar comentarios HTML:

If you want to get in touch, please drop me an email at [email protected]address.com

Parece desordenado, pero el usuario verá la dirección de correo electrónico así:

If you want to get in touch, please drop me an email at [email protected]

Pros:

• Fácil de configurar.
• Funciona con JavaScript desactivado.
• Puede ser leído por tecnología de asistencia.

Contras:

• Los robots de spam pueden omitir secuencias conocidas como comentarios.
• no funciona con un mailto: .

El enfoque HTML y CSS

¿Qué pasa si usamos el poder de estilo de CSS para eliminar algún contenido colocado solo para engañar a los robots de spam? Digamos que tenemos el mismo contenido que antes, pero esta vez colocamos un span elemento interior:

If you want to get in touch, please drop me an email at PLEASE GO AWAY! [email protected]address.com
.

Luego, usamos la siguiente regla de estilo CSS:

span.blockspam {
  display: none;
}

El usuario final solo verá esto:

If you want to get in touch, please drop me an email at [email protected]

…que es el contenido que realmente nos importa.

Pros:

• Funciona con JavaScript desactivado.
• Es más difícil para los bots obtener la dirección de correo electrónico.
• Puede ser leído por tecnología de asistencia.

Con:

• no funciona con un mailto: .

El enfoque de JavaScript

En este ejemplo, usamos JavaScript para hacer que nuestra dirección de correo electrónico sea ilegible. Luego, cuando se carga la página, JavaScript vuelve a hacer legible la dirección de correo electrónico. De esta manera, nuestros usuarios pueden obtener la dirección de correo electrónico.

La solución más sencilla utiliza el algoritmo de codificación Base64 para decodificar la dirección de correo electrónico. Primero, necesitamos codificar la dirección de correo electrónico en Base64. Podemos usar algunos sitios web como Base64Encode.org para hacer esto. Escriba su dirección de correo electrónico de esta manera:

Luego, haga clic en el botón para codificar. Con estas pocas líneas de JavaScript decodificamos la dirección de correo electrónico y configuramos la href atributo en el enlace HTML:

var encEmail = "ZW1haWxAYWRkcmVzcy5jb20=";
const form = document.getElementById("contact");
form.setAttribute("href", "mailto:".concat(atob(encEmail)));

Luego, debemos asegurarnos de que el enlace del correo electrónico incluya id="contact" en el marcado, así:

Send me an Email

Estamos usando el atob método para decodificar una cadena de datos codificados en Base64. Una alternativa es utilizar algún algoritmo de cifrado básico como el Cifrado César, que es bastante sencillo de implementar en JavaScript.

Pros:

• Es más complicado para los bots obtener la dirección de correo electrónico, especialmente si usa un algoritmo de cifrado.
• Funciona con un mailto: .
• Puede ser leído por tecnología de asistencia.

Con:

• JavaScript debe estar habilitado en el navegador, de lo contrario, el enlace estará vacío.

El enfoque de formulario incrustado

Los formularios de contacto están en todas partes. Seguro que has usado uno de ellos al menos una vez. Si desea una forma en que las personas se comuniquen directamente con usted, una de las posibles soluciones es implementar un servicio de formulario de contacto en su sitio web.

juerga es un ejemplo de servicio que le brinda todos los beneficios de un formulario de contacto sin preocuparse por el código del lado del servidor. Wufoo es demasiado. En realidad, aquí hay un montón que puedes considerar para manejar los envíos de formularios de contacto por usted.

El primer paso para usar cualquier servicio de formulario es registrarse y crear una cuenta. El precio varía, por supuesto, al igual que las características que se ofrecen entre los servicios. Pero una cosa que la mayoría de ellos hacen es proporcionarle un fragmento de HTML para incrustar un formulario que cree en cualquier sitio web o aplicación. Aquí hay un ejemplo que saqué directamente de un formulario que creé en mi cuenta de Formspring

   Your email:
    
  
   Your message:
    
  
  
  
  Send

En la primera línea, debe personalizar action basado en su punto final. Este formulario es bastante básico, pero puede agregar tantos campos como desee.

Observe la etiqueta de entrada oculta en la línea 9. Esta etiqueta de entrada lo ayuda a filtrar los envíos realizados por usuarios regulares y bots. De hecho, si el back-end de Formspree ve un envío con esa entrada completa, lo descartará. Un usuario normal no haría eso, así que debe ser un bot.

Pros:

• Su dirección de correo electrónico está segura ya que no es pública.
• Funciona con Javascript deshabilitado.

Con:

• Depende de un servicio de terceros (que puede ser un profesional, según sus necesidades)

Esta solución tiene otra desventaja, pero la dejé fuera de la lista porque es bastante subjetiva y depende de su caso de uso. Con esta solución, no está compartiendo su dirección de correo electrónico. Le estás dando a la gente una forma de contactarte. ¿Qué pasa si la gente quieres para enviarte un correo electrónico? ¿Qué sucede si las personas están buscando su dirección de correo electrónico y no quieren un formulario de contacto? Un formulario de contacto puede ser una solución de mano dura en ese tipo de situación.

Conclusión

¡Llegamos al final! En este tutorial, hablamos sobre diferentes soluciones al problema de compartir correo electrónico en línea. Analizamos diferentes ideas, involucrando código HTML, JavaScript e incluso algunos servicios en línea como Formspree para crear formularios de contacto. Al final de este tutorial, debe conocer todos los pros y los contras de las estrategias que se muestran. Ahora, depende de usted elegir el más adecuado para su caso de uso específico.