Tutorial: Schutz der E-Mail-Adresse mit HTML

Last Updated on 12 Jahren by TmoWizard

(Edit by TmoWizard am 26.07.2013: Ich habe den ASCII-Code nun als Zitat eingefügt und für kleinere Monitore mit Leerzeichen versehen, damit ein vernünftiger Zeilenumbruch stattfindet! Siehe auch Text an entsprechender Stelle.)

Hallo zusammen!

 

Heute möchte ich euch eine sehr einfache Methode zeigen, wie man auf dem eigenen Blog oder der eigenen Website seine E-Mail-Adresse verschleiern kann. Und zwar so, daß sie trotzdem weiterhin aufgerufen werden kann! Diese sieht Methode habe ich z. B. in meinem Impressum angewendet.

Die Adresse sieht zwar völlig normal aus, aber seht euch mal den Quelltext der Site an! Dort werdet ihr sie nämlich nicht finden, ebenso wenig wie hier in diesem Artikel. ;-)

Eigentlich ist das ein ganz simpler Trick, ihr benötigt dafür nur eine ASCII Zeichentabelle und einen einfachen Texteditor, bei Kubuntu z. B. Kate. In WordPress stellt man den Editor einfach auf „HTML“ ein.  Hierbei kann ich z. B. die oben verlinkte Tabelle von HaWe MEDIEN GmbH (Edit: diese Tabelle existiert leider nicht mehr! :cry: ) SELFHTML empfehlen, die ich selbst verwendet habe.

 

Als Beispiel verwende ich hier meine weiter oben angesprochene Mail-Adresse aus dem Impressum, da ich genau für solche Zwecke lokal ein einfaches Text-Dokument vorbereitet habe! :mrgreen:

Im Quelltext sieht diese Adresse folgendermaßen aus:

<a href=“mailto: &#116; &#109; &#111; &#119; &#105; &#122; &#97; &#114; &#100; &#64; &#97; &#114; &#99; &#111; &#114; &#46; &#100; &#101; ?subject=Feedback%20zu%20TmoWizard &#39;s%20Castle“><span style=“unicode-bidi: bidi-override; direction: rtl;“> &#101; &#100; &#46; &#114; &#111; &#99; &#114; &#97; &#64; &#100; &#114; &#97; &#122; &#105; &#119; &#111; &#109; &#116;</span></a>

Die von mir im Beispiel jeweils vor dem „&“ gesetzten Leerzeichen dienen dem Zeilenumbruch, da die Zeilen sonst zu lang auf kleineren Monitoren sind!

Dies ist wirklich nur meine Mail-Adresse wie sie im Impressum steht! Wie ist das also zu erklären?

Nehmen wir dazu einmal die nach „mailto:“ stehende Zeichenfolge „&#116;“. Laut der Tabelle ist dies also der Buchstabe „t“, der erste Buchstabe meiner Mailadresse! Ein Browser mach nun nichts anderes und übersetzt diesen ASCII-Code in eine für den Menschen lesbare Sprache.

Nun ist es natürlich ein Unding, wenn man das von Hand machen muß! Aber wir sitzen ja vor dem Computer und haben das Internet zur Verfügung! Folglich nehmen wir ganz einfach den Text 2 ASCII Konverter zu Hilfe! Dort tippt man den gewünschten Text (in unserem Fall die Mail-Adresse) ein, drückt auf den Button [Text nach ASCII konvertieren] und schon sehen wir das Ergebnis. Das brauchen wir dann nur noch auf unsere Site im HTML-Modus übertragen.

„href“ und „mailto:“ erkläre ich hier jetzt nicht! Wer mehr über HTML erfahren möchte dem empfehle ich weiter oben schon folgende Website:

SELFHTML

 

Ich wäre allerdings nicht TmoWizard, wenn ich es dabei belassen würde! :twisted:

Sehen wir uns also den zweiten Teil an, denn mit diesem hat es eine besondere Bewandtnis. Das ist nämlich genau der Text, der am Ende angezeigt werden soll!

Dazu sehen wir uns nun den Bereich zwischen „<span“ (das abschließende „>“ kommt nach den speziellen Befehlen!) und „</span>“ genauer an. Dort wird nämlich der Style des dargestellten Textes festgelegt und das ist sehr wichtig!

Als erstes steht dort „unicode-bidi:“. Dieser steuert zusammen mit „direction:“ die Flußrichtung des Textes und das kann man sich natürlich zu Nutze machen! :mrgreen:

Dort steht nun folgender Befehl: „unicode-bidi: bidi-override;“. Dieser gibt an, daß der zwischen „>“ und „</span>“ stehende darzustellende Text mit sich selbst überschrieben werden soll. Und zwar in die Flußrichtung, die bei „direction:“ angegeben ist!

Dabei gibt es natürlich zwei Möglichkeiten: „ltr“ und „rtl“. Ersteres ist eigentlich Standard und bedeutet left to right, also von links nach rechts. Das zweite bedeutet aber right to left, von rechts nach links!

Sehen wir also den darzustellenden Text an. Dieser beginnt mit „&#101;“, was laut unserer Tabelle ein „e“ darstellt.

Ei der Dauz, in der Mail-Adresse gibt es aber nur ein „e“ und das ist am Schluß! Es ist nämlich das „e“ von „.de“.

Ich habe folglich den darzustellenden Text, also meine Mail-Adresse, rückwärts angegeben! Auf die deutsche Sprache umgesetzt lautet also der von mir verwendete Befehl ungefähr so:

„Du nimmst dir nun diese darzustellenden ASCII-Zeichen, liest sie von rechts nach links, übersetzt sie in eine für den Menschen lesbare Sprache und stellst das Ergebnis von links nach rechts geschrieben auf dem Monitor dar!“

 

Einen Haken gibt es allerdings an dieser Geschichte: Das funktioniert nur mit einem normalen Texteditor oder bei WordPress eben im HTML-Modus des Editors! Sobald man in WordPress den Editor auf „Visuell“ umstellt führt dieser den Befehl aus und die Arbeit mit dem ASCII-Code ist zunichte!

Aus diesem Grund habe ich mir wie weiter oben im Artikel erwähnt ein einfaches Textdokument erstellt, welches ich bei Bedarf einfach mit meinem lokalen Editor öffne und das Ganze dann einfach mit copy und paste an der gewünschten Stelle einfüge.

 

Natürlich ist das nur ein ganz einfacher Schutz, der aber trotzdem ziemlich eindrucksvoll ist. Ihr könnt es ja mal selbst versuchen und mir dann einen Kommentar hier hinterlassen, ich würde mich sehr über eure Ergebnisse freuen!

 

Grüße nun aus den geheimen Gängen in TmoWizard’s Castle zu Augsburg

Sendet euch wie immer

Euer Zauberadmin

Mike, TmoWizard Zaubersmilie

CC BY-NC-SA 4.0 Tutorial: Schutz der E-Mail-Adresse mit HTML von TmoWizard ist lizenziert unter Creative Commons Namensnennung-NichtKommerziell-Weitergabe unter gleichen Bedingungen 4.0 international.

13 Replies to “Tutorial: Schutz der E-Mail-Adresse mit HTML”

  1. Hallo Mike,

    es gibt dann auch noch die Möglichkeit eines Kontaktformulars, wie ich es in meinem Blog verwende. Aber – das muss ich einschränken – ist es auch nicht so ganz einfach, ein Kontaktformular zu erstellen und einzubinden. Das habe ich seinerzeit bei meinem Kontaktformular gemerkt – bis zur Vollendung bedurfte es mehrerer Emails.

    Lieben Gruß
    von Gerhard

    1. Hi Gerhard,

      solche Formulare gibt es für WordPress als fertige Plugins, aber das wollte ich nicht! Auf diese Art wird das normale Standardmailprogramm aufgerufen, sowas ist ja eigentlich auf jedem Rechner installiert!

      Das mag zwar einigen Leuten nicht gefallen, aber ich habe meine Mails lieber hier auf meinem Computer gespeichert. Da sehe ich auch, ob eine Mail gesendet wurde oder nicht.

      Grüße aus Augsburg

      Mike, TmoWizard

  2. hätte ich das vorher gewusst, hätte ich mir tonnen von spam erspart. leider ist es dafür nun im grunde zu spät, ist meine geschäftsmailadresse doch schon bekannt wie ein bunter hund bei den einschlägigen datenbanken.
    1. Hallo nico,

      hier verstehe ich nun etwas nicht! Gerade im geschäftlichen Bereich sollte doch auf den Schutz seiner Mail-Adresse geachtet werden, auch wenn man seine Sites selber erstellt!

      Allerdings muß ich dazu sagen, daß ich diesen Schutz selbst bei großen Sites vermisse. Sogar bei vielen sogenannten „Webmastern“ habe ich so einen Schutz eher selten gesehen. Viele „verstümmeln“ ihre Mailadresse nicht einmal auf so einfache Arten wie z. B. „name [at] domain [dot] com“, was ebenfalls ein relativ guter Schutz ist.

      Ich habe die oben beschriebe Technik verwendet, da dadurch weiterhin mit einem Klick auf die Adresse automatisch das Mail-Programm starten kann, so daß der Besucher eine E-Mail in seiner ihm gewohnten Weise schreiben kann. Bei einer Verstümmlung der Mail-Adresse ist das nicht mehr möglich, der Besucher muß die mühselig von Hand eingeben.

      Grüße aus TmoWizard’s Castle

      Mike, TmoWizard

  3. also bis zum zweiten Teil war es noch verständlich, dann wurde es kompliziert. Aber die Technik scheint schon recht genial zu sein.

    Obwohl ich mich frage, wenn das ein Browser decodieren kann, ob dann nicht auch ein Spambot dazu in der Lage wäre?

    Ich verwende bei Email-Adressen auch ganz gern Bilder. Diese können ja nicht ausgelesen werden, aber leider auch nicht so benutzt werden, wie in deinem Impressum.

    Muss wohl jeder für sich selbst entscheiden, welche Methode, für ihn am geeignetsten ist.

    1. Hallo Kai,

      also bis zum zweiten Teil war es noch verständlich, dann wurde es kompliziert. Aber die Technik scheint schon recht genial zu sein.

      Ich weiß, daß das kompliziert ist. Einfacher konnte ich es allerdings nicht erklären und andere Artikel darüber habe ich leider nicht gefunden!

      Die Idee ist nur teilweise von mir, der erste Teil stammt von einem Graphik- und Mediendesigner. Zumindest hat er mich auf diese Möglichkeit aufmerksam gemacht.

      Obwohl ich mich frage, wenn das ein Browser decodieren kann, ob dann nicht auch ein Spambot dazu in der Lage wäre?

      Rein theoretisch wäre ein Spambot dazu sicher in der Lage, in der Praxis sieht das jedoch anders aus. Da diese Bots ja nicht auffallen dürfen sind sie im Allgemeinen sehr klein gehalten, damit nicht irgendwie zu viel Speicher verbraten wird. Sie sind dadurch in ihren Funktionen ziemlich eingeschränkt, so daß das eine ziemlich sichere Methode ist. Eine Garantie gibt es dafür natürlich nicht, aber bis jetzt scheint das zu klappen.

      Ich verwende bei Email-Adressen auch ganz gern Bilder. Diese können ja nicht ausgelesen werden, aber leider auch nicht so benutzt werden, wie in deinem Impressum.

      Genau aus dem Grund mache ich das nicht mit den Bildern. Außerdem darfst du für jede Site, auf der du solch ein Bild einfügst extra eines erstellen, damit es zum Design passt! Das war mir dann doch irgendwie zu blöde, also habe ich es auf diese Art geregelt.

      Muss wohl jeder für sich selbst entscheiden, welche Methode, für ihn am geeignetsten ist.

      Jo, stimmt! Andere verwenden dafür ein Kontaktformular, aber das wollte ich auch nicht unbedingt haben.

      Grüße nun aus TmoWizard’s Castle zu Augsburg nach Brandenburg

      Mike, TmoWizard

    1. Hi Kai,

      das war ja mal eine schnelle Antwort! :-D

      ja sehe ich genauso. Ist aber auf jeden Fall ne coole Methode, die ich so noch nicht kannte.

      Ei nun, ich muß meinem Spitznamen „The magic one Wizard“ ja irgendwie bestätigen! :mrgreen:

      Grüße aus TmoWizard’s Castle

      Mike, TmoWizard

  4. Hallo Mike,
    ich dachte eigentlich, dass ich deine Anleitung verstanden habe.
    Allerdings habe ich mir nun gerade mein und auch dein Impressum angeschaut mit FireBug:

    Die ausgelieferte Seite hat im mailto: doch die Adresse im Klartext drin stehen! — Klar, es steht so nicht im Quelltext drin. Aber der Webserver wandelt den nicht gespiegelten ASCII-Code in Text um und liefert aus.

    Wie funktioniert dann der Schutz vor dem Spambot? — Das ergibt für mich keinen Sinn.

    Danke & Gruß,
    Marcus

Schreibe einen Kommentar zu TmoWizard Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Kommentarlinks könnten nofollow frei sein.