Smart email obfuscation using CSS

I wanted to publish my email address on a static webpage, so that people can easily contact me. The problem was that I am afraid of spam bots that crawl the Internet and harvest email addresses from HTML code. Therefore, doing a simple
would expose my inbox to evil spammers.
Looking around to see how other people solved it, I came across a very smart solution that is claimed to be safe from email harvesting: using CSS to change text direction right to left.
To do that I created a simple css class

 .changedirection {
	  unicode-bidi: bidi-override;
	  direction: rtl;

When using this class, everything will be displayed backwards. unicode-bidi enables bidirectional text, direction changes the text direction to right-to-left and text-align makes sure the text is displayed on the left instead on the right (which is default for right-to-left text).
So, I did:

<p class=”changedirection”>moc.eman@tsal.tsrif</p>

The result looks like this:


Try and harvest that you stupid spam bots!
The only problem is that the address is not published as a clickable mailto: link. It seems that the only way to solve that is to write a javascript that prints the email. I will leave that blogpost to somebody with better javascript karma.

This Post Has 12 Comments

  1. J. B. Rainsberger

    So now I write my spambot to put every email address I find on my list twice: once forward, once backward. Problem solved how, exactly?

  2. Jakob Wolman

    I would expect nothing less than you upgrading your spambot :)
    More seriously I got the idea from this blog post: Forgot to add the source. It is from 2008, so things have probably changed, but he did a test to see which obfuscation method was moste effective.
    Of course bots can be upgraded to understand css, but why bother? I am guessing that just reading plain html will get spammers enough data.
    Probably the only 100% safe way to do this is either an advanced javascript that can’t be easily parsed by bots (I’m guessing everything can be parsed with enough effort, but if everyone is using different algorithms, they won’t bother). Or simply creating a “Contact me form” and let the server do the mailing.
    Another drawback I just noticed with this method is that copying won’t work (but it will give people a great surprise)
    Any other tips on how to solve this problem?

  3. Jay Rod

    Copy & pasting this address copies the reversed content. This ‘solution’ forces you to retype the entire address, you might as well just put it into a PNG file and be done.

  4. Christian

    I think it’s a nice solution. It also filters stupid people.

  5. Jakob Wolman

    Points taken.
    Yes, perhaps we should stop obfuscating, and start working more on our spam filters. After all, we want to deliver value to our site visitors. I’ve approached this from a techies points of view, and I guess that comes with “no way I’m gonna let these spammers win”.
    I’m using this solution right now, although the copy and pasting is probably an issue I want to adress as I want people to be able to contact me easily.
    Haven’t decided what I will actually do, but I like this discussion as it brings this small detail to a whole new level.

  6. J Bennett

    I’ve been using this for 5 or 6 years. Enter your email address and it generates obfuscated js. Although, now I look at it again, I see that un-obfuscating would be fairly trivial.

  7. Freddie Blanch

    Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a bit, but instead of that, this is wonderful blog. A great read. I’ll definitely be back.

  8. mooisterion

    Unfortunately like you said I would have to retype it all – and of course there are people who wouldn’t even notice it’s backward…

  9. Marcy

    Usually I don’t learn post on blogs, but I wish to say that this write-up very forced me
    to take a look at and do so! Your writing taste has been amazed me.
    Thank you, quite nice article.

  10. garry

    As the owner of my website i want my site to have the best too; so the use of Smart email obfuscation using CSS iis one of those that makes it more interactive.

Leave a Reply