Facebook Image-to-Email

Does it annoy anyone else that on Facebook profiles, the email address is an image? This can’t be an anti-spam measure; only your friends can see it. It has to be to put a barrier up to stop you from using real email rather than Facebook’s poor excuse for it.

However, I think it would be a Simple Matter of Programming to write a Firefox extension which fixed the problem. The font they use is standard, and the images are PNG. The extension would:

  • Find each email address image
  • Use canvas.drawImage() to draw it to a <canvas>
  • Use canvas.getImageData() to read vertical strips of pixels
  • Compare the pixel values to an internal table of the possible characters
  • Remove the image from the DOM and replace it with a clickable mailto: link

It’s a proportional font, so you’d need a loop to keep reading single pixel strips until it was clear what letter it was, and then advancing the correct remaining number of strips to move to the next letter. But that’s a trivial detail.

Anyone up for writing this?

12 thoughts on “Facebook Image-to-Email

  1. Appears to be Tahoma at 11px with font-color set to rgb(50,50,50). Tried rendering your email address using PIL but the kerning and anti-aliasing wasn’t identical to your supplied image, although the shapes of the @ and other letters were pretty spot on.

    I had the idea to pre-generate the various glyps (including two-character glyphs, if any), make it so the image is 16 pixels high (there’s enough whitespace) and use two columns of pixels as a Uint32 (white=0, the rest=1) and then build a “scan trie” of sorts in Python and dump it using JSON. Would allow for a compact representation usable from JS, even if compactness isn’t necessary.

    Facebook runs on PHP which uses GD for image generation IIRC, but I haven’t got it installed to see if it renders things differently. One could, of course, collect a bunch of email images and run the test off that, but it’s not as easy to automate things then.

    Maybe I’m just over-thinking it, haven’t eaten dinner… Does sound like a fun little project, though.

  2. I believe that was added after some were scraping email addresses. Since most people befriend anyone who asks, it’s easy to gain a nice amount of data. Email address being the most valuable. Not such a bad move considering their business model is largely to not fall into the privacy trap that MySpace had. So far they have done pretty well.

  3. Jolly clever. Nicely done.

    You could register a click handler for the images and do the conversion on-demand, to avoid slowing down any page loads. And possibly add a pref for choosing between on-demand and on-load operation. For version 1.1 or whatever ;).

  4. Chris: Most impressive! Thank you very much indeed. I wonder if they’ll try and break the technique. I hope not.

    Fredrik’s idea is possibly a good one; I guess it depends on what the performance impact is. Can you use document.images to speed things up, if you aren’t already?

  5. If Chris’ solution can do general image-to-text conversions, it would be extremely useful to add to the spam detection in Thunderbird. You wouldn’t even need to get the conversion exactly right; e.g. just finding “Vioxx” or other keywords in the image would be enough to flag the email as likely being SPAM.

  6. @monk.e.boy

    “Oooh and if someone could write a captcha solving algorithm too :-) it’s got to the point where I can’t read them anymore.”

    It’s been done. One of the members of theReformed (http://www.thereformed.org) wrote one and published it about a year ago.

  7. Facebook Getting Nasty About Lock-In

    As I have mentioned before, Facebook put images, rather than text, of email addresses in Facebook profiles. They suggest this is a privacy-enhancing measure, but given that it’s fairly easy for someone with nefarious intent to circumvent it, it’s quite…