case
27Jul/092

Cheeky little tips that will help against email harvesting

Prevent email address harvesting, image downloading, and image theft by using CSS Pseudo Elements in conjunction with the Content property. This is a pure HTML/CSS solution to the problems of email harvesting and image theft with one common method.

There is a little known feature of CSS called Pseudo Elements that allows for some special effects to be applied to elements. Using pseudo elements it is possible to add content before or after an element.

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
	.demodiv{
    	     display:inherit;
	}
	.demodiv:before{
		content:"myemail@example.com";
	}
</style>
 
<div class="demodiv">&nbsp;</div>

This will output: myemail@example.com
You can also use as content url('someimage.jpg'); to display images this way. A bit more detailed at amatoc.com

Another way to mask emails with css power:

1
2
3
4
5
6
<style type="text/css">
span.test {
     direction: rtl; unicode-bidi:bidi-override;
}
</style>
<span class="test">moc.tset@tset</span>

The CSS reverses the direction of the text, so you write your email backwards, the CSS sorts it out so it displays fine on your website, but this way, ’spam bots’ can’t read your email!

Comments (2) Trackbacks (0)
  1. It’s not that hard to make crawlers scan css files or anything else, you just have to make the crawler interpret the html so it knows to read the css as well. It’s a good measure but it can be bypassed.

    IMO the best option is to use images to display the email or to reverse the letters via css so the email is moc.xxx@xd0c and it will be displayed on the page as c0dx@xxx.com.

  2. I cannot help but notice that a portion of this is quoted directly from my site.
    I do not mind my site being quoted here, but I would appreciate a link or credit in the future.


Leave a comment


CommentLuv badge

*

No trackbacks yet.