E-mail address protection: HTML/CSS tricks

Version 2.0 – 02.05.2007
Adrian Kousz

Text direction
Enities
Display: none
HTML comments
Splitting with CSS
← Back to main

The advantage of all the described methods is that the e-mail address is shown in plain text.
Because of that, it’s rather unsafe to use these methods, but if you combine them all, the harvesters would need a complex parser (which would take too much time to filter the addresses).
All these methods have a common disadvantage (except the enities): the address can’t be made clickable. This is, because the attribute value of href="" is CDATA.

Text direction

CSS2
24-03-98
<span style="direction:rtl; unicode-bidi:bidi-override">moc.liam@elpmaxe</span> Disadvantage: When copied, it could be pasted in the wrong direction.

Enter your mail: (no phishing) ;-)
Reversed:

Enities

HTML
2.0
&#101;&#x78;&#97;&#x6D;&#112;&#x6C;&#101;&#x40;&#109;&#x61;&#105;&#x6C;&#46;&#x63;&#111;&#x6D; As you can see, I used decimal and hex notation alternating.
You can also make it clickable: <a href="&#109;&#x61;&#105;&#x6C;&#116;&#x6F;&#58;&#x65;&#120;&#x61;&#109;&#x70;&#108;&#x65;&#64;&#x6D;&#97;&#x69;&#108;&#x2E;&#99;&#x6F;&#109;">E-mail</a>

Enter your mail: (no phishing) ;-)
Encoded:

Display: none

CSS example@<span style="display:none">garbage</span>mail.com

HTML comments

HTML example<!-- >@. -->@<!-- >@. -->mail<!-- >@. -->.<!-- >@. -->com Using the characters > @ . in the comment tag the spider is even more confused.

Splitting with CSS

CSS2
28-01-98
In CSS declaration: #mail:after {content: 'mail.com'}
In body: <span id="mail">example@</span>
Disadvantages:
– The text may not be selectable
– Doesn't work with Internet Explorer (neither 6 nor 7)

© Copyright Adrian Kousz 2007