Cómo evitar Spam en el correo

Hay muchas maneras de intentar evitar el Spam de un email que se muestra en tu página web. Lo que hay que hacer es que un querido bot siniestro recién llegado del averno con una cara de psicópata parecida a esta 👇 encuentre nuestra querida cuenta de email a través del DOM de la página web. Mírale, qué ojos de mirada chunga…

Muchas de las soluciones son con JavaScript, pero no todas valen, me explico, hay soluciones con JavaScript que te pintan dinámicamente el email en el DOM, es decir, en el código HTML que puedes ver e inspeccionar de la página web. Antiguamente, esto podía funcionar, porque los bots únicamente hacían un barrido del DOM y no eran capaces de detectarlo, hoy en día… algo te puede proteger, pero actualmente existen herramientas como Puppeteer y Playwright que son capaces de levantar un entorno web como si fuera un usuario normal navegando por la web.

La técnica que yo uso no es la mejor, porque también tiene sus contras, que luego te explicaré, pero a mí me ha funcionado siempre.

Esta técnica se basa sobre todo en el CSS, ya que el email que se pinta en el DOM está al revés. Puedes darle la vuelta al tuyo fácilmente con JS así:

"[email protected]".split("").reverse().join("");

Por ejemplo, para el email: “[email protected]” lo que realmente vamos a escribir y lo que el bot verá es: “moc.elpmaxe@liame”, con lo cual es imposible que el príncipe nigeriano que quiere regalarte dinero te contacte.

Pero evidentemente no quieres que la gente vea tu email al revés, ahora es cuando entra en juego el CSS, simplemente hay que darle la vuelta con direction: rtl;. Aparte, hay que evitar que el usuario pueda copiarlo, ya que se copiaría al revés user-select: none;.

Y para mayor seguridad evitamos los eventos de selección y botones del ratón:

oncontextmenu="false"
onmousedown="false"
onselectstart="false"

Por lo que quedaria algo así:

HTML:

<span oncontextmenu="false" onmousedown="false" onselectstart="false" class="rtl no-select">
    moc.elpmaxe@liame
</span>

CSS:

.no-select {
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

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

Pros:

• Evitas el 99.99% del spam de los bots, el 0.01% restante es el que se haga a mano.
• No necesitas scripts de JavaScript (oncontextmenu, onmousedown y onselectstart son eventos de JS).

Contras:

• No se puede copiar.
• No puedes poner un enlace con mailto:.
• No vale para otro tipo de escritura y lectura que no sea de izquierda a derecha. (Creo).

Y por último, como curiosidad por si no lo sabías, la palabra spam asociada a la informática viene de los Monty Python, de un sketch que hicieron en el que repetían un motón de veces la palabra, refiriéndose a los botes de carne enlatada.

¡Saludos, terrícola! 🖖