Last Updated on 13 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: t m o w i z a r d @ a r c o r . d e ?subject=Feedback%20zu%20TmoWizard 's%20Castle“><span style=“unicode-bidi: bidi-override; direction: rtl;“> e d . r o c r a @ d r a z i w o m t</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 „t“. 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 „e“, 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 
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”