Schutz von E-Mail-Adressen per SVG statt mit JavaScript

 (rouninmedia.github.io)
4 Punkte von GN⁺ 2024-05-14 | 1 Kommentare | Auf WhatsApp teilen

  • Technik zum Schutz von E-Mail-Adressen mit SVG

    • Eine Live-Demo findet sich unter SVG-based Email Protection
    • Öffentlich auf Webseiten sichtbare E-Mail-Adressen müssen in der Regel vor E-Mail-Sammelbots geschützt werden
    • Bisher wurden dafür Verfahren genutzt, die HTML, CSS und JS kombinieren, jeweils mit eigenen Vor- und Nachteilen
    • Ansätze mit JS sind ausgefeilter als HTML/CSS-basierte Alternativen, haben aber den Nachteil, dass JS zu einem unverzichtbaren Bestandteil der Seite wird
    • JS kann eine Seite verbessern, idealerweise sollten jedoch alle wesentlichen Funktionen auch dann funktionieren, wenn JS deaktiviert ist
    • Die hier vorgestellte Methode nutzt einen SVG-basierten Ansatz, der sich grundlegend von bestehenden Techniken zum E-Mail-Schutz mit CSS, JS oder CSS+JS unterscheidet

  • Drei Vorteile der SVG-basierten Technik zum Schutz von E-Mail-Adressen

    1. Funktioniert auch bei deaktiviertem JavaScript
      • Der wichtigste Vorteil des SVG-basierten Ansatzes ist, dass überhaupt kein JS erforderlich ist
      • Selbst wenn Besucher JS deaktivieren, bleibt die auf der Seite angezeigte E-Mail-Adresse nutzbar und zugänglich, ist weiterhin geschützt, sicher und vor Spambots verborgen
    2. Nutzung eines standardmäßigen mailto:-Links möglich
      • Anders als bei anderen Verfahren ohne zusätzliches JS (etwa HTML-Kommentare oder das Ausblenden von Elementen) kann der SVG-basierte Ansatz einen standardmäßigen mailto:-Link verwenden
      • Der mailto:-Link befindet sich allerdings nicht im referenzierenden HTML-Dokument, sondern im externen SVG-Dokument
    3. Inhalt wird wie bei einem Bild verborgen, bleibt aber wie Text kopierbar
      • Eingebettetes SVG ähnelt einem Bild, ist aber kein Bild
      • Als eingebettetes Ersatzelement in einem Hypertext-Dokument kann SVG die E-Mail-Adresse genauso wirksam vor Spambots verbergen wie ein Bild
      • Streng genommen ist SVG jedoch kein tatsächliches Bild, sondern ein Grafikdokument
      • Daher kann man im Gegensatz zu einem Bild per Rechtsklick die ``-Elemente des eingebetteten SVG kopieren und so die E-Mail-Adresse kopieren

  • Code-Implementierung

    • Das Beispiel besteht aus zwei Dateien
    • Das SVG-Grafikdokument wird mit dem ``-Tag in das HTML-Hypertext-Dokument eingebettet
    • Dasselbe SVG-Grafikdokument kann einmal oder mehrfach in den Hypertext eingebettet werden
    • Es sind Codebeispiele für die HTML-Datei und die SVG-Datei enthalten

  • Überlegungen zur Barrierefreiheit

    • Wichtig ist, dass dieses Setup so barrierefrei wie möglich bleibt
    • Dafür sollte im SVG-Grafikdokument auf Folgendes geachtet werden:
      • Das gesamte SVG-Dokument ist über aria-labelledby mit dem SVG-Dokument-`` verknüpft, das die Handlungsaufforderung beschreibt
      • Das Ankerelement `` innerhalb des SVG besitzt ein aria-label mit derselben Handlungsaufforderung
      • Das SVG ist so gestaltet, dass bei Tab-Fokus auf dem Ankerelement sowohl die Kindelemente als auch `` hervorgehoben werden

Meinung von GN⁺

  • Ein ungewöhnlicher Ansatz, bei dem SVG in ein HTML-Dokument eingebettet wird, um E-Mail-Adressen ohne JS-Abhängigkeit vor Spambots zu verbergen. Eine interessante Technik, die sowohl Barrierefreiheit als auch Nutzbarkeit berücksichtigt.
  • Allerdings sollte man beachten, dass selbst ausgefeilte Frontend-Techniken die raffiniertesten Spambots nicht vollständig aufhalten können. Diese Grenze gilt letztlich für jede Sicherheitslösung.
  • Für den praktischen Einsatz dürften zusätzliche Prüfungen nötig sein, etwa zu den Auswirkungen auf SEO, zur Kompatibilität mit verschiedenen Browsern und Geräten sowie zur Performance.
  • Als Backend-Lösungen zum Schutz von E-Mails können zusätzlich auch reCAPTCHA oder Honeypot-Techniken in Betracht gezogen werden.
  • Es ist ein interessanter Ansatz, der fortgeschrittene Funktionen von CSS und SVG nutzt, in der Praxis aber noch Einschränkungen zu haben scheint. Für Frontend-Entwickler ist es dennoch eine spannende Idee, die einen Test wert sein könnte.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-05-14
Hacker-News-Kommentare

Zusammengefasst lauten die Meinungen dazu, ob öffentlich auf einer Webseite angegebene E-Mail-Adressen vor Spam-Bots geschützt werden müssen, wie folgt:

  • Viele haben ihre E-Mail-Adresse schon lange auf ihrer Website veröffentlicht, aber die Spam-Filter funktionieren gut, sodass Spam kein großes Problem ist
  • Sowohl bei Gmail als auch bei lokal von Unternehmen gehostetem Webmail funktioniert die Spam-Filterung gut
  • Es kommen zwar etwa 15 Spam-Mails pro Tag an, aber dank Purelymail ist das kein großes Problem
  • Das eigentliche Problem sind irrelevante Transaktions-E-Mails, Newsletter-Müllspam und Benachrichtigungen von ungenutzten sozialen Netzwerken
  • Heutzutage sind Spam-Filter so gut, dass die Veröffentlichung einer E-Mail-Adresse nicht zu einem nennenswerten Anstieg von Spam führt
  • Weniger als eine Spam-Mail pro Tag im Posteingang ist ein akzeptables Niveau
  • Es kann je nach E-Mail-Anbieter und Spam-Filter unterschiedlich sein, aber persönlich ist es kein Problem
  • Mit NoScript in Firefox wird das <object>-Tag nicht gerendert, daher funktioniert diese Technik nicht
  • „E-Mail-Schutz“ ist nicht nur sinnlos, sondern sogar schädlich
  • Auf Websites, die auch ohne JS gut lesbar sind, gibt es das Problem, dass 1920x1080@60Hz als [email protected] angezeigt wird