Evitar SPAM en enlaces al correo

Protección anti-spam en enlaces de email (mailto dinámico con JavaScript)

Objetivo

Evitar que los bots capturen direcciones de correo electrónico desde el código HTML, generando el enlace mailto: dinámicamente mediante JavaScript.
Este sistema impide que la dirección de email aparezca visible en el código fuente de la página.

¿Por qué usar este método?

Cuando se publica un enlace así:

<a href="mailto:info@midominio.com">Contactar</a>


La dirección queda visible en el HTML y puede ser capturada por bots de spam. Con este método cconseguiremos:

  • El email no aparece en el código fuente
  • Se reduce el riesgo de spam
  • Se mantiene la funcionalidad normal del enlace

Paso 1: Configurar el enlace en el editor

En el CMS, crear el enlace con la siguiente estructura:

<a href="#"
   class="emailLink"
   data-user="info,ventas"
   data-domain="midominio.com"
   data-subject="Alta Redsys"
   data-body="Me gustaría darme de alta en Redsys">
   Solicitar alta
</a>

Explicación de los atributos:

href="#": Enlace neutro (será interceptado por JavaScript)

class="emailLink": Identifica los enlaces que usarán este sistema

data-user: Parte anterior al @, puedes añadir varios usuarios separador por comas.

data-domain: Dominio del email

data-subject: Definimos el título del mensaje (opcional, puedes dejarlo en blanco)

data-body: Definimos el contenido inicial del mensaje (opcional, puedes dejarlo en blanco)

Paso 2: Añadir el script JavaScript

Este script debe estar incluido en la plantilla general o antes del cierre de :

document.addEventListener("DOMContentLoaded", function() {

  document.querySelectorAll(".emailLink").forEach(function(link) {

    link.addEventListener("click", function(e) {
      e.preventDefault();

      var usuarios = this.dataset.user.split(",");
      var dominio = this.dataset.domain;

      var emails = usuarios.map(function(user) {
        return user.trim() + "@" + dominio;
      }).join(",");

      var subject = encodeURIComponent(this.dataset.subject || "");
      var body = encodeURIComponent(this.dataset.body || "");

      var mailto = "mailto:" + emails +
                   "?subject=" + subject +
                   "&body=" + body;

      window.location.href = mailto;

    });

  });

});

Cómo funciona

  1. El usuario hace clic en el enlace.
  2. El script recoge los valores data-user y data-domain.
  3. Se construyen dinámicamente la dirección el subject y el cuerpo del mensaje (si proceden estos dos últimos) y se unifican en una sola variable.
  4. Se ejecuta el mailto:
  5. La dirección nunca estuvo visible en el HTML original.

Uso con múltiples emails en una misma página

Se pueden añadir tantos enlaces como se necesiten:

<a href="#" class="emailLink" data-user="ventas" data-domain="midominio.com">Ventas</a>

<a href="#" class="emailLink" data-user="soporte" data-domain="midominio.com">Soporte</a>

No es necesario modificar el script.

Recomendaciones

  • No escribir nunca el email completo en el HTML.
  • Mantener el script en la plantilla global para evitar duplicaciones.
  • Si se desea mayor seguridad, combinar con formulario de contacto.

Verificación

Para comprobar que funciona correctamente:

  1. Abrir la página.
  2. Ver código fuente.
  3. Confirmar que no aparece ninguna dirección completa tipo usuario@dominio.com.