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

 (rouninmedia.github.io)
4 puntos por GN⁺ 2024-05-14 | 1 comentarios | Compartir por WhatsApp
  • Para ocultar una dirección de correo pública de los bots recolectores de spam y aun así permitir que los visitantes contacten de inmediato, se usa un método que coloca el texto del correo y el enlace mailto: dentro de un SVG
  • La protección basada en JavaScript puede ser más sofisticada, pero preocupa que la función de contacto en sí tenga una dependencia de JS
  • Este enfoque inserta un documento SVG externo en el HTML mediante y coloca el enlace real no en el HTML, sino en el elemento dentro del SVG
  • El SVG ayuda a ocultar el contenido como si fuera una imagen, pero como usa el elemento ``, el visitante puede copiar la dirección de correo
  • No es una solución para bloquear incluso a los spambots sofisticados, pero sí resulta útil para reducir el riesgo de exposición ante scripts simples de recolección de correos

Cómo ocultar una dirección de correo con SVG

  • Las direcciones de correo públicas son fáciles de exponer a spambots recolectores de emails, por lo que necesitan una capa de protección
  • Las técnicas de protección más comunes combinan HTML, CSS y JavaScript, pero usar JavaScript hace que la función de contacto dependa del entorno de ejecución obligatorio de la página
  • El método con SVG gestiona tanto la visualización del correo como el funcionamiento del enlace sin usar JavaScript en absoluto
  • Incluso si JavaScript está desactivado, el visitante puede usar la dirección de correo mostrada en la página, y para los spambots queda menos expuesta de forma directa que el texto HTML normal
  • Como otras técnicas de protección basadas en frontend, no puede proteger por completo una dirección de correo pública frente a spambots persistentes y sofisticados
  • Demo en vivo: SVG-based Email Protection

Implementación en HTML y SVG

  • El documento HTML inserta un archivo SVG externo mediante ``
  • El mismo documento gráfico SVG puede insertarse una o varias veces dentro del HTML
  • El HTML de ejemplo asigna a la clase .svg-email-protection los estilos width: 180px, height: 24px y vertical-align: middle, y en el cuerpo carga el archivo SVG con ``
  • El archivo SVG es un documento `` con viewBox="0 0 200 24", y dentro contiene el texto del correo y el enlace mailto:myemail@mydomain.tld
    • Dentro de van y ``
    • En `` se muestra myemail@mydomain.tld
    • En los estados rect:hover y a:focus cambian el color de fondo, color del texto, grosor, subrayado y estilo de sombra

Accesibilidad y materiales de referencia

  • Todo el documento SVG usa aria-labelledby apuntando a , y el dentro del SVG incluye un aria-label con la misma llamada a la acción
  • Cuando el foco de tabulación del teclado llega al ancla dentro del SVG, y se resaltan juntos para mostrar el estado de foco
  • Materiales relacionados:

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-05-14
Opiniones en Hacker News

  • Me cuesta creer que sea así

    • Sí. Recuerdo que a principios de los 2000, si publicabas tu email en la web, el spam realmente aumentaba, y las técnicas de ofuscación de emails ayudaban bastante
      Pero, en lo personal, desde alrededor de 2015 ya no noté ninguna diferencia, y ni siquiera aumentó el spam que había que filtrar
      Hoy las empresas pueden vender listas de usuarios o puedes comprar listas enormes de emails filtradas de servidores comprometidos, así que rastrear la web para recolectar emails es probablemente una de las formas menos eficientes de enviar spam
    • El año pasado puse direcciones de email tal cual en el footer de dos sitios web que hice, y ninguno ha recibido ni un solo spam desde entonces
      Ambos sitios tienen miles de visitantes y son sitios populares que indexan los motores de búsqueda y los bots de IA
    • Pienso exactamente lo mismo. En cambio, una dirección de email que usaba en Usenet alrededor de 1999-2001 sigue recibiendo spam constantemente
      Las direcciones de email que publiqué en sitios web ni siquiera llegan a la carpeta de spam
      Algunas listas de correo parecen generar direcciones de Gmail adivinándolas como si fueran ataques de diccionario, con el formato NOMBRE.APELLIDO o combinaciones de 1 a 10 caracteres
      Aun así, el spam que llega a direcciones tipo domain@domain.com es poquísimo, como un mensaje al año
      En general, el volumen de spam por email también bajó mucho, y el spam que se envía hoy parece venir de una mezcla de estafadores 419 y aspirantes a estafadores engañados que compraron listas de emails de hace 20 años
    • La ofuscación de direcciones de email se siente como una reliquia del pasado. Metodológicamente nunca fue muy sólida, pero se popularizó y parece haber sobrevivido como una especie de culto cargo
    • En lo personal, aunque el spam no sea visible, prefiero que mi email no sea recolectado si es posible
      No digo que sea un problema grave de privacidad o seguridad, pero es una cuestión de preferencia

  • Mi dominio es un .com registrado desde hace 24 años, y la dirección de email está puesta tal cual en una etiqueta H3 al inicio de la primera pantalla
    El spam en esa dirección no es un problema. Recibo unos 15 al día contando la carpeta de correo no deseado, y gracias a Purelymail está bien
    El verdadero problema son los correos transaccionales que no tienen nada que ver con transacciones, los emails promocionales tipo newsletter y las redes sociales que siguen mandando avisos porque no las uso

    • 15 spams al día me parece bastante. Creo que yo habría bloqueado la dirección con menos que eso
    • Lo más grande son las “redes sociales que se quejan de que no las uso”. Los correos que manda Facebook pidiéndome que inicie sesión son casi más que todo el otro spam
      Hace unos 7 años que no uso la cuenta; ya deberían haberse dado cuenta
    • Tengo varios dominios antiguos registrados a fines de los 90, y en algunos todavía queda mi email como mailto
      En unos casi no hay spam, en otros llegan decenas por día. SpamAssassin hace muy bien el cacheo del spam

  • A diferencia de la frase “aunque el visitante desactive JavaScript, la dirección de email mostrada en la página sigue siendo usable”, la configuración predeterminada de NoScript en Firefox no renderiza la etiqueta y la reemplaza por un marcador de posición, así que esta técnica no funciona ahí
    https://imgur.com/2tCAgAf

    • uBlock Origin también puede bloquear JavaScript. Tiene un botón cómodo en el menú de la extensión
    • Eso es otro tema, así que no entiendo bien por qué traes ese punto
    • En Chromium pasa lo mismo

  • No hay razón para que esta técnica en sí no pueda ser accesible, pero el ejemplo del artículo es realmente malo
    El artículo pone “Email us!” como etiqueta del svg y del elemento a, lo que hace que la dirección de email real quede oculta para el lector de pantalla
    Usar etiquetas aria de esa forma es una muy mala práctica. Salvo que haya una razón muy especial, los usuarios de lectores de pantalla deberían tener la misma experiencia que los demás; y si crees que esa razón es suficiente, lo más probable es que estés equivocado
    La forma correcta es poner la dirección de email real en la etiqueta

    • ¿No es justamente el punto de esto no poner la dirección de email en el documento en un formato legible por máquinas?
    • También puede afectar a software de dictado por voz como Dragon
      Si el usuario dice “Click myemail@mydomain.tld”, es posible que el navegador exponga el texto del enlace como “Email us”, por lo que el enlace no se activaría
      Aunque no sé si Dragon puede activar enlaces dentro de un SVG

  • Yo hago esto: reanospaml@maisjsl.com
    Igual recibo “spam”, pero son propuestas B2B perfectamente alineadas con el tema del sitio, así que parece que alguien las recolectó manualmente

    • Si el scraper usa un navegador headless, creo que podría saltarse este método
      Aunque correr navegadores headless para recolectar emails es relativamente costoso, así que puede que ese spam no venga del sitio

  • Como ya dijeron otros, “proteger” emails no solo es inútil, sino que en la práctica también puede ser perjudicial
    Hay bastantes sitios donde la mayoría del contenido se lee bien sin JavaScript, pero cadenas como “1920x1080@60Hz” se muestran literalmente como “[email protected]”

    • ¿Tienes algún ejemplo que se pueda ver ahora? Suena demasiado absurdo, nunca me tocó verlo

  • Me pregunto si algo así realmente tiene sentido. Es un experimento interesante, pero si el objetivo es evitar a los spammers, es una completa pérdida de tiempo
    Es como publicar información para todo el mundo y aun así esperar que somehow solo sea accesible para “la gente buena”
    A menos que cambies la dirección de email al menos una vez al mes, basta con que alguien le pase tu contacto a otra persona, lo meta en una base de datos/CRM, o que un servicio sea vulnerado, para que esa dirección termine en una lista y eventualmente circule entre spammers de todo el mundo
    Si usas ese email de forma constante, la probabilidad de que pase algo así es prácticamente cercana al 100%
    Si ocultar el email a los scrapers realmente funcionara, el spam no existiría. Nunca publiqué mi contacto personal en ningún lado y aun así recibo decenas de spams por semana, pero todos se filtran como spam, así que no es grave

  • Un amigo mío es realmente muy bueno, y está haciendo prácticamente imágenes responsivas con SVG que incluye JavaScript
    Se adaptan programáticamente según el tamaño, y es bastante interesante
    El simple hecho de que puedas meter JavaScript dentro de un SVG me parece todavía subutilizado y, al mismo tiempo, algo peligroso

    • ¿SVG no es responsivo por defecto? No entiendo bien en qué ayuda JavaScript dentro del SVG
    • Súper interesante. Si tu amigo tiene un GitHub o un sitio donde muestre este trabajo, ¿podrías compartir el enlace?
      Soy ingeniero backend, así que técnicamente está bastante lejos de mi área, pero se ve muy genial
    • Esto se conoce desde hace bastante en la comunidad de seguridad

  • Dejé de usar métodos así. Los filtros de spam de hoy son lo suficientemente buenos como para que publicar una dirección de email sin ofuscar no parezca aumentar el spam
    Otra cosa son otras fuentes de spam, como empresas pésimas que tienen mi email por razones legítimas y aparentemente se lo venden a terceros
    En general entra menos de 1 spam al día a mi bandeja de entrada, y eso me parece aceptable
    Claro, puede variar según el proveedor de email y el filtro de spam, así que dependerá de cada persona, pero para mí no fue un problema

  • El email sigue estando en texto plano dentro de un documento XML referenciado desde el código fuente de la página

    • Aun así, si haces una consulta como document.querySelectorAll('a'), el resultado es distinto. Muchas técnicas de scraping usan este enfoque, así que sirve como primera línea de defensa
      Eso sí, si hay un navegador headless para scraping, y sobre la página hace fetch de la URL actual tal cual, recibe el texto plano y busca emails con regex, puede obtener la dirección. Admito que es un enfoque bastante extraño
      [0]: fetch('./').then((res) => res.text()).then((text) => console.log(text))
    • La idea es que los bots de spam no van a parsear hasta el SVG para buscar direcciones de email, sino que solo miran el HTML de la página
      Aunque no sé qué tan efectivo sea eso realmente en el entorno moderno de protección contra spam
    • Se siente como envolver algo inútil para hacerlo parecer inteligente