Aug. 10, 2011

E-Mail Spamschutz mit CSS

E-Mail-Addressen auf Webseiten werden gerne von Spambots gesammelt. Um das zu vermeiden möchte man sie möglichst so schreiben, dass der Bot nicht versteht dass es eine Addresse ist. Oft wird zum Beispiel die Addresse nur in einem Bild gezeigt.

Hier einmal ein Ansatz wie man einen SPAM-Schutz mit CSS hinbekommt.

HTML-Teil:

NAME<span class="klammeraffe"></span><span class="aet"> ÄT </span>DOMAIN.TLD

CSS-Teil:

span.klammeraffe:before {
    content:"@";
}
span.aet{
    display: none;
}

In modernen Browsern wird vor dem ersten (leerem) Span-Element ein @-Zeichen eingefügt und das zweite Span-Element versteckt. In Textbrowsern wird nichts eingefügt, dafür ist aber das zweite Element sichtbar und statt eines @-Zeichens steht "ÄT" zwischen den beiden Teilen der E-Mail-Addresse.

Kategorien: Tipps Software SPAM
Tagged: E-Mail SPAM CSS Mailaddresse E-Mail-Addresse

4 Kommentare

Kommentare
Aug. 13, 2011 12:38 - Johannes

Danke für den Tipp, da ist auf jeden Fall eine Alternative zu den JavaScript-Methoden

Sept. 18, 2011 02:23 - m

Könnte man sich nicht den klammeraffe-span-tag sparen und einfach

span.aet:before { content:"@"; }

benutzen?

Sept. 18, 2011 11:56 - laxu

Gute Frage, aber Nein leider geht es nicht. Der :before eingefügte Text wird mit "display:none" auch versteckt.

Ich habe es gerade auch erst nocheinmal ausprobiert, da ich beim entwickeln zuerst den klammeraffee-span hatte und dann erst den zweiten Span für Textbrowser und ähnliches hinzugefügt habe.

Sept. 21, 2011 16:12 - Moritz

Danke!

Hatte das '@' bis jetzt einfach ausgeschrieben, also so '(ät)' !

Ich denke deine ist die professionalste Lösung! =)

und deine Captcha ist auch cool :D


Kommentar schreiben