On my homepage, I'm using this method to hide my email from spam bots:
<a href="admin [at] example.com"
rel="nofollow"
onclick="this.href='mailto:' + 'admin' + '@' + 'example.com'">Contact me</a>
What do you think about it? Is it effective? What other methods do you know or use?
The answer is
See Making email addresses safe from bots on a webpage?
I like the way Facebook and others render an image of your email address.
I have also used The Enkoder in the past - thought it was very good to be honest!
Not my idea originally but I can't find the author:
<a href="mailto:[email protected]"
onmouseover="this.href=this.href.replace(/x/g,'');">link</a>
Add as many x's as you like. It works perfectly to read, copy and paste, and can't be read by a bot.
And my function. I've created it looking at answers placed in this topic.
function antiboteEmail($email)
{
$html = '';
$email = strrev($email);
$randId = rand(1, 500);
$html .= '<span id="addr-'.$randId.'" class="addr">[turn javascript on to see the e-mail]</span>';
$html .= <<<EOD
<script>
$(document).ready(function(){
var addr = "$email";
addr = addr.split("").reverse().join("");
$("#addr-$randId").html("<a href=\"mailto:" + addr + "\">" + addr + " </a>");
});
</script>
EOD;
return $html;
}
It uses two methods: right to left dir and javascript putting.
Working with content and attr in CSS:
.cryptedmail:after {_x000D_
content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); _x000D_
}<a href="#" class="cryptedmail"_x000D_
data-name="info"_x000D_
data-domain="example"_x000D_
data-tld="org"_x000D_
onclick="window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld; return false;"></a>When javascript is disabled, just the click event will not work, email is still displayed.
Another interesting approach (at least without a click event) would be to make use of the right-to-left mark to override the writing direction. more about this: https://en.wikipedia.org/wiki/Right-to-left_mark
The best method hiding email addresses is only good until bot programmer discover this "encoding" and implement a decryption algorithm.
The JavaScript option won't work long, because there are a lot of crawler interpreting JavaScript.
There's no answer, imho.
I have a completely different take on this. I use MailHide for this.
MailHide is a system from Google whereby the user needs to complete a reCAPTCHA test to then reveal the email to them.
Have a look at this way, pretty clever and using css.
CSS
span.reverse {
unicode-bidi: bidi-override;
direction: rtl;
}
HTML
<span class="reverse">moc.rehtrebttam@retsambew</span>
The CSS above will then override the reading direction and present the text to the user in the correct order.
Hope it helps
Cheers
Does it work if I right-click on the link and choose "copy URL"? If not, it's very much not an ideal situation (I very seldom click on a mailto link, preferring to copy the email address and paste it into my mail application or wherever else I need it at a specific point in time).
I used to be fairly paranoid protecting my mail address on-line (UseNet, web and the like), but these days I suspect more "possible targets for spam" are actually generated matching local-parts to domains programmatically. I base this on having, on occasion, gone through my mail server logs. There tends to be quite a few delivery attempts to non-existing addresses (including truncated versions of spam-bait I dangled on UseNet back in the late 90s, when address-scraping was very prevalent).
A neat trick is to have a div with the word Contact and reveal the email address only when the user moves the mouse over it. E-mail can be Base64-encoded for extra protection.
Here's how:
<div id="contacts">Contacts</div>
<script>
document.querySelector("#contacts").addEventListener("mouseover", (event) => {
// Base64-encode your email and provide it as argument to atob()
event.target.textContent = atob('aW5mb0BjbGV2ZXJpbmcuZWU=')
});
</script>
Does it work if I right-click on the link and choose "copy URL"? If not, it's very much not an ideal situation (I very seldom click on a mailto link, preferring to copy the email address and paste it into my mail application or wherever else I need it at a specific point in time).
I used to be fairly paranoid protecting my mail address on-line (UseNet, web and the like), but these days I suspect more "possible targets for spam" are actually generated matching local-parts to domains programmatically. I base this on having, on occasion, gone through my mail server logs. There tends to be quite a few delivery attempts to non-existing addresses (including truncated versions of spam-bait I dangled on UseNet back in the late 90s, when address-scraping was very prevalent).
And my function. I've created it looking at answers placed in this topic.
function antiboteEmail($email)
{
$html = '';
$email = strrev($email);
$randId = rand(1, 500);
$html .= '<span id="addr-'.$randId.'" class="addr">[turn javascript on to see the e-mail]</span>';
$html .= <<<EOD
<script>
$(document).ready(function(){
var addr = "$email";
addr = addr.split("").reverse().join("");
$("#addr-$randId").html("<a href=\"mailto:" + addr + "\">" + addr + " </a>");
});
</script>
EOD;
return $html;
}
It uses two methods: right to left dir and javascript putting.
You can try to hide characters using html entities in hexa (ex: @ for @). This is convenient solution, as a correct browser will translate it, and you can have a normal link. The drawback is that a bot can translate it theorically, but it's a bit unusual. I use this to protect my e-mail on my blog.
Another solution is to use javascript to assemble part of the address and to decode on-the-fly the address. The drawback is that a javascript-disabled browser won't show your adress.
The most effective solution is to use an image, but it's a pain for the user to have to copy the address by hand.
Your solution is pretty good, as you only add a drawback (writing manually the @) only for user that have javascript disabled. You can also be more secure with :
onclick="this.href='mailto:' + 'admin' + '@' + 'domain.com'"
I like ofaurax's answer best but I would modify to this for a little more hidden email:
onclick="p1='admin'; p2='domain.com'; this.href='mailto:' + p1 + '& #x40;' + p2"
I don't like JavaScript and HTML to be mixed, that's why I use this solution. It works fine for me, for now.
Idea: you could make it more complicated by providing encrypted information in the data-attributes and decrypt it within the JS. This is simply done by replacing letters or just reversing them.
HTML:
<span class="generate-email" data-part1="john" data-part2="gmail" data-part3="com">placeholder</span>
JS:
$(function() {
$('.generate-email').each(function() {
var that = $(this);
that.html(
that.data('part1') + '@' + that.data('part2') + '.' + that.data('part3')
);
});
});
Try it: http://jsfiddle.net/x6g9L817/
You can try to hide characters using html entities in hexa (ex: @ for @). This is convenient solution, as a correct browser will translate it, and you can have a normal link. The drawback is that a bot can translate it theorically, but it's a bit unusual. I use this to protect my e-mail on my blog.
Another solution is to use javascript to assemble part of the address and to decode on-the-fly the address. The drawback is that a javascript-disabled browser won't show your adress.
The most effective solution is to use an image, but it's a pain for the user to have to copy the address by hand.
Your solution is pretty good, as you only add a drawback (writing manually the @) only for user that have javascript disabled. You can also be more secure with :
onclick="this.href='mailto:' + 'admin' + '@' + 'domain.com'"
First I would make sure the email address only shows when you have javascript enabled. This way, there is no plain text that can be read without javascript.
Secondly, A way of implementing a safe feature is by staying away from the <button> tag. This tag needs a text insert between the tags, which makes it computer-readable. Instead try the <input type="button"> with a javascript handler for an onClick.
Then use all of the techniques mentioned by otherse to implement a safe email notation.
One other option is to have a button with "Click to see emailaddress". Once clicked this changes into a coded email (the characters in HTML codes). On another click this redirects to the 'mailto:email' function
An uncoded version of the last idea, with selectable and non-selectable email addresses:
<html>
<body>
<script type="text/javascript">
e1="@domain";
e2="me";
e3=".extension";
email_link="mailto:"+e2+e1+e3;
</script>
<input type="text" onClick="this.onClick=window.open(email_link);" value="Click for mail"/>
<input type="text" onClick="this.value=email;" value="Click for mail-address"/>
<input type="button" onClick="this.onClick=window.open(email_link);" value="Click for mail"/>
<input type="button" onClick="this.value=email;" value="Click for mail-address"/>
</body></html>
See if this is something you would want and combine it with others' ideas. You can never be too sure.
Option 1 : Split email address into multiple parts and create an array in JavaScript out of these parts. Next join these parts in the correct order and use the .innerHTML property to add the email address to the web page.
<span id="email"> </span> // blank tag
<script>
var parts = ["info", "XXXXabc", "com", ".", "@"];
var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
document.getElementById("email").innerHTML=email;
</script>
Option 2 : Use image instead of email text
Image creator website from text : http://www.chxo.com/labelgen/
Option 3 : We can use AT instead of "@" and DOT instead of " . "
i.e :
info(AT)XXXabc(DOT)com
This is probably the best and easiest email protector on the internet. Very simple yet it has the ability to add all the bells and whistles.
Uses JavaScript. I've been using it successfully for years.
I am a fan of SpamSpan - it is obfuscated, but still decipherable if JS is disabled. It seems to work too, although I've only been using it for about a year on a low-traffic website.
There is also a module for Drupal to automatically turn emails into SpamSpans, if you need one.
I think the only foolproof method you can have is creating a Contact Me page that is a form that submits to a script that sends to your email address. That way, your address is never exposed to the public at all. This may be undesirable for some reason, but I think it's a pretty good solution. It often irks me when I'm forced to copy/paste someone's email address from their site to my mail client and send them a message; I'd rather do it right through a form on their site. Also, this approach allows you to have anonymous comments sent to you, etc. Just be sure to protect your form using some kind of anti-bot scheme, such as a captcha. There are plenty of them discussed here on SO.
One of my favorite methods is to obfuscate the email address using php, a classic example is to convert the characters to HEX values like so:
function myobfiscate($emailaddress){
$email= $emailaddress;
$length = strlen($email);
for ($i = 0; $i < $length; $i++){
$obfuscatedEmail .= "&#" . ord($email[$i]).";";
}
echo $obfuscatedEmail;
}
And then in my markup I'll simply call it as follows:
<a href="mailto:<?php echo myobfiscate('[email protected]'); ?>"
title="Email me!"><?php echo myobfiscate('[email protected]');?> </a>
Then examine your source, you'll be pleasantly surprised!
The best method hiding email addresses is only good until bot programmer discover this "encoding" and implement a decryption algorithm.
The JavaScript option won't work long, because there are a lot of crawler interpreting JavaScript.
There's no answer, imho.
One easy solution is to use HTML entities instead of actual characters. For example, the "[email protected]" will be converted into :
<a href="mailto:me@example.com">email me</A>
Does it work if I right-click on the link and choose "copy URL"? If not, it's very much not an ideal situation (I very seldom click on a mailto link, preferring to copy the email address and paste it into my mail application or wherever else I need it at a specific point in time).
I used to be fairly paranoid protecting my mail address on-line (UseNet, web and the like), but these days I suspect more "possible targets for spam" are actually generated matching local-parts to domains programmatically. I base this on having, on occasion, gone through my mail server logs. There tends to be quite a few delivery attempts to non-existing addresses (including truncated versions of spam-bait I dangled on UseNet back in the late 90s, when address-scraping was very prevalent).
Have a look at this way, pretty clever and using css.
CSS
span.reverse {
unicode-bidi: bidi-override;
direction: rtl;
}
HTML
<span class="reverse">moc.rehtrebttam@retsambew</span>
The CSS above will then override the reading direction and present the text to the user in the correct order.
Hope it helps
Cheers
There are probably bots that recognize the [at] and other disguises as @ symbol. So this is not a really effective method.
Sure you could use some encodings like URL encode or HTML character references (or both):
// PHP example
// encodes every character using URL encoding (%hh)
function foo($str) {
$retVal = '';
$length = strlen($str);
for ($i=0; $i<$length; $i++) $retVal.=sprintf('%%%X', ord($str[$i]));
return $retVal;
}
// encodes every character into HTML character references (&#xhh;)
function bar($str) {
$retVal = '';
$length = strlen($str);
for ($i=0; $i<$length; $i++) $retVal.=sprintf('&#x%X;', ord($str[$i]));
return $retVal;
}
$email = '[email protected]';
echo '<a href="'.bar('mailto:?to=' . foo(','.$email.'')).'">mail me</a>';
// output
// <a href="mailto:?to=%2C%75%73%65%72%40%65%78%61%6D%70%6C%65%2E%63%6F%6D">mail me</a>
But as it is legal to use them, every browser/e-mail client should handle these encodings too.
See Making email addresses safe from bots on a webpage?
I like the way Facebook and others render an image of your email address.
I have also used The Enkoder in the past - thought it was very good to be honest!
Not my idea originally but I can't find the author:
<a href="mailto:[email protected]"
onmouseover="this.href=this.href.replace(/x/g,'');">link</a>
Add as many x's as you like. It works perfectly to read, copy and paste, and can't be read by a bot.
I just have to provide an another answer. I just came up with something fun to play with.
I found out that in many common character tables, the letters @ and a-z reappear more than once. You can map the original characters to the new mappings and make it harder for spam bots to figure out what the e-mail is.
If you loop through the string, and get the character code of a letter, then add 65248 to it and build a html entity based on the number, you come up with a human readable e-mail address.
var str = '[email protected]';
str = str.toLowerCase().replace(/[\.@a-z]/gi, function(match, position, str){
var num = str.charCodeAt(position);
return ('&#' + (num + 65248) + ';');
});
Here is a working fiddle: http://jsfiddle.net/EhtSC/8/
You can improve this approach by creating a more complete set of mappings between characters that look the same. But if you copy/paste the e-mail to notepad, for example, you get a lot of boxes.
To overcome some of the user experience issues, I created the e-mail as link. When you click it, it remaps the characters back to their originals.
To improve this, you can create more complex character mappings if you like. If you can find several characters that can be used for example in the place of 'a' why not randomly mapping to those.
Probably not the most secure approach ever but I really had fun playing around with it :D
See Making email addresses safe from bots on a webpage?
I like the way Facebook and others render an image of your email address.
I have also used The Enkoder in the past - thought it was very good to be honest!
Have a look at this way, pretty clever and using css.
CSS
span.reverse {
unicode-bidi: bidi-override;
direction: rtl;
}
HTML
<span class="reverse">moc.rehtrebttam@retsambew</span>
The CSS above will then override the reading direction and present the text to the user in the correct order.
Hope it helps
Cheers
A neat trick is to have a div with the word Contact and reveal the email address only when the user moves the mouse over it. E-mail can be Base64-encoded for extra protection.
Here's how:
<div id="contacts">Contacts</div>
<script>
document.querySelector("#contacts").addEventListener("mouseover", (event) => {
// Base64-encode your email and provide it as argument to atob()
event.target.textContent = atob('aW5mb0BjbGV2ZXJpbmcuZWU=')
});
</script>
I know my answer won't be liked by many but please consider the points outlined here before thumbing down.
Anything easily machine readable will be easily machine readable by the spammers. Even though their actions seem stupid to us, they're not stupid people. They're innovative and resourceful. They do not just use bots to harvest e-mails, they have a plethora of methods at their disposal and in addition to that, they simply pay for good fresh lists of e-mails. What it means is, that they got thousands of black-hat hackers worldwide to execute their jobs. People ready to code malware that scrape the screens of other peoples' browsers which eventually renders any method you're trying to achieve useless. This thread has already been read by 10+ such people and they're laughing at us. Some of them may be even bored to tears to find out we cannot put up a new challenge to them.
Keep in mind that you're not eventually trying to save your time but the time of others. Because of this, please consider spending some extra time here. There is no easy-to-execute magic bullet that would work. If you work in a company that publishes 100 peoples' e-mails on the site and you can reduce 1 spam e-mail per day per person, we're talking about 36500 spam emails a year. If deleting such e-mail takes 5 seconds on average, we're talking about 50 working hours yearly. Not to mention the reduced amount of annoyance. So, why not spend a few hours on this?
It's not only you and the people who receive the e-mail that consider time an asset. Therefore, you must find a way to obfuscate the e-mail addresses in such way, that it doesn't pay off to crack it. If you use some widely used method to obfuscate the e-mails, it really pays off to crack it. Since as an result, the cracker will get their hands on thousands, if not tens or hundreds of thousands of fresh e-mails. And for them, they will get money.
So, go ahead and code your own method. This is a rare case where reinventing the wheel really pays off. Use a method that is not machine readable and one which will preferably require some user interaction without sacrificing the user experience.
I spent some 20 minutes to code off an example of what I mean. In the example, I used KnockoutJS simply because I like it and I know you won't probably use it yourself. But it's irrelevant anyway. It's a custom solution which is not widely used. Cracking it won't pose a reward for doing it since the method of doing it would only work on a single page in the vast internet.
Here's the fiddle: http://jsfiddle.net/hzaw6/
The below code is not meant to be an example of good code. But just a quick sample of code which is very hard for machine to figure out we even handle e-mails in here. And even if it could be done, it's not gonna pay off to execute in large scale.
And yes, I do know it doesn't work on IE = lte8 because of 'Unable to get property 'attributes' of undefined or null reference' but I simply don't care because it's just a demo of method, not actual implementation, and not intended to be used on production as it is. Feel free to code your own which is cooler, technically more solid etc..
Oh, and never ever ever name something mail or email in html or javascript. It's just way too easy to scrape the DOM and the window object for anything named mail or email and check if it contains something that matches an e-mail. This is why you don't want any variables ever that would contain e-mail in it's full form and this is also why you want user to interact with the page before you assign such variables. If your javascript object model contains any e-mail addresses on DOM ready state, you're exposing them to the spammers.
The HTML:
<div data-bind="foreach: contacts">
<div class="contact">
<div>
<h5 data-bind="text: firstName + ' ' + lastName + ' / ' + department"></h5>
<ul>
<li>Phone: <span data-bind="text: phone"></span></li>
<li><a href="#999" data-bind="click:$root.reveal">E-mail</a> <span data-bind="visible: $root.msgMeToThis() != ''"><input class="merged" data-bind="value: mPrefix" readonly="readonly" /><span data-bind="text: '@' + domain"></span></span></li>
</ul>
</div>
</div>
</div>
The JS
function ViewModel(){
var self = this;
self.contacts = ko.observableArray([
{ firstName:'John', mPrefix: 'john.doe', domain: 'domain.com', lastName: 'Doe', department: 'Sales', phone: '+358 12 345 6789' },
{ firstName:'Joe', mPrefix: 'joe.w', domain: 'wonder.com', lastName: 'Wonder', department: 'Time wasting', phone: '+358 98 765 4321' },
{ firstName:'Mike', mPrefix: 'yo', domain: 'rappin.com', lastName: 'Rophone', department: 'Audio', phone: '+358 11 222 3333' }
]);
self.msgMeToThis = ko.observable('');
self.reveal = function(m, e){
var name = e.target.attributes.href.value;
name = name.replace('#', '');
self.msgMeToThis(name);
};
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
I like ofaurax's answer best but I would modify to this for a little more hidden email:
onclick="p1='admin'; p2='domain.com'; this.href='mailto:' + p1 + '& #x40;' + p2"
after using so many techniques i found an easy way and very friendly, the bots search for @ Símbolo and recently they search for [at] ant it's variation so i use 2 techniques
- i write my email on an image like the domaintolls use and it works perfectly or
- to replace the Símbolo (@) with an image of it like
and the image alt will be alt="@" so the bot will find an image and any human will see it as a normal address so if he copy it he will copy the email and the job is don
so the code will be
<p>myname<img src="http://www.traidnt.net/vb/images/mail2.gif" width="11" height="9" alt="@" />domain.com</p>
One easy solution is to use HTML entities instead of actual characters. For example, the "[email protected]" will be converted into :
<a href="mailto:me@example.com">email me</A>
One possibility would be to use isTrusted property (Javascript).
The isTrusted read-only property of the Event interface is a Boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via EventTarget.dispatchEvent().
eg in your case:
getEmail() {
if (event.isTrusted) {
/* The event is trusted */
return '[email protected]';
} else {
/* The event is not trusted */
return '[email protected]';
}
}
? IE isn't compatible !
Read more from doc: https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
Here is my working version:
Create somewhere a container with a fallback text:
<div id="knock_knock">Activate JavaScript, please.</div>
And add at the bottom of the DOM (w.r.t. the rendering) the following snippet:
<script>
(function(d,id,lhs,rhs){
d.getElementById(id).innerHTML = "<a rel=\"nofollow\" href=\"mailto"+":"+lhs+"@"+rhs+"\">"+"Mail"+"<\/a>";
})(window.document, "knock_knock", "your.name", "example.com");
</script>
It adds the generated hyperlink to the specified container:
<div id="knock_knock"><a rel="nofollow" href="[email protected]">Mail</a></div>
In addition here is a minified version:
<script>(function(d,i,l,r){d.getElementById(i).innerHTML="<a rel=\"nofollow\" href=\"mailto"+":"+l+"@"+r+"\">"+"Mail"+"<\/a>";})(window.document,"knock_knock","your.name","example.com");</script>
If you have php support, you can do something like this:
<img src="scriptname.php">
And the scriptname.php:
<?php
header("Content-type: image/png");
// Your email address which will be shown in the image
$email = "[email protected]";
$length = (strlen($email)*8);
$im = @ImageCreate ($length, 20)
or die ("Kann keinen neuen GD-Bild-Stream erzeugen");
$background_color = ImageColorAllocate ($im, 255, 255, 255); // White: 255,255,255
$text_color = ImageColorAllocate ($im, 55, 103, 122);
imagestring($im, 3,5,2,$email, $text_color);
imagepng ($im);
?>
I just have to provide an another answer. I just came up with something fun to play with.
I found out that in many common character tables, the letters @ and a-z reappear more than once. You can map the original characters to the new mappings and make it harder for spam bots to figure out what the e-mail is.
If you loop through the string, and get the character code of a letter, then add 65248 to it and build a html entity based on the number, you come up with a human readable e-mail address.
var str = '[email protected]';
str = str.toLowerCase().replace(/[\.@a-z]/gi, function(match, position, str){
var num = str.charCodeAt(position);
return ('&#' + (num + 65248) + ';');
});
Here is a working fiddle: http://jsfiddle.net/EhtSC/8/
You can improve this approach by creating a more complete set of mappings between characters that look the same. But if you copy/paste the e-mail to notepad, for example, you get a lot of boxes.
To overcome some of the user experience issues, I created the e-mail as link. When you click it, it remaps the characters back to their originals.
To improve this, you can create more complex character mappings if you like. If you can find several characters that can be used for example in the place of 'a' why not randomly mapping to those.
Probably not the most secure approach ever but I really had fun playing around with it :D
Here is a simple jquery solution to this problem:
<script type="text/javascript">
$(document).ready(function() {
str1="mailto:";
str2="info";
str3="@test.com";
$("#email_a").attr("href", str1+str2+str3);
});
</script>
<a href="#" id="email_a"><img src="sample.png"/></a>
There are probably bots that recognize the [at] and other disguises as @ symbol. So this is not a really effective method.
Sure you could use some encodings like URL encode or HTML character references (or both):
// PHP example
// encodes every character using URL encoding (%hh)
function foo($str) {
$retVal = '';
$length = strlen($str);
for ($i=0; $i<$length; $i++) $retVal.=sprintf('%%%X', ord($str[$i]));
return $retVal;
}
// encodes every character into HTML character references (&#xhh;)
function bar($str) {
$retVal = '';
$length = strlen($str);
for ($i=0; $i<$length; $i++) $retVal.=sprintf('&#x%X;', ord($str[$i]));
return $retVal;
}
$email = '[email protected]';
echo '<a href="'.bar('mailto:?to=' . foo(','.$email.'')).'">mail me</a>';
// output
// <a href="mailto:?to=%2C%75%73%65%72%40%65%78%61%6D%70%6C%65%2E%63%6F%6D">mail me</a>
But as it is legal to use them, every browser/e-mail client should handle these encodings too.
I have a completely different take on this. I use MailHide for this.
MailHide is a system from Google whereby the user needs to complete a reCAPTCHA test to then reveal the email to them.
Have a look at this way, pretty clever and using css.
CSS
span.reverse {
unicode-bidi: bidi-override;
direction: rtl;
}
HTML
<span class="reverse">moc.rehtrebttam@retsambew</span>
The CSS above will then override the reading direction and present the text to the user in the correct order.
Hope it helps
Cheers
after using so many techniques i found an easy way and very friendly, the bots search for @ Símbolo and recently they search for [at] ant it's variation so i use 2 techniques
- i write my email on an image like the domaintolls use and it works perfectly or
- to replace the Símbolo (@) with an image of it like
and the image alt will be alt="@" so the bot will find an image and any human will see it as a normal address so if he copy it he will copy the email and the job is don
so the code will be
<p>myname<img src="http://www.traidnt.net/vb/images/mail2.gif" width="11" height="9" alt="@" />domain.com</p>
I have a completely different take on this. I use MailHide for this.
MailHide is a system from Google whereby the user needs to complete a reCAPTCHA test to then reveal the email to them.
I am a fan of SpamSpan - it is obfuscated, but still decipherable if JS is disabled. It seems to work too, although I've only been using it for about a year on a low-traffic website.
There is also a module for Drupal to automatically turn emails into SpamSpans, if you need one.
One easy solution is to use HTML entities instead of actual characters. For example, the "[email protected]" will be converted into :
<a href="mailto:me@example.com">email me</A>
Spambots won't interpret this, because it is a lesser-known method :)
First, define the css:
email:before {
content: "admin";
}
email:after {
content: "@example.com";
}
Now, wherever you want to display your email, simply insert the following HTML:
<div id="email"></div>
And tada!
Working with content and attr in CSS:
.cryptedmail:after {_x000D_
content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); _x000D_
}<a href="#" class="cryptedmail"_x000D_
data-name="info"_x000D_
data-domain="example"_x000D_
data-tld="org"_x000D_
onclick="window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld; return false;"></a>When javascript is disabled, just the click event will not work, email is still displayed.
Another interesting approach (at least without a click event) would be to make use of the right-to-left mark to override the writing direction. more about this: https://en.wikipedia.org/wiki/Right-to-left_mark
This is the method I used, with a server-side include, e.g. <!--#include file="emailObfuscator.include" --> where emailObfuscator.include contains the following:
<!-- // http://lists.evolt.org/archive/Week-of-Mon-20040202/154813.html -->
<script type="text/javascript">
function gen_mail_to_link(lhs,rhs,subject) {
document.write("<a href=\"mailto");
document.write(":" + lhs + "@");
document.write(rhs + "?subject=" + subject + "\">" + lhs + "@" + rhs + "<\/a>");
}
</script>
To include an address, I use JavaScript:
<script type="text/javascript">
gen_mail_to_link('john.doe','example.com','Feedback about your site...');
</script>
<noscript>
<em>Email address protected by JavaScript. Activate JavaScript to see the email.</em>
</noscript>
Because I have been getting email via Gmail since 2005, spam is pretty much a non-issue. So, I can't speak of how effective this method is. You might want to read this study (although it's old) that produced this graph:
There are probably bots that recognize the [at] and other disguises as @ symbol. So this is not a really effective method.
Sure you could use some encodings like URL encode or HTML character references (or both):
// PHP example
// encodes every character using URL encoding (%hh)
function foo($str) {
$retVal = '';
$length = strlen($str);
for ($i=0; $i<$length; $i++) $retVal.=sprintf('%%%X', ord($str[$i]));
return $retVal;
}
// encodes every character into HTML character references (&#xhh;)
function bar($str) {
$retVal = '';
$length = strlen($str);
for ($i=0; $i<$length; $i++) $retVal.=sprintf('&#x%X;', ord($str[$i]));
return $retVal;
}
$email = '[email protected]';
echo '<a href="'.bar('mailto:?to=' . foo(','.$email.'')).'">mail me</a>';
// output
// <a href="mailto:?to=%2C%75%73%65%72%40%65%78%61%6D%70%6C%65%2E%63%6F%6D">mail me</a>
But as it is legal to use them, every browser/e-mail client should handle these encodings too.
This is the method I used, with a server-side include, e.g. <!--#include file="emailObfuscator.include" --> where emailObfuscator.include contains the following:
<!-- // http://lists.evolt.org/archive/Week-of-Mon-20040202/154813.html -->
<script type="text/javascript">
function gen_mail_to_link(lhs,rhs,subject) {
document.write("<a href=\"mailto");
document.write(":" + lhs + "@");
document.write(rhs + "?subject=" + subject + "\">" + lhs + "@" + rhs + "<\/a>");
}
</script>
To include an address, I use JavaScript:
<script type="text/javascript">
gen_mail_to_link('john.doe','example.com','Feedback about your site...');
</script>
<noscript>
<em>Email address protected by JavaScript. Activate JavaScript to see the email.</em>
</noscript>
Because I have been getting email via Gmail since 2005, spam is pretty much a non-issue. So, I can't speak of how effective this method is. You might want to read this study (although it's old) that produced this graph:
I think the only foolproof method you can have is creating a Contact Me page that is a form that submits to a script that sends to your email address. That way, your address is never exposed to the public at all. This may be undesirable for some reason, but I think it's a pretty good solution. It often irks me when I'm forced to copy/paste someone's email address from their site to my mail client and send them a message; I'd rather do it right through a form on their site. Also, this approach allows you to have anonymous comments sent to you, etc. Just be sure to protect your form using some kind of anti-bot scheme, such as a captcha. There are plenty of them discussed here on SO.
I use a very simple combination of CSS and jQuery which displays the email address correctly to the user and also works when the anchor is clicked or hovered:
HTML:
<a href="mailto:[email protected]" id="lnkMail">moc.elpmaxe@em</a>
CSS:
#lnkMail {
unicode-bidi: bidi-override;
direction: rtl;
}
jQuery:
$('#lnkMail').hover(function(){
// here you can use whatever replace you want
var newHref = $(this).attr('href').replace('spam', 'com');
$(this).attr('href', newHref);
});
Here is a working example.
I have a completely different take on this. I use MailHide for this.
MailHide is a system from Google whereby the user needs to complete a reCAPTCHA test to then reveal the email to them.
Spambots won't interpret this, because it is a lesser-known method :)
First, define the css:
email:before {
content: "admin";
}
email:after {
content: "@example.com";
}
Now, wherever you want to display your email, simply insert the following HTML:
<div id="email"></div>
And tada!
If you have php support, you can do something like this:
<img src="scriptname.php">
And the scriptname.php:
<?php
header("Content-type: image/png");
// Your email address which will be shown in the image
$email = "[email protected]";
$length = (strlen($email)*8);
$im = @ImageCreate ($length, 20)
or die ("Kann keinen neuen GD-Bild-Stream erzeugen");
$background_color = ImageColorAllocate ($im, 255, 255, 255); // White: 255,255,255
$text_color = ImageColorAllocate ($im, 55, 103, 122);
imagestring($im, 3,5,2,$email, $text_color);
imagepng ($im);
?>
I think the only foolproof method you can have is creating a Contact Me page that is a form that submits to a script that sends to your email address. That way, your address is never exposed to the public at all. This may be undesirable for some reason, but I think it's a pretty good solution. It often irks me when I'm forced to copy/paste someone's email address from their site to my mail client and send them a message; I'd rather do it right through a form on their site. Also, this approach allows you to have anonymous comments sent to you, etc. Just be sure to protect your form using some kind of anti-bot scheme, such as a captcha. There are plenty of them discussed here on SO.
There is a open licence PHP script that outputs javascript which encodes the mail: http://www.maurits.vdschee.nl/php_hide_email/. You can then easily call the php function with the specific mail as an argument.
The best method hiding email addresses is only good until bot programmer discover this "encoding" and implement a decryption algorithm.
The JavaScript option won't work long, because there are a lot of crawler interpreting JavaScript.
There's no answer, imho.
There are probably bots that recognize the [at] and other disguises as @ symbol. So this is not a really effective method.
Sure you could use some encodings like URL encode or HTML character references (or both):
// PHP example
// encodes every character using URL encoding (%hh)
function foo($str) {
$retVal = '';
$length = strlen($str);
for ($i=0; $i<$length; $i++) $retVal.=sprintf('%%%X', ord($str[$i]));
return $retVal;
}
// encodes every character into HTML character references (&#xhh;)
function bar($str) {
$retVal = '';
$length = strlen($str);
for ($i=0; $i<$length; $i++) $retVal.=sprintf('&#x%X;', ord($str[$i]));
return $retVal;
}
$email = '[email protected]';
echo '<a href="'.bar('mailto:?to=' . foo(','.$email.'')).'">mail me</a>';
// output
// <a href="mailto:?to=%2C%75%73%65%72%40%65%78%61%6D%70%6C%65%2E%63%6F%6D">mail me</a>
But as it is legal to use them, every browser/e-mail client should handle these encodings too.
I think the only foolproof method you can have is creating a Contact Me page that is a form that submits to a script that sends to your email address. That way, your address is never exposed to the public at all. This may be undesirable for some reason, but I think it's a pretty good solution. It often irks me when I'm forced to copy/paste someone's email address from their site to my mail client and send them a message; I'd rather do it right through a form on their site. Also, this approach allows you to have anonymous comments sent to you, etc. Just be sure to protect your form using some kind of anti-bot scheme, such as a captcha. There are plenty of them discussed here on SO.
Option 1 : Split email address into multiple parts and create an array in JavaScript out of these parts. Next join these parts in the correct order and use the .innerHTML property to add the email address to the web page.
<span id="email"> </span> // blank tag
<script>
var parts = ["info", "XXXXabc", "com", ".", "@"];
var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
document.getElementById("email").innerHTML=email;
</script>
Option 2 : Use image instead of email text
Image creator website from text : http://www.chxo.com/labelgen/
Option 3 : We can use AT instead of "@" and DOT instead of " . "
i.e :
info(AT)XXXabc(DOT)com
First I would make sure the email address only shows when you have javascript enabled. This way, there is no plain text that can be read without javascript.
Secondly, A way of implementing a safe feature is by staying away from the <button> tag. This tag needs a text insert between the tags, which makes it computer-readable. Instead try the <input type="button"> with a javascript handler for an onClick.
Then use all of the techniques mentioned by otherse to implement a safe email notation.
One other option is to have a button with "Click to see emailaddress". Once clicked this changes into a coded email (the characters in HTML codes). On another click this redirects to the 'mailto:email' function
An uncoded version of the last idea, with selectable and non-selectable email addresses:
<html>
<body>
<script type="text/javascript">
e1="@domain";
e2="me";
e3=".extension";
email_link="mailto:"+e2+e1+e3;
</script>
<input type="text" onClick="this.onClick=window.open(email_link);" value="Click for mail"/>
<input type="text" onClick="this.value=email;" value="Click for mail-address"/>
<input type="button" onClick="this.onClick=window.open(email_link);" value="Click for mail"/>
<input type="button" onClick="this.value=email;" value="Click for mail-address"/>
</body></html>
See if this is something you would want and combine it with others' ideas. You can never be too sure.
Does it work if I right-click on the link and choose "copy URL"? If not, it's very much not an ideal situation (I very seldom click on a mailto link, preferring to copy the email address and paste it into my mail application or wherever else I need it at a specific point in time).
I used to be fairly paranoid protecting my mail address on-line (UseNet, web and the like), but these days I suspect more "possible targets for spam" are actually generated matching local-parts to domains programmatically. I base this on having, on occasion, gone through my mail server logs. There tends to be quite a few delivery attempts to non-existing addresses (including truncated versions of spam-bait I dangled on UseNet back in the late 90s, when address-scraping was very prevalent).
First I would make sure the email address only shows when you have javascript enabled. This way, there is no plain text that can be read without javascript.
Secondly, A way of implementing a safe feature is by staying away from the <button> tag. This tag needs a text insert between the tags, which makes it computer-readable. Instead try the <input type="button"> with a javascript handler for an onClick.
Then use all of the techniques mentioned by otherse to implement a safe email notation.
One other option is to have a button with "Click to see emailaddress". Once clicked this changes into a coded email (the characters in HTML codes). On another click this redirects to the 'mailto:email' function
An uncoded version of the last idea, with selectable and non-selectable email addresses:
<html>
<body>
<script type="text/javascript">
e1="@domain";
e2="me";
e3=".extension";
email_link="mailto:"+e2+e1+e3;
</script>
<input type="text" onClick="this.onClick=window.open(email_link);" value="Click for mail"/>
<input type="text" onClick="this.value=email;" value="Click for mail-address"/>
<input type="button" onClick="this.onClick=window.open(email_link);" value="Click for mail"/>
<input type="button" onClick="this.value=email;" value="Click for mail-address"/>
</body></html>
See if this is something you would want and combine it with others' ideas. You can never be too sure.
I use a very simple combination of CSS and jQuery which displays the email address correctly to the user and also works when the anchor is clicked or hovered:
HTML:
<a href="mailto:[email protected]" id="lnkMail">moc.elpmaxe@em</a>
CSS:
#lnkMail {
unicode-bidi: bidi-override;
direction: rtl;
}
jQuery:
$('#lnkMail').hover(function(){
// here you can use whatever replace you want
var newHref = $(this).attr('href').replace('spam', 'com');
$(this).attr('href', newHref);
});
Here is a working example.
I know my answer won't be liked by many but please consider the points outlined here before thumbing down.
Anything easily machine readable will be easily machine readable by the spammers. Even though their actions seem stupid to us, they're not stupid people. They're innovative and resourceful. They do not just use bots to harvest e-mails, they have a plethora of methods at their disposal and in addition to that, they simply pay for good fresh lists of e-mails. What it means is, that they got thousands of black-hat hackers worldwide to execute their jobs. People ready to code malware that scrape the screens of other peoples' browsers which eventually renders any method you're trying to achieve useless. This thread has already been read by 10+ such people and they're laughing at us. Some of them may be even bored to tears to find out we cannot put up a new challenge to them.
Keep in mind that you're not eventually trying to save your time but the time of others. Because of this, please consider spending some extra time here. There is no easy-to-execute magic bullet that would work. If you work in a company that publishes 100 peoples' e-mails on the site and you can reduce 1 spam e-mail per day per person, we're talking about 36500 spam emails a year. If deleting such e-mail takes 5 seconds on average, we're talking about 50 working hours yearly. Not to mention the reduced amount of annoyance. So, why not spend a few hours on this?
It's not only you and the people who receive the e-mail that consider time an asset. Therefore, you must find a way to obfuscate the e-mail addresses in such way, that it doesn't pay off to crack it. If you use some widely used method to obfuscate the e-mails, it really pays off to crack it. Since as an result, the cracker will get their hands on thousands, if not tens or hundreds of thousands of fresh e-mails. And for them, they will get money.
So, go ahead and code your own method. This is a rare case where reinventing the wheel really pays off. Use a method that is not machine readable and one which will preferably require some user interaction without sacrificing the user experience.
I spent some 20 minutes to code off an example of what I mean. In the example, I used KnockoutJS simply because I like it and I know you won't probably use it yourself. But it's irrelevant anyway. It's a custom solution which is not widely used. Cracking it won't pose a reward for doing it since the method of doing it would only work on a single page in the vast internet.
Here's the fiddle: http://jsfiddle.net/hzaw6/
The below code is not meant to be an example of good code. But just a quick sample of code which is very hard for machine to figure out we even handle e-mails in here. And even if it could be done, it's not gonna pay off to execute in large scale.
And yes, I do know it doesn't work on IE = lte8 because of 'Unable to get property 'attributes' of undefined or null reference' but I simply don't care because it's just a demo of method, not actual implementation, and not intended to be used on production as it is. Feel free to code your own which is cooler, technically more solid etc..
Oh, and never ever ever name something mail or email in html or javascript. It's just way too easy to scrape the DOM and the window object for anything named mail or email and check if it contains something that matches an e-mail. This is why you don't want any variables ever that would contain e-mail in it's full form and this is also why you want user to interact with the page before you assign such variables. If your javascript object model contains any e-mail addresses on DOM ready state, you're exposing them to the spammers.
The HTML:
<div data-bind="foreach: contacts">
<div class="contact">
<div>
<h5 data-bind="text: firstName + ' ' + lastName + ' / ' + department"></h5>
<ul>
<li>Phone: <span data-bind="text: phone"></span></li>
<li><a href="#999" data-bind="click:$root.reveal">E-mail</a> <span data-bind="visible: $root.msgMeToThis() != ''"><input class="merged" data-bind="value: mPrefix" readonly="readonly" /><span data-bind="text: '@' + domain"></span></span></li>
</ul>
</div>
</div>
</div>
The JS
function ViewModel(){
var self = this;
self.contacts = ko.observableArray([
{ firstName:'John', mPrefix: 'john.doe', domain: 'domain.com', lastName: 'Doe', department: 'Sales', phone: '+358 12 345 6789' },
{ firstName:'Joe', mPrefix: 'joe.w', domain: 'wonder.com', lastName: 'Wonder', department: 'Time wasting', phone: '+358 98 765 4321' },
{ firstName:'Mike', mPrefix: 'yo', domain: 'rappin.com', lastName: 'Rophone', department: 'Audio', phone: '+358 11 222 3333' }
]);
self.msgMeToThis = ko.observable('');
self.reveal = function(m, e){
var name = e.target.attributes.href.value;
name = name.replace('#', '');
self.msgMeToThis(name);
};
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
Here is my working version:
Create somewhere a container with a fallback text:
<div id="knock_knock">Activate JavaScript, please.</div>
And add at the bottom of the DOM (w.r.t. the rendering) the following snippet:
<script>
(function(d,id,lhs,rhs){
d.getElementById(id).innerHTML = "<a rel=\"nofollow\" href=\"mailto"+":"+lhs+"@"+rhs+"\">"+"Mail"+"<\/a>";
})(window.document, "knock_knock", "your.name", "example.com");
</script>
It adds the generated hyperlink to the specified container:
<div id="knock_knock"><a rel="nofollow" href="[email protected]">Mail</a></div>
In addition here is a minified version:
<script>(function(d,i,l,r){d.getElementById(i).innerHTML="<a rel=\"nofollow\" href=\"mailto"+":"+l+"@"+r+"\">"+"Mail"+"<\/a>";})(window.document,"knock_knock","your.name","example.com");</script>
There is a open licence PHP script that outputs javascript which encodes the mail: http://www.maurits.vdschee.nl/php_hide_email/. You can then easily call the php function with the specific mail as an argument.
!- Adding this for reference, don't know how outdated the information might be, but it tells about a few simple solutions that don't require the use of any scripting
After searching for this myself i came across this page but also these pages:
http://nadeausoftware.com/articles/2007/05/stop_spammer_email_harvesters_obfuscating_email_addresses
try reversing the emailadress
Example plain HTML:
<bdo dir="rtl">moc.elpmaxe@nosrep</bdo>
Result : [email protected]
The same effect using CSS
CSS:
.reverse { unicode-bidi:bidi-override; direction:rtl; }
HTML:
<span class="reverse">moc.elpmaxe@nosrep</span>
Result : [email protected]
Combining this with any of earlier mentioned methods may even make it more effective
See Making email addresses safe from bots on a webpage?
I like the way Facebook and others render an image of your email address.
I have also used The Enkoder in the past - thought it was very good to be honest!
This is probably the best and easiest email protector on the internet. Very simple yet it has the ability to add all the bells and whistles.
Uses JavaScript. I've been using it successfully for years.
One possibility would be to use isTrusted property (Javascript).
The isTrusted read-only property of the Event interface is a Boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via EventTarget.dispatchEvent().
eg in your case:
getEmail() {
if (event.isTrusted) {
/* The event is trusted */
return '[email protected]';
} else {
/* The event is not trusted */
return '[email protected]';
}
}
? IE isn't compatible !
Read more from doc: https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
First I would make sure the email address only shows when you have javascript enabled. This way, there is no plain text that can be read without javascript.
Secondly, A way of implementing a safe feature is by staying away from the <button> tag. This tag needs a text insert between the tags, which makes it computer-readable. Instead try the <input type="button"> with a javascript handler for an onClick.
Then use all of the techniques mentioned by otherse to implement a safe email notation.
One other option is to have a button with "Click to see emailaddress". Once clicked this changes into a coded email (the characters in HTML codes). On another click this redirects to the 'mailto:email' function
An uncoded version of the last idea, with selectable and non-selectable email addresses:
<html>
<body>
<script type="text/javascript">
e1="@domain";
e2="me";
e3=".extension";
email_link="mailto:"+e2+e1+e3;
</script>
<input type="text" onClick="this.onClick=window.open(email_link);" value="Click for mail"/>
<input type="text" onClick="this.value=email;" value="Click for mail-address"/>
<input type="button" onClick="this.onClick=window.open(email_link);" value="Click for mail"/>
<input type="button" onClick="this.value=email;" value="Click for mail-address"/>
</body></html>
See if this is something you would want and combine it with others' ideas. You can never be too sure.
You can try to hide characters using html entities in hexa (ex: @ for @). This is convenient solution, as a correct browser will translate it, and you can have a normal link. The drawback is that a bot can translate it theorically, but it's a bit unusual. I use this to protect my e-mail on my blog.
Another solution is to use javascript to assemble part of the address and to decode on-the-fly the address. The drawback is that a javascript-disabled browser won't show your adress.
The most effective solution is to use an image, but it's a pain for the user to have to copy the address by hand.
Your solution is pretty good, as you only add a drawback (writing manually the @) only for user that have javascript disabled. You can also be more secure with :
onclick="this.href='mailto:' + 'admin' + '@' + 'domain.com'"
Another option, I perefer font awesome icons
Fa implementation:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Mail Address:
<a href="mailto:[email protected]"><span class="label">info<i class="fa fa-at"></i>uploadimage.club</span></a>
If you have php support, you can do something like this:
<img src="scriptname.php">
And the scriptname.php:
<?php
header("Content-type: image/png");
// Your email address which will be shown in the image
$email = "[email protected]";
$length = (strlen($email)*8);
$im = @ImageCreate ($length, 20)
or die ("Kann keinen neuen GD-Bild-Stream erzeugen");
$background_color = ImageColorAllocate ($im, 255, 255, 255); // White: 255,255,255
$text_color = ImageColorAllocate ($im, 55, 103, 122);
imagestring($im, 3,5,2,$email, $text_color);
imagepng ($im);
?>
Here is a simple jquery solution to this problem:
<script type="text/javascript">
$(document).ready(function() {
str1="mailto:";
str2="info";
str3="@test.com";
$("#email_a").attr("href", str1+str2+str3);
});
</script>
<a href="#" id="email_a"><img src="sample.png"/></a>
I don't like JavaScript and HTML to be mixed, that's why I use this solution. It works fine for me, for now.
Idea: you could make it more complicated by providing encrypted information in the data-attributes and decrypt it within the JS. This is simply done by replacing letters or just reversing them.
HTML:
<span class="generate-email" data-part1="john" data-part2="gmail" data-part3="com">placeholder</span>
JS:
$(function() {
$('.generate-email').each(function() {
var that = $(this);
that.html(
that.data('part1') + '@' + that.data('part2') + '.' + that.data('part3')
);
});
});
Try it: http://jsfiddle.net/x6g9L817/
Another option, I perefer font awesome icons
Fa implementation:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Mail Address:
<a href="mailto:[email protected]"><span class="label">info<i class="fa fa-at"></i>uploadimage.club</span></a>
If you have php support, you can do something like this:
<img src="scriptname.php">
And the scriptname.php:
<?php
header("Content-type: image/png");
// Your email address which will be shown in the image
$email = "[email protected]";
$length = (strlen($email)*8);
$im = @ImageCreate ($length, 20)
or die ("Kann keinen neuen GD-Bild-Stream erzeugen");
$background_color = ImageColorAllocate ($im, 255, 255, 255); // White: 255,255,255
$text_color = ImageColorAllocate ($im, 55, 103, 122);
imagestring($im, 3,5,2,$email, $text_color);
imagepng ($im);
?>
One easy solution is to use HTML entities instead of actual characters. For example, the "[email protected]" will be converted into :
<a href="mailto:me@example.com">email me</A>
The best method hiding email addresses is only good until bot programmer discover this "encoding" and implement a decryption algorithm.
The JavaScript option won't work long, because there are a lot of crawler interpreting JavaScript.
There's no answer, imho.
!- Adding this for reference, don't know how outdated the information might be, but it tells about a few simple solutions that don't require the use of any scripting
After searching for this myself i came across this page but also these pages:
http://nadeausoftware.com/articles/2007/05/stop_spammer_email_harvesters_obfuscating_email_addresses
try reversing the emailadress
Example plain HTML:
<bdo dir="rtl">moc.elpmaxe@nosrep</bdo>
Result : [email protected]
The same effect using CSS
CSS:
.reverse { unicode-bidi:bidi-override; direction:rtl; }
HTML:
<span class="reverse">moc.elpmaxe@nosrep</span>
Result : [email protected]
Combining this with any of earlier mentioned methods may even make it more effective
You can try to hide characters using html entities in hexa (ex: @ for @). This is convenient solution, as a correct browser will translate it, and you can have a normal link. The drawback is that a bot can translate it theorically, but it's a bit unusual. I use this to protect my e-mail on my blog.
Another solution is to use javascript to assemble part of the address and to decode on-the-fly the address. The drawback is that a javascript-disabled browser won't show your adress.
The most effective solution is to use an image, but it's a pain for the user to have to copy the address by hand.
Your solution is pretty good, as you only add a drawback (writing manually the @) only for user that have javascript disabled. You can also be more secure with :
onclick="this.href='mailto:' + 'admin' + '@' + 'domain.com'"
Source: Stackoverflow.com