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

Los spammers son un gran problema en estos días. Si desea compartir su información de contacto sin recibir una inundación de spam, necesita una solución. Me encontré con este problema hace unos meses. Mientras investigaba cómo solucionarlo, encontré varias soluciones interesantes, solo una de ellas era perfecta 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 tienes un sitio web. Desea compartir sus datos de contacto y no desea compartir solo sus conexiones sociales. La dirección de correo electrónico debe estar allí. Fácil, ¿verdad? Escriba 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 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 algunas campañas 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 confusión.

Confusió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. Una es ocultar el propósito del código fuente para dificultar la manipulación o la ingeniería inversa. Primero veremos varias soluciones, todas las cuales se basan en la idea de confusión.

El enfoque HTML

Podemos pensar en los bots como software que navega por la web y rastrea páginas web. Después de que un bot recibe un documento HTML, interpreta su contenido y extrae información. Este proceso de extracción se llama raspado webSi 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, podemos 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 confuso, 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]

Profesionales:

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

Contras:

• Los robots de spam pueden omitir ciertas secuencias como los comentarios.
• no funciona con un mailto: conexión.

El enfoque HTML y CSS

¿Qué pasaría si usáramos el poder estilístico de CSS para eliminar contenido colocado solo para engañar a los robots de spam? Digamos que tenemos el mismo contenido que antes, pero esta vez ponemos span elemento interior:

<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>.

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.

Profesionales:

• 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.

Contras:

• no funciona con un mailto: conexión.

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 en Base64 la dirección de correo electrónico. Podemos usar algunos sitios web como Base64Encode.org para hacer esto. Introduce tu dirección de correo electrónico así:

Luego haga clic en el botón codificar Con estas pocas líneas de JavaScript, decodificamos la dirección de correo electrónico y configuramos 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 atob método para decodificar una cadena de datos codificados en Base64. Una alternativa es usar algún algoritmo de cifrado básico como Cifrado de Césarque es bastante fácil de implementar en JavaScript.

Profesionales:

• 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: conexión.
• Puede ser leído por tecnología de asistencia.

Contras:

• 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. Debes haber 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.

juerga 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. Uf es demasiado De hecho, aquí hay algunos que puede considerar 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, por supuesto, varía, 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

<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 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 backend de Formspree ve un envío con esta entrada completa, lo rechazará. Un usuario normal no haría eso, así que debe ser un bot.

Profesionales:

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

Contras:

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

Hay otra desventaja de esta solución, pero la dejé fuera 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 conectarse contigo. ¿Qué pasa si la gente desear enviarte un correo? ¿Qué pasa si las personas buscan su dirección de correo electrónico y no quieren un formulario de contacto? Un formulario de contacto puede ser una decisión difícil en tal situación.

Conclusión

¡Hemos llegado al final! En este tutorial, hablamos sobre diferentes soluciones al problema de compartir correo electrónico en línea. Analizamos diferentes ideas relacionadas con 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 mejor para su caso de uso particular.