Obfuscating e-mail addresses

[iamback]

Originally Posted by ktinkel

You remind me: I have been using a JavaScript script to obfuscate addresses. Is that what you use (I have a hunch not!) — or what is a good way?

Never use JavaScript only for what is basic functionality. If you obfuscate with JavaScript then (with most, if not all, JS functions for that anyway) you'd end up with no way to contact by email for those who don't use JavaScript for whatever reason.

When I use an email address I usually obfuscate with a small PHP routine - dynamically; but actually by now I favor using a form (which doesn't reveal an email address in the first place); and it can be further protected against spammers in various ways. (Yes, I know: not on my sites - yet - I want to make a generic piece of code for that, but coding is a ways off while I'm still struggling bringing Christiaan around again.)

[ktinkel]

Originally Posted by iamback

Never use JavaScript only for what is basic functionality. If you obfuscate with JavaScript then (with most, if not all, JS functions for that anyway) you'd end up with no way to contact by email for those who don't use JavaScript for whatever reason.

I have been reading about methods of obfuscating e-mail addresses on web sites.

It is interesting that most agree that only the JavaScript solution is fool-proof. And I have read that most web users do have JS enabled (Someone on the U.C. California/Berkeley site said that 94% do use it; of course, Berkeley users are not what I would call a typical population, much as I enjoy their company!)

I have also found an essay that suggests that it is up to users to defend against spam, not site creators. Hmmm.

Anyway, right now I am considering a solution that uses ‘on mouseover’ to trick spiders from reading e-mail addresses. I will post it below — do you know anything against that:

-------------------------------
Replace me, example.com, and Link text with whatever’s appropriate:

<a href="mail.html" onmouseover="this.href='mai' + 'lto:' + 'me' + '@' + 'example.com'">Link text</a>

Or, to have your link text display something that looks like your e-mail address, then you could do something like this:

<a href="mail.html" onmouseover="this.href='mai' + 'lto:' + 'me' + '@' + 'example.com'">me[at]example.com</a>

which will display as:

me[at]example.com

---------------------------------

[iamback]

Originally Posted by ktinkel

I have been reading about methods of obfuscating e-mail addresses on web sites.

It is interesting that most agree that only the JavaScript solution is fool-proof.

Really? I don't agree though. What makes anything foolproof is the (quality of the) resulting obfuscation, not how it's done; I prefer doing it in PHP but you can hard-code it as well so it's not dependent on JavaScript at all.

Originally Posted by ktinkel

And I have read that most web users do have JS enabled (Someone on the U.C. California/Berkeley site said that 94% do use it; of course, Berkeley users are not what I would call a typical population, much as I enjoy their company!)

Most = not all. 5-10% don't. Including most people using a screen reader - do you want to exclude them?

Originally Posted by ktinkel

I have also found an essay that suggests that it is up to users to defend against spam, not site creators. Hmmm.

Bull. The website is the first line of defense. Take it from a long-suffering spam victim!

Originally Posted by ktinkel

Anyway, right now I am considering a solution that uses ‘on mouseover’ to trick spiders from reading e-mail addresses. I will post it below — do you know anything against that:

Yes! It's JavaScript. (And polluting your HTML as well - JS shouldn't be done like that these days.)

[ktinkel]

Originally Posted by iamback

Most = not all. 5-10% don't. Including most people using a screen reader - do you want to exclude them?

As a general notion, of course not. For a site dedicated to the fine points of typography? Why not.

Originally Posted by iamback

Bull. The website is the first line of defense.

That was my thought too. Yes, you can filter out much of the spam; but it is a never-ending job tuning the filters for new stunts. I never find anything tempting in a spam ad (and if I did, I would find a different source, one that wasn’t so rude).

Originally Posted by iamback

Yes! It's JavaScript. (And polluting your HTML as well - JS shouldn't be done like that these days.)

Ah, well — no simple substitute for that “onmouseover,” huh? Nothing to do except learn PHP?


::

[iamback]

Originally Posted by ktinkel

As a general notion, of course not. For a site dedicated to the fine points of typography? Why not.

But for a site trying to peddle cottages? Why would you?

There's nothing wrong with using JavaScript; you just shouldn't use it for essential functionality. Unless, maybe, the site is actually about JavaScript - which this one isn't. And blind people book vacations, too - even if it's their partner who drives.

Originally Posted by ktinkel

Ah, well — no simple substitute for that “onmouseover,” huh? Nothing to do except learn PHP?

Sure there is - just hard-code it. There are sites that can do the obfuscation for you if you don't want to do it by hand.

If you do want to do it by hand I can teach you how - as long as you have an ASCII table or another thingy that can tell you the ASCII decimal and/or hexadecimal value of a character.

[ktinkel]

Originally Posted by iamback

Sure there is - just hard-code it. There are sites that can do the obfuscation for you if you don't want to do it by hand.

If you do want to do it by hand I can teach you how - as long as you have an ASCII table or another thingy that can tell you the ASCII decimal and/or hexadecimal value of a character.

Ah — that’s what you mean! Using decimal or hex code for each character in the address.

Don’t spambots de-code that? Sounds too easy. Can you mix hex and decimal, or does it matter?

[iamback]

Originally Posted by ktinkel

Ah — that’s what you mean! Using decimal or hex code for each character in the address.

Don’t spambots de-code that? Sounds too easy. Can you mix hex and decimal, or does it matter?

It is easy - and as far as I know spambots don't decode my obfuscated addresses (yet) - but I use a random mix for "strong obfuscation": they can't use any one method to decode it. Believe me: spambots tend to be lazy - if they get enough usable results, why bother with more complicated detection of email addresses? (I've had a very occasional spam to an obfuscated address, but that was using my name as well - suggesting it was manually harvested, not by a spambot.)

Three methods

The idea is to "treat" each character in the email address in one of three ways:

1. Don't change anything - just use the character as-is (the idea is to throw off simple pattern-recognition algorithms in hypothetical spambots by using a few non-obfuscated characters)
2. Use a numeric entity reference: we'll sloppily call this "HTML encoding" as it can be used with any HTML content or attribute value (but not for '<', '>', tag names or attribute names); this method uses the decimal value of the character (It's sometimes mistakenly called "ASCII" but that is not the actual encoding method used here! I mention it just so you can recognize the term in this context.)
3. Use URL-encoding; this can be used only where a URL (URI-reference) appears in HTML, such as in an href attribute value; this method uses the hexadecimal value of the character

Obviously, you'll need some tool (like a character map or an ASCII table) to determine decimal and hexadecimal values; and to make truly random decisions, use dice (or one die).

The obfuscation algorithm

Got all your tools together? Here goes:

1. Write out the full email link, like this:

   <a href="mailto:john_doe@example.com">John Doe</a>

   It's advisable to not use a plain-text email; address as the link description: use a (person or role) name or a description. If you really must use an email address, see below
2. You're only going to change the actual email address in the href attribute: the "mailto:" bit (protocol) remains unchanged. So write out the actual email address with enough space for each character to be able to write up to 6 characters below
3. Now decide on a random method to use, but keep the probability for not encoding a character low. For instance:
   • 1: don't change
   • 2, 3: use "HTML encoding"
   • 4, 5, 6: use URL encoding
4. For each letter in the email address, decide which method will be applied; then for:
   • don't change: just write the same letter below
   • "HTML encoding": write the code below: "&#" followed by the decimal value of the character, followed by ';'
   • URL encoding: write the code below: "%" followed by the hexadecimal value of the character (nothing after that)
5. Now replace the email address in your email link with your encoded string
6. Done!

Notes and refinements

• When writing out an email address, remember that a domain name (the part after the "@") is case-insensitive: you can actually (maybe) make things a little harder for the spambots by varying uppercase and lower case here. However, depending on the addressee's email server, the name (the part before the "@") may actually be case-sensitive. So if it's not your own address, copy it exactly as given.
• The letters in hexadecimal code (A thru F) are case-insensitive; you can create an extra little hurdle by varying upper- and lower-case characters while URL-encoding.

No link description?

If you can't (or don't want to) use a link description in the form of a (role) name but want to use the actual email address, you must strike a balance between "weaker" encoding and some possible extra work for your site's visitors.

• Use some sort of "textual" encoding, by replacing dots, dashes, underscores, etc. with a textual equivalent; using our example address, you could end up with one of these:
  • john_doe [at] example.com
  • john[underscore]doe[at]example[dot]com
  • john-underscore-doe-at-example-dot-com
  • john_doe [at] example [dot] com
  or some variant; make sure to add instructions how to "build" a real email address from that if your audience isn't used to these textual obfuscating formats
• Now you can obfuscate this string (including any spaces!) as well, if you want - but:
• Since URL encoding works only for actual URI references (as in href attributes) you cannot use it for a link description which is HTML content; for HTML content only "HTML encoding" will work!
• Again, decide on a randomization algorithm (except using your die or dice to choose between only two methods: unchanged character and "HTML encoding"), and work through the whole string.

Exercises

Write out the example email address 'john_doe@example.com', and post it here.
Want more practice? Create a "textual obfuscation" for a link description and post that as well.


Have fun confusing the spambots!

[ktinkel]

Originally Posted by iamback

Exercises

Write out the example email address 'john_doe@example.com', and post it here.

Well, I think I did the first, using ASCII numerical code, leaving a few characters in the raw.

But darned if I can show it here, not even without the a href, not even with square brackets instead of angled. Or even on a web page (if I ask Firefox to show me its properties, it reveals the ordinary straight address — shouldn’t it be showing me my underlying code?)

Doesn’t that mean that the spiders have access to the plain name in the end anyway?

Anyway, I have attached a very wide image to show what I did.


::

[iamback]

Originally Posted by ktinkel

Well, I think I did the first, using ASCII numerical code, leaving a few characters in the raw.

But darned if I can show it here, not even without the a href, not even with square brackets instead of angled. Or even on a web page (if I ask Firefox to show me its properties, it reveals the ordinary straight address — shouldn’t it be showing me my underlying code?)

Doesn’t that mean that the spiders have access to the plain name in the end anyway?

Let me guess: you're using the fancy editor for the forum, with the buttons? That probably "helpfully" translates those cdoes right back into characters for you.

You could try either of two things (or both):

• wrap the code in [*code] or [*html] bbcode tags (without the *)
• use the plain-text editor for the forum

Originally Posted by ktinkel

Anyway, I have attached a very wide image to show what I did.

I note you missed the closing quote for the href attribute; Let's see if I can type it (quote added)

<a href="mailto:john_doe@example.com">John Doe</a>

[iamback]

The forum software is a little bit too helpful here, but the code actually is there: look at the page source! I had to do it without preview though - otherwise the code would be translated back to normal text in the form textarea as well...
(Normally this would be what you'd want to happen, so you can type an entity and end up with the actual character, for instance for entering Unicode characters - but that it's doing it inside a [*code] or [*html] tag is less helpful.

The fact that (without looking at the page's source code) you see "plain text" email instead of code means two things: The browser renders the "HTML encoded" string just fine; and sice it's "readable" the code was actually correct.

Remember, the browser cannot render URL-encoded characters - had you used those, they should remain untouched.

And... given that an entity is rendered, you could of course "escape" it:

o <-> &amp;#111;

... which doesn't work. Grrr.