{"id":1134,"date":"2011-07-24T12:35:29","date_gmt":"2011-07-24T10:35:29","guid":{"rendered":"http:\/\/hjacob.com\/blog\/?p=1134"},"modified":"2016-12-12T17:03:08","modified_gmt":"2016-12-12T16:03:08","slug":"usability-dau-kompatibler-schutz-der-e-mail-adresse","status":"publish","type":"post","link":"https:\/\/hjacob.com\/blog\/usability-dau-kompatibler-schutz-der-e-mail-adresse\/","title":{"rendered":"Usability: DAU-kompatibler Schutz der E-Mail Adresse"},"content":{"rendered":"

Der permanente Zuwachs von Spam-Mails hat Webmaster dazu gebracht, die E-Mail Adressen auf Webseiten zu verst\u00fcmmeln. Wo fr\u00fcher ein sch\u00f6ner [code lang=“javascript“]<a href="mailto:[EMAIL]"…>[\/code] verwendet wurde, liest man heute Sachen wie service {\u00e4t}\u00a0unseredomain {punkt} com<\/code> – das sch\u00fctzt vielleicht vor Spam Bots (wobei gute Systeme auch eine solche Syntax knacken k\u00f6nnen), ist aber Usability-technisch ein Graus – sowohl f\u00fcr Heavy-User, die die E-Mail Adresse rauskopieren und im Mail Programm korrigieren m\u00fcsen, also auch f\u00fcr die DAUs – die gar nicht erst kapieren, dass es sich dabei um eine E-Mail Adresse handeln soll.<\/p>\n

Kleine Anekdote am Rande – die Fakult\u00e4t der BWL der Uni Marburg hatte auf ihren Seiten die oben beschriebene „Anti-Spam-Syntax“ verwendet, gleichzeitig aber einen Hyperlink mit mailto:<\/code> verwendet (wo nat\u00fcrlich die E-Mail als Klartext drinstand) – der Nutzen der Anti-Spam-Syntax wurde also ad absurdum gef\u00fchrt, weil die Bots nat\u00fcrlich im Source-Code der Page schauen, wo sie dann die Mail im Klartext fanden. Ich habe sie damals auf diese Problematik hingewiesen und gerade habe ich noch mal geschaut, was daraus geworden ist: Personal der Uni Marburg (BWL)<\/a> – das ist dann Usability-technisch der Supergau. <\/p>\n

Wie macht man es richtig?<\/h2>\n

Im wesentlichen kenne ich f\u00fcnf Varianten die E-Mail Adressen auf Webseiten halbwegs vor Spambots zu sch\u00fctzen, wovon allerdings nur 2 halbwegs sicher sind. Hier eine \u00dcbersicht inkl. meiner Einsch\u00e4tzung zu Sicherheit und Usability nach Schulnoten.<\/p>\n\n\n\n\n\n\n\n
Methode<\/th>\nSicherheit<\/th>\nUsability<\/th>\nWartung<\/th>\n
„Anti-Spam-Syntax“
(hallo {at} domain [dot] de)<\/code><\/td>\n		5<\/td>\n4<\/td>\n1<\/td>\n<\/tr>\n
E-Mail als Grafik einbinden<\/td>\n2<\/td>\n6<\/td>\n5<\/td>\n<\/tr>\n
Mail Encryption (Hexdecimal \/ HTML Entities – Beispiel<\/a>)<\/td>\n5<\/td>\n1<\/td>\n4<\/td>\n<\/tr>\n
Email als iFrame + Sperrung durch robots.txt<\/td>\n6<\/td>\n1<\/td>\n4<\/td>\n<\/tr>\n
Javascript Methode<\/td>\n2<\/td>\n1<\/td>\n2<\/td>\n<\/tr>\n<\/table>\n

\nUnterm Strich ist also die L\u00f6sung via Javascript die beste. Also folgt nun eine Anleitung wie man diese umsetzt.<\/p>\n

Mit Javascript E-Mail Adressen verschl\u00fcsseln<\/h2>\n

Das Prinzip ist sehr simpel: Man hat eine Javascript-Funktion, die an den gew\u00fcnschten Stellen die E-Mail Adresse einf\u00fcgt. Dabei wird die Adresse nat\u00fcrlich nicht als Klartext \u00fcbergeben, sondern nur die Bestandteile. Das ganze sieht dann so aus:
\n[code type=“javascript“]
\n<script type="text\/javascript" charset="utf-8">
\n\/\/<![CDATA[
\n\tfunction email(ending, domain, name) {
\n\t\tdocument.writeln(‚<a href="mailto:’+name+’@’+domain+‘.’+ending+’">’+name+’@’+domain+‘.’+ending+'<\/a>‘);
\n\t}
\n\/\/]]>
\n<\/script>
\n[\/code]
\nDiesen Code packt man dann am Besten in eine separate Javascript Datei, die man dann in alle Unterseiten l\u00e4dt.<\/p>\n

An der Stelle, an der man eine E-Mail ausgeben m\u00f6chte, ruft man dann einfach folgenden Code auf:
\n[code type=“javascript“]
\n<script type="text\/javascript" charset="utf-8">
\n\/\/<![CDATA[
\nemail("com", "hjacob", "kontakt");
\n\/\/]]>
\n<\/script>
\n[\/code]
\nUnd schon erscheint die E-Mail Adresse inklusive passenden mailto-Hyperlink. Clean, secure und easy.<\/p>\n

PS: Am Besten die Javascript-Funktion noch etwas ver\u00e4ndern – umso unterschiedlicher, desto sicherer. So kann man ja zum Beispiel den Domain-Namen nicht als Variable verwenden, sondern hardcoded in die Funktion schreiben (macht nat\u00fcrlich nur Sinn, wenn man wirklich nur E-Mail Adressen von dieser einen Domain anzeigen will).<\/p>\n","protected":false},"excerpt":{"rendered":"

Wie ver\u00f6ffentlicht man E-Mail Adressen am Besten auf Webseiten, ohne dass sie direkt von Spam Robots gefischt werden. Inklusive \u00dcbersicht und Tutorial.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[352,13,215,3],"tags":[354,366,19,353,29,118,355,367,386],"_links":{"self":[{"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts\/1134"}],"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=1134"}],"version-history":[{"count":7,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts\/1134\/revisions"}],"predecessor-version":[{"id":1368,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/posts\/1134\/revisions\/1368"}],"wp:attachment":[{"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/media?parent=1134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/categories?post=1134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hjacob.com\/blog\/wp-json\/wp\/v2\/tags?post=1134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}