Protection des adresses e-mail via SVG, à utiliser à la place de JavaScript

 (rouninmedia.github.io)
4 points par GN⁺ 2024-05-14 | 1 commentaires | Partager sur WhatsApp

  • Technique de protection des adresses e-mail à l’aide de SVG

    • Voir la démo réelle via le lien SVG-based Email Protection
    • Les adresses e-mail exposées publiquement sur une page web doivent généralement être protégées des bots collecteurs d’e-mails
    • Jusqu’à présent, diverses techniques combinant HTML, CSS et JS ont été utilisées, chacune avec ses avantages et ses inconvénients
    • Les approches utilisant JS sont plus sophistiquées que les alternatives basées sur HTML/CSS, mais ont l’inconvénient de rendre JS indispensable à la page
    • JS peut améliorer une page, mais dans l’idéal, toutes les fonctionnalités essentielles devraient fonctionner même si JS est désactivé
    • La technique présentée ici utilise une approche basée sur SVG, totalement différente des méthodes classiques de protection d’e-mails reposant sur CSS, JS ou CSS+JS

  • 3 avantages de la technique de protection des adresses e-mail basée sur SVG

    1. Fonctionne même si JavaScript est désactivé
      • Le principal avantage de l’approche basée sur SVG est qu’elle ne nécessite absolument pas de JS
      • Même si le visiteur désactive JS, l’adresse e-mail affichée sur la page reste utilisable, accessible et protégée, tout en restant cachée aux spambots
    2. Utilisation possible d’un lien mailto: standard
      • Contrairement aux autres méthodes sans JS (insertion de commentaires HTML, masquage d’éléments, etc.), l’approche basée sur SVG permet d’utiliser un lien mailto: standard
      • Toutefois, le lien mailto: se trouve dans un document SVG externe, et non dans le document HTML qui le référence
    3. Le contenu est masqué comme une image, tout en restant copiable comme du texte
      • Un SVG intégré ressemble à une image, mais n’en est pas une
      • En tant qu’élément de remplacement intégré dans un document hypertexte, un SVG peut masquer une adresse e-mail aux spambots aussi efficacement qu’une image
      • Mais à proprement parler, un SVG n’est pas une véritable image, c’est un document graphique
      • Ainsi, contrairement à une image, il est possible de faire un clic droit sur l’élément `` d’un SVG intégré pour copier l’adresse e-mail

  • Implémentation du code

    • L’exemple se compose de 2 fichiers
    • Le document graphique SVG est intégré dans le document HTML hypertexte à l’aide de la balise ``
    • Le même document graphique SVG peut être intégré une ou plusieurs fois dans le document hypertexte
    • Exemples de code inclus pour le fichier HTML et le fichier SVG

  • Considérations d’accessibilité

    • Il est important de veiller à ce que cette configuration reste aussi accessible que possible
    • Pour cela, il faut prêter attention aux points suivants dans le document graphique SVG :
      • L’ensemble du document SVG est associé via aria-labelledby au `` du document SVG pour indiquer l’appel à l’action
      • L’élément d’ancrage `` à l’intérieur du SVG possède un aria-label portant le même appel à l’action
      • Le SVG est stylé de façon que, lorsque l’élément d’ancrage reçoit le focus au clavier, ses éléments enfants et `` soient tous deux mis en évidence

L’avis de GN⁺

  • Il s’agit d’une approche originale consistant à intégrer un SVG dans un document HTML afin de masquer une adresse e-mail aux spambots sans dépendre de JS. Cela semble être une technique intéressante qui prend en compte à la fois l’accessibilité et l’utilisabilité.
  • Il faut toutefois garder à l’esprit que, même avec des techniques frontend très sophistiquées, il est impossible de bloquer parfaitement les spambots les plus avancés. C’est une limite qui s’applique à toute solution de sécurité.
  • Pour une adoption en production, des vérifications supplémentaires seront probablement nécessaires concernant l’impact sur le SEO, la compatibilité avec divers navigateurs et appareils, ainsi que les performances.
  • Comme solutions backend de protection des e-mails, on peut aussi envisager reCAPTCHA, la technique du honeypot, etc.
  • C’est une méthode intéressante qui exploite des fonctionnalités avancées de CSS et SVG, mais elle semble encore présenter des contraintes pour un usage en production. Cela reste toutefois une idée amusante à tester au moins une fois pour les développeurs frontend.

À lire aussi

1 commentaires

 
GN⁺ 2024-05-14
Commentaire Hacker News

En résumé, les avis sur la nécessité de protéger une adresse e-mail publiée sur une page web contre les spambots sont les suivants :

  • Certaines personnes publient leur adresse e-mail sur leur site web depuis longtemps, et les filtres anti-spam fonctionnent suffisamment bien pour que le spam ne soit pas un gros problème
  • Les filtres anti-spam fonctionnent bien aussi bien sur Gmail que sur des webmails hébergés par des entreprises locales
  • Environ 15 spams arrivent chaque jour, mais grâce à Purelymail, cela ne pose pas de gros problème
  • Le vrai problème, ce sont plutôt les e-mails transactionnels non pertinents, le spam de newsletters indésirables et les notifications de réseaux sociaux inutilisés
  • De nos jours, les filtres anti-spam sont efficaces, donc publier son adresse e-mail n’augmente pas énormément le spam
  • Recevoir moins d’un spam par jour dans la boîte de réception reste un niveau acceptable
  • Cela peut varier selon le fournisseur de messagerie et le filtre anti-spam, mais personnellement ce n’est pas un problème
  • Avec NoScript sur Firefox, la balise <object> n’est pas rendue, donc cette technique ne fonctionne pas
  • La « protection des e-mails » est non seulement inutile, mais peut même être nuisible
  • Sur des sites lisibles même sans JS, il y a un problème où 1920x1080@60Hz s’affiche comme [email protected]