Proteção de endereços de e-mail via SVG, em vez de JavaScript

 (rouninmedia.github.io)
4 pontos por GN⁺ 2024-05-14 | 1 comentários | Compartilhar no WhatsApp

  • Técnica de proteção de endereços de e-mail usando SVG

    • Para uma demonstração real, veja o link SVG-based Email Protection
    • Endereços de e-mail expostos em páginas web normalmente precisam de proteção contra bots coletores de e-mail
    • Tradicionalmente, têm sido usadas técnicas que combinam HTML, CSS e JS, cada uma com suas vantagens e desvantagens
    • As abordagens com JS são mais sofisticadas do que as alternativas baseadas em HTML/CSS, mas têm a desvantagem de tornar o JS um elemento essencial da página
    • O JS pode melhorar a página, mas, idealmente, todas as funcionalidades essenciais devem continuar funcionando mesmo com o JS desativado
    • A técnica apresentada nesta página usa uma abordagem baseada em SVG totalmente diferente das técnicas existentes de proteção de e-mail com CSS, JS ou CSS+JS

  • Três vantagens da técnica de proteção de endereços de e-mail baseada em SVG

    1. Funciona mesmo com o JavaScript desativado
      • A principal vantagem da abordagem baseada em SVG é que ela não exige JS algum
      • Mesmo que o visitante desative o JS, o endereço de e-mail exibido na página continua utilizável, acessível e protegido, permanecendo seguro e oculto de spambots
    2. Permite usar links mailto: padrão
      • Ao contrário de outras abordagens sem JS (injeção de comentários HTML, ocultação de elementos etc.), a abordagem baseada em SVG permite o uso de links mailto: padrão
      • No entanto, o link mailto: existe dentro de um documento SVG externo, e não dentro do documento HTML que faz a referência
    3. Oculta o conteúdo como uma imagem, mas ainda permite copiar como texto
      • Um SVG embutido é semelhante a uma imagem, mas não é uma imagem
      • Como um elemento substituto embutido em um documento de hipertexto, o SVG pode ocultar o endereço de e-mail de spambots com a mesma eficácia de uma imagem
      • Porém, em sentido estrito, o SVG não é uma imagem real, e sim um documento gráfico
      • Por isso, diferentemente de uma imagem, é possível clicar com o botão direito no elemento `` do SVG embutido para copiar o endereço de e-mail

  • Implementação em código

    • O exemplo é composto por 2 arquivos
    • O documento gráfico SVG é embutido no documento de hipertexto HTML usando a tag ``
    • O mesmo documento gráfico SVG pode ser embutido no hipertexto uma ou várias vezes
    • Inclui exemplos de código para os arquivos HTML e SVG

  • Considerações de acessibilidade

    • É importante garantir que essa configuração permaneça o mais acessível possível
    • Para isso, no documento gráfico SVG, é preciso observar o seguinte:
      • O documento SVG inteiro usa aria-labelledby com base no `` do documento SVG para indicar a chamada à ação
      • O elemento âncora `` dentro do SVG possui um aria-label com a mesma chamada à ação
      • O SVG é estilizado para que, quando o elemento âncora recebe foco por tabulação, tanto o elemento filho quanto `` sejam destacados

Opinião do GN⁺

  • É uma abordagem incomum que embute SVG em um documento HTML para ocultar endereços de e-mail de spambots sem dependência de JS. Parece ser uma técnica interessante que considera acessibilidade e usabilidade ao mesmo tempo.
  • No entanto, vale lembrar que, por mais sofisticada que seja a técnica de front-end, ela não consegue bloquear perfeitamente os spambots mais avançados. Essa é uma limitação aplicável a qualquer solução de segurança.
  • Para adoção prática dessa técnica, provavelmente será necessária uma validação adicional quanto ao impacto em SEO, compatibilidade com diferentes navegadores/dispositivos, desempenho etc.
  • Como soluções de back-end para proteção de e-mail, também pode valer a pena considerar reCAPTCHA, técnicas de honeypot e outras opções.
  • É uma abordagem interessante que aproveita recursos avançados de CSS e SVG, mas ainda parece ter restrições para aplicação prática. Ainda assim, para desenvolvedores front-end, é uma ideia divertida que vale a pena testar ao menos uma vez.

Leituras relacionadas

1 comentários

 
GN⁺ 2024-05-14
Comentários do Hacker News

Em resumo, as opiniões sobre a necessidade de proteger endereços de e-mail publicados em páginas da web contra bots de spam são as seguintes:

  • Há muito tempo publicam endereços de e-mail em sites, mas os filtros de spam funcionam bem e o problema de spam não é grande
  • Tanto o Gmail quanto o webmail hospedado por empresas locais fazem uma boa filtragem de spam
  • Chegam cerca de 15 e-mails de spam por dia, mas graças ao Purelymail isso não chega a ser um grande problema
  • O verdadeiro problema são e-mails transacionais irrelevantes, lixo de newsletters, spam e notificações de redes sociais não usadas
  • Hoje em dia os filtros de spam funcionam bem, então publicar um endereço de e-mail não aumenta muito o spam
  • Receber menos de 1 e-mail de spam por dia na caixa de entrada é um nível aceitável
  • Pode variar dependendo do provedor de e-mail e do filtro de spam, mas pessoalmente isso não é um problema
  • No Firefox com NoScript, a tag <object> não é renderizada, então essa técnica não funciona
  • “Proteção de e-mail” não é apenas inútil, como pode até ser prejudicial
  • Em sites legíveis mesmo sem JS, há o problema de 1920x1080@60Hz aparecer como [email protected]