Obfuscating your Email with CSS?

Posted May 10th, 2007 by Mike Cherim

I’ve come up with an idea that might be useful for obfuscating an email address using your Cascading Style Sheet or CSS. Not a linked email address, but one just posted on the page as text. Trouble is adding an email address to a web page as text or as a link means it will be harvested by ‘bots. Because of this, many people use something like email[at]domain[dot]com in hopes of hiding it. It is my understanding that can be harvested too, though. So I came up with something that may prevent that. For a bit, anyway.

The Mark-up

What I’m going to do is insert some inline mark-up and other content into the example email address above. Then move the nonsense parts off-screen. Like so.

 <p class="email">
  Email us at <strong><span>Gte5#@k</span>email<span>zSwq21-</span>@<span>oKg3P*</span>domain<span>7R55:[]</span>.<span>rWsq1_6</span>com<span>Ues9^4~</span></strong>
   Change the “codes” from those above or, better, randomize with a
   server-side script. Also consider other elements, not just span

The Styles

What this produces for ‘bots if my theory holds true is this: “Email us at Gte5#@kemailzSwq21-@oKg3P*domain7R55:[].rWsq1_6comUes9^4~” Sighted users would get this: “Email us at email@domain.com” Provided the following is added to the style sheet:

 p.email span {
   position : absolute;
   top : -9999px;
   left : -9999px;

Making it Accessible

Note that I wrote sighted users above. Screen reader and text browser users, and anyone who may not support styles, would get the gibberish version the ‘bots get, making this method inaccessible to some users. To improve the solution, to make it accessible, it’ll probably be best to go with logical text instead of random characters. Like this:

 <p class="email">
  Email us at <strong>email</strong><span>, followed by, </span><strong>@domain</strong><span>, and terminated with a </span><strong>.com</strong>

Sighted users would get this: “Email us at email@domain.com.” Other users, as well as the ‘bots, will get the following, but the latter shouldn’t be able to make sense of it.

“Email us at email, followed by, @domain, and terminated with a .com


I’m not sure how good this is. It may even be a crappy idea, but I think it’s better than just using brackets or parenthesis and it’s definitely better than posting your email address directly to a web page.

Note: The use of strong emphasis in this post is simply to make the examples stand out or to emphasize them. I wanted to mention that this is not needed if putting this idea into practice on a web page.

18 Responses to: “Obfuscating your Email with CSS?”

  1. Joe Dolson responds:
    Posted: May 10th, 2007 at 11:28 pm

    That’s an interesting idea — I think that a well-written email scraper would still be able to parse out the email address pretty easily in your more accessible example. I think this is one of those areas where making something both accessible and secure is nigh unto impossible…

    It would, however, be easy to test it’s effectiveness. Perhaps I’ll give it a try and let you know!

  2. Tommy Olsson responds:
    Posted: May 11th, 2007 at 1:33 am

    Funny enough, I was thinking on my way to work this morning about accessible ways to present an email address while minimising the risk of it being harvested. I came up with a different, but somewhat similar, approach, where you’d ‘hide’ the important stuff in attribute values. What do you think about something like this?

    Email us at <input type="text" value="john.doe" readonly><input type="text" value="@example.com" readonly>

    Then you could style the INPUT elements to make them look like regular text in most browsers.

    I haven’t tried this in a screen reader yet, so I don’t know if it works.

  3. Tommy Olsson responds:
    Posted: May 11th, 2007 at 1:34 am

    Blast! I forgot to include the readonly attribute in the second INPUT element.

  4. JackP responds:
    Posted: May 11th, 2007 at 4:41 am

    @Mike, I’m afraid your way behind the times on this one. I believe it has been used for some time, even breaking up the “domain” parts so that it’s that much harder to be scraped together.

    Young Ben Millard (aka Cerbera from AccessifyForum) came up with the his CSS munging idea idea some time ago.

    The biggest problem with this method IMO is that it doesn’t work for linked email addresses, and email address as sendmail links is such a user expectation now that Jakob would probably leap out from round a corner and slap you with a wet fish if you broke the user’s expectations in such a manner.

    And that’s why I’d generally stick with a form, and work on the theory that only if I reply to someone am I willing to give them my email address….

  5. Rich Pedley responds:
    Posted: May 11th, 2007 at 5:15 am

    Tommy, wouldn’t that mean that JAWS users for example would have to be in forms mode to read it?

    Mike, nice and different way of doing things. How does it look in Opera? I ask because I know Opera hasn’t always played nicely with the off-left technique.

    However, I don’t like ‘text’ email addresses. I prefer to be able to click on one, so this technique is not for me. But then I don’t obfuscating the code, and have always used a standard eye readable email address. But then I’m weird like that.

  6. Rich Pedley responds:
    Posted: May 11th, 2007 at 5:20 am

    Mike your php scripted method looks nice, and is similar to a hidden contact form technique I have used in a few places.

  7. Harmen Janssen responds:
    Posted: May 11th, 2007 at 5:28 am

    I’ve got no idea as to wether this is a safe method or not, but you should be able to use your first technique in an accessible manner, by using an Aural stylesheet.

    This would go in your screen stylesheet:

    p.email span {
    position : absolute;
    top : -9999px;
    left : -9999px;

    While this would go in your aural stylesheet:

    p.email span {
    speak: none;

    Another option might be volume: silent;.
    That said, I’m no expert on screen readers, so some testing would be required :)

  8. Robert Wellock responds:
    Posted: May 11th, 2007 at 10:14 am

    You might as well turn it into hexadecimal too.

  9. Gill responds:
    Posted: May 12th, 2007 at 7:22 am

    I tend to have both a form and a clickable email link. I’ve tried various methods on the clickable one and what seems to work best is breaking the address up with tags of various sorts. On my own site I’m trying out a version with aural and it seems to be working fine.

    What I’ve done is set up an Aural class called spell and I use it to spell out part of the address. I’ve mixed that in with using <code> tags on other bits of the address plus some hex character codes for good measure. It’s a bit of a fiddle to set up but so far so good, no spam.

  10. Gill responds:
    Posted: May 12th, 2007 at 7:23 am

    Ooops darn conversion. What that should have said was

    I’ve mixed that in with using code tags on other bits of the address plus some hex character codes for good measure. It’s a bit of a fiddle to set up but so far so good, no spam.

  11. Gill responds:
    Posted: May 12th, 2007 at 7:33 pm

    Thanks for changing that Mike I forgot to lt and gt. :-)

    I’m not using the Aural in the way Harmen is.

    .spell { speak:spell-out; }

    address<code>@</code><span class="spell">jb</span>visions.xx.xx

    I used it initially to spell out the JB of JBVisions otherwise it gets pronounced jubvisions. I put the span class spell in there for that but it also makes it less obviously an email address especially when mixed with code tags and character codes.

    If the aural styles are ignored then the user just hears jubvisions which isn’t ideal but there’s always the form to fall back on.

    It’s also a lesson in learning about readers BEFORE choosing your company name ;-(

  12. John Lascurettes responds:
    Posted: June 4th, 2007 at 4:36 pm

    Instead of obfuscating your email behind code, why not obfuscate it behind a privileged link?

    For example, on a personal site of mine I have an email form. On that same page, I have a link to a “quiz” where if the user gets the question right the cgi.pl file sends them to a page with no incoming links that has the written out, clickable email addresses. My personal example used privileged and inside information for the sake of my own personal cognoscenti, but there’s no reason it couldn’t be a little more general possibly with multiple questions (same way many wordpress blogs now have a turing-stye question now) so long as it’s used alongside a general web-based form so users could pick their (pain) preference.

  13. David Hunter responds:
    Posted: June 14th, 2007 at 2:06 pm

    I’m presently looking for something that will do something like this. Basically I am trying to republish items sent to an email list that I own on a weblog, but automatically stripping out or hiding the email addresses. I am happy enough if the email addresses are just removed. Any suggestions?


Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.