{"id":8,"date":"2009-06-23T16:05:53","date_gmt":"2009-06-23T14:05:53","guid":{"rendered":"http:\/\/jhmjacob.wordpress.com\/?p=8"},"modified":"2016-12-12T17:03:10","modified_gmt":"2016-12-12T16:03:10","slug":"email-adressen-vor-spam-schuetzen","status":"publish","type":"post","link":"https:\/\/hjacob.com\/blog\/email-adressen-vor-spam-schuetzen\/","title":{"rendered":"E-Mail Adressen vor Spam sch\u00fctzen"},"content":{"rendered":"<p>Jeder hat sie schonmal gesehen, die sch\u00f6nen &#8222;ich [\u00e4t] website [punkt] com&#8220; Verweise auf die E-Mail Adresse eines Schreiberlings. Warum macht er sowas? Nun, dass will ich im Folgenden erz\u00e4hlen und auch wie man es richtig macht.<br \/>\n<!--more E-Mail Adressen vor Spam sch\u00fctzen, so gehts!--><\/p>\n<h3>Warum Mail-Masking?<\/h3>\n<p>Ganz einfach: der Autor will keinen Spam erhalten! Die b\u00f6sen Spammer haben Robots, die tagein tagaus das Web nach E-Mails durchsuchen. Dabei werden sogenannte Regular Expressions verwendet, eine Art Aufbaumuster. Vereinfach gesagt, suchen diese Robots nach Textbausteinen die das Muster &#8222;name@webseite.tld&#8220; haben, wichtig dabei ist vor allem die Position des @-Zeichen und des Punktes. Der Gedanke hinter dem Mail-Masking ist nun, dieses Muster aufzubrechen, indem z.B. kein @ mehr darin vorkommt.<\/p>\n<h3>Falsche Links zerst\u00f6ren die guten Intentionen<\/h3>\n<p>Nun gibt es allerdings einige Webmaster, die diese Technik benutzen und anschlie\u00dfend den Text noch mit einem &#8222;mailto:ich@website.com&#8220; verlinken, so dass der Leser komfortabel daraufklicken kann, um das Mail Programm zu starten. Und hier liegt der Fehler! Wie der erfahrene Webentwickler sicher weiss, suchen die Robots nicht die &#8222;sichtbare&#8220; Website ab, sondern ihren Quelltext. Und dort ist mit dem gesetzten Link <strong>jetzt die E-Mail Adresse im Klartext vorhanden und die Bem\u00fchungen sie unkenntlich zu machen waren vergebens<\/strong>. Selbiges gilt nat\u00fcrlich auch f\u00fcr eine \u00e4hnliche L\u00f6sung, bei der die E-Mail als Grafik eingebunden wird. Grunds\u00e4tzlich ist das nat\u00fcrlich eine tolle Idee (abgesehen von der Tatsache, dass es etwaige Fontprobleme verursachen kann), deren zus\u00e4tzlicher Aufwand aber durch das Setzen des Links in Klartext komplett umsonst war. Solche Patzer geschehen h\u00e4ufiger als gedacht, so war ich erstaunt, dass zum Beispiel die eigentlich gut gemachte Website der Universit\u00e4t Marburg zwar artig die E-Mail Adressen als Grafik anzeigt, dennoch aber seelenruhig die Adresse in Klartext im Quelltext verlinkt &#8211; wenigstens wurde das Problem umgehend nach einem Hinweis behoben.<\/p>\n<h3>Wie geht es richtig?<\/h3>\n<ul>\n<li>\n<h4>Gar keine mailto-Links setzen<\/h4>\n<p>Wer technisch nicht so versiert ist oder keinen Zugriff auf den Quellcode der Website hat, sollte den Link am Besten ganz weglassen. So kann man nichts falsch machen und der Betrachter, der wirklich eine Mail schreiben will, kann die Mail auch kurz per Hand in sein E-Mail Programm eintippen, vorausgesetzt er versteht was mit &#8222;ich [\u00e4t] website [punkt] com&#8220; gemeint ist.<\/li>\n<li>\n<h4>Javascript zum Schutz der Mail verwenden<\/h4>\n<p>Wer Zugriff auf den Code der Website hat, kann mit einem einfachen Javascript die Mails effektiv sch\u00fctzen:<\/p>\n<p>[sourcecode language=&#8220;js&#8220;]<br \/>\n<script type=\"text\/javascript\">\n\/\/ <![CDATA[\nfunction mailto(host,name,tld) {\nwindow.location = 'mailto:'+name+'@'+host+'.'+tld;\n}\n\/\/ ]]>\n<\/script>[\/sourcecode]<\/p>\n<p>Eine verlinkte E-Mail Adresse w\u00fcrde dann in etwa so aussehen:<\/p>\n<p>[sourcecode language=&#8220;html&#8220;]<br \/>\n<a onclick=\"mailto('hjacob','kontakt','com'); return false;\" href=\"#\"><br \/>\nkontakt [\u00e4t-zeichen] hjacob [punkt] com<\/a><br \/>\n[\/sourcecode]<\/p>\n<p>Wie man sieht, enth\u00e4lt der Link die E-Mail Adresse nicht mehr in Klartext, sondern ruft stattdessen die Javascript Funktion &#8222;mailto()&#8220; auf, die dann im Falle eines Klickes des Besuchers, die Adresse zusammensetzt. Nat\u00fcrlich muss die Funktionsdefinition (also der erste Teil) nicht bei jedem Link eingef\u00fcgt werden &#8211; es reicht die Funktion einmal im Dokument zu definieren. Danach kann man einfach immer wieder die mailto() in den Links verwenden (wie im zweiten Teil).<\/li>\n<li>\n<h4>Die ASCII Variante<\/h4>\n<p>Mittels <a rel=\"nofollow\" href=\"http:\/\/de.wikipedia.org\/wiki\/American_Standard_Code_for_Information_Interchange\" target=\"_blank\">ASCII Codes<\/a> kann man Zeichen ersetzen. Der Browser wandelt diese automatisch in die gewohnten Zeichen um. So ist der ASCII Code &#8222;&amp; #64;&#8220; das Equivalent zu dem @-Zeichen. Eine mit ASCII formartierte E-Mail sieht dann so aus:<\/p>\n<p>[sourcecode language=&#8220;html&#8220;]ich@website.com[\/sourcecode]<\/p>\n<p>Wer es ganz hei\u00df mag, kann die E-Mail auch komplett in ASCII schreiben, das s\u00e4he dann so aus:<\/p>\n<p>[sourcecode language=&#8220;html&#8220;]ich@website.com[\/sourcecode]<\/p>\n<p>Allerdings w\u00fcrde ich von dieser L\u00f6sung abraten, da intelligentere Robots diesen Trick leicht erkennen k\u00f6nnen.<\/li>\n<li>\n<h4>Kontakt Formular anstatt Ver\u00f6ffentlichung der Mail<\/h4>\n<p>Diese Variante ist die Sicherste &#8211; da die E-Mail Adresse gar nicht erst ver\u00f6ffentlicht wird. Allerdings setzt sie auch voraus, dass man selbst Herr \u00fcber die Website ist oder zumindest an anderer Stelle ein Kontaktformular zur Verf\u00fcgung hat, auf das man verlinken kann. Das Formular l\u00e4\u00dft den Benutzer einen Text eingeben und generiert daraufhin automatisch eine E-Mail, die dann auch direkt an den Verfasser geschickt wird. Wie so etwas aussieht, kann man bei <a rel=\"nofollow\" href=\"http:\/\/www.kontaktformular.org\/demo.php\" target=\"_blank\">Kontaktformular.org<\/a> sehen.<\/li>\n<\/ul>\n<h3>Zusammenfassung<\/h3>\n<p>Die Formular L\u00f6sung scheint die beste L\u00f6sung zu sein. Was zum einen ein Vorteil ist, ist allerdings auch ein Nachteil: der Besucher sieht die E-Mail Adresse nun gar nicht mehr und ein Kontaktformular verursacht bei einigen Besuchern akuten Brechreiz. So gesehen ist die Variante: E-Mail als Grafik + verlinktes Kontakt Formular meines Erachtens die beste L\u00f6sung, allerdings auch die Aufwendigste. Dabei ist aber wie bereits erw\u00e4hnt zu beachten, dass E-Mail Adressen als Grafiken gespeichert so einige optische Probleme verursachen k\u00f6nnen &#8211; so gibt es unterschiedliche Schriftarten auf den Betriebssystemen, unterschiedliche Behandlung von Schriftgl\u00e4ttung etc. <\/p>\n<p>Wer also Wert auf ein perfektes Aussehen der Schrift legt, sollte die E-Mail Adressen nicht als Grafik speichern. Dann bleibt nur noch die Javascript L\u00f6sung \u00fcbrig.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>E-Mail Adressen korrekt auf Webseiten ver\u00f6ffentlichen ohne direkt Spam zu bekommen &#8211; so gehts! Jeder hat sie schonmal gesehen, die sch\u00f6nen &#8222;ich [\u00e4t] website [punkt] com&#8220; Verweise auf die E-Mail Adresse eines Schreiberlings. Warum macht er sowas?<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,13,3],"tags":[366,24,15,16,19,368,17,26,21,23,22,20,367,25],"_links":{"self":[{"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts\/8"}],"collection":[{"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":11,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions"}],"predecessor-version":[{"id":1382,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions\/1382"}],"wp:attachment":[{"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}