Obfuscating your Email with CSS?
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> </p> <!-- 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> </p>
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”
Disclaimer
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.
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!
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.
Tommy Olsson responds:
Posted: May 11th, 2007 at 1:34 am →
Blast! I forgot to include the
readonlyattribute in the second INPUT element.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….
Mike Cherim responds:
Posted: May 11th, 2007 at 5:12 am →
@Joe: I think it might work if everyone changed it up slightly.
@Tommy: Good question. To tell the truth, I wasn’t familiar with
readonly. I went to fix your first comment to add that in the second input and I actually did some searching on it first. As it is I think I did it right (without the quotes), but I’m not positive. Being in two inputs, I’d be worried that it wouldn’t read right but that would have to be tested. I wonder if combining the methods (text and form) and making the non-email text parts labels for those inputs might be effective.Speaking of forms, inspired by the way emails are provided at the GAWDS web site, I created a PHP-scripted form method a bit ago that seems to be working well so far. It’s a live email account I have delivered to a special folder so I won’t miss it if it get abused. So far so good.
@Jack: I remember that now that you’ve posted it. Ben did come up with the idea. Regarding the expected usability of a linked email, you’re right. The only thing that bugs me about linked emails is that they require the user to have an email client (but that’s okay if the email is written out… versus a text link). Most do have an email client, but most people have JavaScript, too, so it sort of falls into the almost accessible category. Thus, I’m with you on forms being best. It’s all I really use nowadays.
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.
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.
Mike Cherim responds:
Posted: May 11th, 2007 at 5:26 am →
@Rich:
Good question. I think it would fine. Opera doesn’t seem to mind hiding stuff with that method, but it won’t bring in back on focus — like my jump links
— in this case, though, it doesn’t need to do that so it should be okay.
Thanks. It was of my more cleverer moments
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
Mike Cherim responds:
Posted: May 11th, 2007 at 5:59 am →
@Harmen: I agree, that would be ideal, but unfortunately aural style support is pretty sketchy. Moreover, text browser users (or other who don’t support styles) would still get the gibberish portions.
Robert Wellock responds:
Posted: May 11th, 2007 at 10:14 am →
You might as well turn it into hexadecimal too.
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.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.
Mike Cherim responds:
Posted: May 12th, 2007 at 8:42 am →
Hopefully I fixed that for you the right way Gill.
As far as aural style sheets, I’ve had good luck using them with Opera Voice, and I think there are a couple of others that will utilize them, but it is my understanding, there are a number of screen readers that completely ignore them. I wish they were better supported as we could do a lot of cool stuff with them and make our pages even more accessible (and usable). As it is, though, they can’t be counted on.
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.xxI 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 ;-(
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.
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?
Cheers
David
Mike Cherim responds:
Posted: June 14th, 2007 at 2:21 pm →
@ David: You’re manually republishing email content but want something that’ll strip out the email or something? Sorry, I’m sort of confused as to what you’re asking for. I suspect there’s a ton of information that I don’t know. Maybe you’re better off just contacting me versus posting a comment. It’s sort of off topic I think.