Encrypted E-mail

You know this silly problem: you place your e-mail address on a public website and get enormous amounts of spam. Some people solve this by only putting a human readable version of the e-mail such as alexanderkiel at gmx net on their web page. If you do so, it is really hard for e-mail crawler to fetch your mail address. However all your human visitors have to spend some brain work and copy&pasting. It would be much more comfortable to simply click on your e-mail.

Encrypted E-mail is an approach to combine both — the hard way for crawlers and the user friendly way of being able to simply click on the e-mail. The basic idea is to display a only human readable, non-clickable version first and turn it into a fully clickable link on user request. This is done by a single JavaScript file which you can simply embed in you web page.

How does the Script work?

Visitors of your site which do not have JavaScript enabled see only the human readable version of your e-mail address and have to go the hard way. Thats not perfect, but better than to get hundreds of spam a month. But what if the stupid crawler executes JavaScript as well you may ask. Okay then he hopefully has a powerful machine to crawl sites which use Encrypted E-mail. The unique idea of Encrypted E-mail is to decrypt the real e-mail from a very hardly encrypted ciphertext. The standard decryption of an 512 bit RSA encrypted e-mail needs roughly half a second on a today modestly fast powered desktop computer. Thats okay for your visitor who wants to click on your mail but its far to long for an crawler who wants go get tens of thousandths of e-mail addresses.

Key Ideas and Concepts behind Encrypted E-mail

  • Fully Web Standards compatible
  • Unobtrusive JavaScript
  • Easy to use
  • Strong encryption of your e-mail address
  • As comfortable as a normal linked e-mail

A simple Example

Using Encrypted E-mail is as simple as wrapping your e-mail with a single <span>-element. Lets see:

  1. Please write me an e-mail to:
  2. <span class="encrypted-email email" ciphertext="1016d15f0963[...]">
  3. alexanderkiel at gmx net
  4. </span>

This gives you:

Please write me an e-mail to:

If you have JavaScript disabled you will see only the human readable version of my e-mail address without any notice to enable JavaScript for any better. I will describe later how you can place such a hint. To be able to follow this tutorial you should enable JavaScript now if you do not see a show-button next to the e-mail.

Just for testing, please click on the show-button now. As you notice, my e-mail address turned into a real one which is perfectly clickable for fast access. All this magic works without any JavaScript directly embedded into your web page. All what you have is a normal <span>-element.

What are the building blocks of the hook for Encrypted E-mail?

First lets look at the <span>-element again:

  1. <span class="encrypted-email email" ciphertext="1016d15f0963[...]">
  2. alexanderkiel at gmx net
  3. </span>

there you have two class-attributes encrypted-email and email. encrypted-email is the main class attribute which marks a <span>-element as special encrypted email element. The JavaScript will look at every such <span>-element. The email class states that this is actually an email as there are other elements which have the encrypted-email class. So you have to type both of them.

Second, you notice the ciphertext-attribute. This attribute holds the actual ciphertext of your e-mail address. As you properly notice, this attribute is not part of the HTML Standard. Please read this FAQ entry if you want to know more about this.

At last you can write anything you like into the content area of the <span>-element. This is what your visitor sees before he presses the show-button. It can be a human readable version of your e-mail or even an “e-mail hidden” statement.

Lets try Yourself — what do you need?

First of all you need the encrypted-email.js and prototype.js v1.6 (if you don’t use it already). Than you need to include this two JavaScript files into your web page. In the header (<head>-element) put the lines:

  1. <script src="prototype.js" type="text/javascript"></script>
  2. <script src="encrypted-email.js" type="text/javascript"></script>

then replace your normal e-mail addresses with the ones in a <span>-element as shown above.

The last thing you need is the encryption of your e-mail addresses. To do this please use the Encrypter provided on this website.

Tell the Poor’s to enable JavaScript

In my first Simple Example I did not show how you can tell your visitors with disabled JavaScript that they better enable it. You can do this by defining one or more elements which have both the encrypted-email and the remove class attribute. So you can show such a message at every e-mail address or once for many.

Expect you have a list of e-mail addresses and you don’t want to show a JavaScript reminder at every item:

  1. <p class="encrypted-email remove">
  2. Please enable JavaScript to see the e-mails.
  3. <p>
  4. <dl>
  5. <dt>Alexander Kiel<dt>
  6. <dd>
  7. <span class="encrypted-email email">
  8. alexanderkiel at gmx net
  9. </span>
  10. </dd>
  11. <dt>Georg Martius<dt>
  12. <dd>
  13. <span class="encrypted-email email">
  14. georg dot martius at web de
  15. </span>
  16. </dd>
  17. </dl>

this will give you (I obmitted the ciphertext-attributes for clarity):

Please enable JavaScript to see the e-mails.

Alexander Kiel
Georg Martius

Please disable JavaScript to see any new. The paragraph with the “Please enable JavaScript to see the e-mails.”-message does show only if you have JavaScript disabled. Yes its there by default but it will be removed by the Encrypted E-mail JavaScript on page load.

Other Configuration Options

Soon I will have a Reference Documentation with all config options online. You will be able to change the show-button and the default bit depth of the RSA encryption. I will also will show you other options to register your ciphers.

Credits

First of all I would thank Georg for the great idea of using encrypted e-mails so that crawlers have a bad time to get what they should not. Second I thank Tom Wu for his BigIntegers and RSA in JavaScript. He released his great JavaScript under BSD license. So I was able to get a RSA encryption in JavaScript in a few hours. Open Source is so great!

License

The file encrypted-email.js is released under the LGPL. So you can use it as part of commercial products.

NOTE THAT THIS SOFTWARE IS PROVIDED “AS IS” WITHOUT ANY WARRANTY.

If you use this script and encounter any problems or have any suggestions, please feel free to contact me at ?. It would be in the spirit of Open Source to also prevent these spammers from getting even more e-mail addresses.

Last edited on: November 19th, 2007