Cómo compartir de forma segura su dirección de correo electrónico en un sitio web | consejos CSS

Los spammers son un gran problema en estos días. Si desea compartir su información de contacto sin verse abrumado por el spam, 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 varias soluciones. Depende de usted decidir qué técnica se adapta a sus necesidades.

El caso tradicional

Digamos que tienes 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="https://css-tricks.com/how-to-safely-share-your-email-address-on-a-website/mailto:[email protected]">Send me an Email</a>

Y luego lo peinas a tu gusto.

Bueno, aunque esta solución funciona, tiene un problema. Hace que su dirección de correo electrónico sea accesible para todos, incluidos los rastreadores 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 una 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 fácil 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 varias razones. Uno de ellos oculta 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 software que navega por la web y rastrea páginas web. Una vez que un bot obtiene un documento HTML, interpreta su contenido y extrae información de él. Este proceso de extracción se llama raspado web. Si un bot busca un patrón que coincida con el formato del correo electrónico, podemos intentar enmascararlo con un formato diferente. Por ejemplo, podríamos usar comentarios HTML:

<p>If you want to get in touch, please drop me an email at<!-- fhetydagzzzgjds --> [email protected]<!-- sdfjsdhfkjypcs -->addr<!-- asjoxp -->ess.com</p>

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]

Ventajas:

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

Los inconvenientes:

  • Los spammers pueden ignorar secuencias conocidas como comentarios.
  • No funciona con un mailto: Enlace.

El enfoque HTML y CSS

¿Qué pasaría si usáramos el poder estilístico de CSS para eliminar cierto contenido colocado únicamente para engañar a los spambots? Digamos que tenemos el mismo contenido que antes, pero esta vez colocamos un span artículo dentro:

<p>If you want to get in touch, please drop me an email at <span class="blockspam" aria-hidden="true">PLEASE GO AWAY!</span> [email protected]<!-- sdfjsdhfkjypcs -->address.com</p>.

A continuación, 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]

…cuál es el contenido que realmente nos interesa.

Ventajas:

  • Funciona con JavaScript deshabilitado.
  • 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.

Versus :

  • No funciona con un mailto: Enlace.

El enfoque de JavaScript

En este ejemplo, estamos usando 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 simple utiliza el algoritmo de codificación Base64 para decodificar la dirección de correo electrónico. Primero, necesitamos codificar en Base64 la dirección de correo electrónico. Podemos usar algunos sitios web como Base64Encode.org para hacer esto. Escribe tu dirección de correo electrónico así:

Un cuadro de texto grande para pegar una dirección de correo electrónico con una serie de opciones a continuación sobre cómo codificar el texto.

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)));

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

<a id="contact" href="">Send me an Email</a>

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

Ventajas:

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

Versus :

  • 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 de que las personas se comuniquen con usted directamente, una posible solución es implementar un servicio de formulario de contacto en su sitio web.

Formspree es un ejemplo de un servicio que le brinda todos los beneficios de un formulario de contacto sin preocuparse por el código del lado del servidor. Wufoo también lo es. De hecho, aquí hay un grupo que puede 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. Los precios varían, por supuesto, al igual que las funciones 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

<form action="https://formspree.io/f/[my-key]" method="POST">
  <label> Your email:
    <input type="email" name="email" />
  </label>
  <label> Your message:
    <textarea name="message"></textarea>
  </label>
  <!-- honeypot spam filtering -->
  <input type="text" name="_gotcha" style="display:none" />
  <button type="submit">Send</button>
</form>

En la primera línea necesitas personalizar action dependiendo de 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 esta entrada completa, lo rechazará. Un usuario normal no haría esto, por lo que debe ser un bot.

Ventajas:

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

Versus :

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

Esta solución tiene otra desventaja, pero la omití de la lista porque es bastante subjetiva y depende de su caso de uso. Con esta solución, no comparte su dirección de correo electrónico. Le das a la gente una forma de contactarte. y si la gente querer para enviarle 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 engorrosa en este tipo de situación.

Conclusión

¡Hemos llegado al final! En este tutorial, hemos hablado sobre diferentes soluciones al problema de compartir correos electrónicos en línea. Analizamos diferentes ideas, involucrando 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 presentadas. Ahora depende de usted decidir cuál es mejor para su caso de uso específico.

Si quieres conocer otros artículos parecidos a Cómo compartir de forma segura su dirección de correo electrónico en un sitio web | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas