Protección de direcciones de correo electrónico mediante SVG, en lugar de JavaScript

• Técnica de protección de direcciones de correo electrónico usando SVG

  • Consulta la demo real en el enlace SVG-based Email Protection
  • Las direcciones de correo expuestas públicamente en una página web normalmente necesitan protección contra bots recolectores de correos
  • Tradicionalmente se han usado técnicas que combinan HTML, CSS y JS, pero cada una tiene ventajas y desventajas
  • Los métodos basados en JS son más sofisticados que las alternativas basadas en HTML/CSS, pero tienen la desventaja de que JS se vuelve un elemento esencial de la página
  • JS puede mejorar una página, pero idealmente todas las funciones esenciales deberían seguir funcionando aunque JS esté desactivado
  • La técnica presentada en esta página usa un enfoque basado en SVG totalmente distinto de los métodos tradicionales de protección de correo con CSS, JS o CSS+JS

• 3 ventajas del método de protección de direcciones de correo basado en SVG

  1. Funciona aunque JavaScript esté desactivado
     • La principal ventaja del enfoque basado en SVG es que no requiere JS en absoluto
     • Aunque el visitante desactive JS, la dirección de correo mostrada en la página sigue siendo usable, accesible y protegida, manteniéndose segura y oculta frente a bots de spam
  2. Permite usar enlaces mailto: estándar
     • A diferencia de otros métodos que no requieren JS (como insertar comentarios HTML u ocultar elementos), el enfoque basado en SVG permite usar enlaces mailto: estándar
     • Eso sí, el enlace mailto: no existe dentro del documento HTML de referencia, sino dentro de un documento SVG externo
  3. Oculta el contenido como si fuera una imagen, pero se puede copiar como texto
     • Un SVG incrustado se parece a una imagen, pero no es una imagen
     • Como elemento de reemplazo incrustado en un documento de hipertexto, SVG puede ocultar una dirección de correo de los bots de spam con la misma eficacia que una imagen
     • Pero, estrictamente hablando, SVG no es una imagen real sino un documento gráfico
     • Por eso, a diferencia de una imagen, es posible hacer clic derecho sobre el elemento `` del SVG incrustado para copiar la dirección de correo

• Implementación del código

  • El ejemplo está compuesto por 2 archivos
  • El documento gráfico SVG se incrusta en el documento HTML de hipertexto usando la etiqueta ``
  • El mismo documento gráfico SVG puede incrustarse una o varias veces en el hipertexto
  • Se incluyen ejemplos de código del archivo HTML y del archivo SVG

• Consideraciones de accesibilidad

  • Es importante mantener esta configuración tan accesible como sea posible
  • Para ello, en el documento gráfico SVG hay que prestar atención a lo siguiente:
    • Todo el documento SVG está aria-labelledby por el `` del documento SVG, indicando la llamada a la acción
    • El elemento ancla `` dentro del SVG tiene un aria-label con la misma llamada a la acción
    • El SVG está estilizado para que, cuando el elemento ancla recibe foco de tabulación, se resalten tanto el elemento hijo como ``

Opinión de GN⁺

• Es un enfoque poco común para ocultar direcciones de correo de bots de spam incrustando SVG en documentos HTML sin depender de JS. Parece una técnica interesante que también toma en cuenta la accesibilidad y la usabilidad.
• Sin embargo, conviene tener presente que, por más sofisticada que sea una técnica de frontend, no puede bloquear por completo a los bots de spam más avanzados. Es una limitación aplicable a cualquier solución de seguridad.
• Para adoptarlo en un entorno real, probablemente haría falta validar adicionalmente su impacto en SEO, compatibilidad con distintos navegadores y dispositivos, y rendimiento.
• Como soluciones de backend para proteger el correo, también vale la pena considerar opciones como reCAPTCHA y técnicas de honeypot.
• Es una forma interesante de aprovechar funciones avanzadas de CSS y SVG, pero todavía parece tener limitaciones para aplicarse en producción. Aun así, para desarrolladores frontend es una idea curiosa que vale la pena probar al menos una vez.

[GN⁺]

Comentarios en Hacker News

En resumen, las opiniones sobre si es necesario proteger las direcciones de correo electrónico publicadas en páginas web contra los bots de spam son las siguientes:

• Han publicado direcciones de correo en sus sitios web durante mucho tiempo, pero los filtros antispam funcionan bien, así que el problema del spam no es grave
• Tanto Gmail como el webmail alojado por empresas locales filtran bien el spam
• Llegan alrededor de 15 correos de spam al día, pero gracias a Purelymail no representa un gran problema
• El verdadero problema son los correos transaccionales no relacionados, el spam basura de newsletters y las notificaciones de redes sociales que ya no se usan
• Hoy en día los filtros antispam funcionan bien, así que publicar una dirección de correo no aumenta mucho el spam
• Que llegue menos de 1 correo de spam al día a la bandeja de entrada es un nivel aceptable
• Puede variar según el proveedor de correo y el filtro antispam, pero personalmente no es un problema
• Con NoScript de Firefox, la etiqueta <object> no se renderiza, así que esta técnica no funciona
• La “protección de correo electrónico” no solo no tiene sentido, sino que incluso puede ser perjudicial
• En sitios que se leen bien incluso sin JS, existe el problema de que 1920x1080@60Hz se muestra como [email protected]