Best way to obfuscate an e-mail address on a website?

Question

I've spent the past few days working on updating my personal website. The URL of my personal website is (my first name).(my last name).com, as my last name is rather unusual, and I was lucky enough to pick up the domain name. My e-mail address is (my first name)@(my last name).com. So really, when it comes down to guessing it, it's not very hard.

Anyways, I want to integrate a mailto: link into my website, so people can contact me. And, despite my e-mail address not being very hard to guess, I'd rather not have it harvested by spam bots that just crawl websites for e-mail address patterns and add them to their database.

What is the best way for me to obfuscate my e-mail address, preferably in link form? The methods I know of are:

<a href="mailto:[email protected]">e-mail me</a>

It works, but it also means that as soon as my website hits Google, I'll be wading through spam as spam bots easily pick out my e-mail address.

<img src="images/e-mail.png" />

This is less desirable, because not only will visitors be unable to click on it to send me an e-mail, but smarter spam bots will probably be able to detect the characters that the image contains.

I know that there is probably no perfect solution, but I was just wondering what everyone thought was best. I'm definitely willing to use JavaScript if necessary, as my website already makes use of tons of it.

Amalle

See superuser question – Hoch

This post should be linked here. – Jd

Answer 1

I encode the characters as HTML entities (something like this). It doesn't require JS to be enabled and seems to have stopped most of the spam. I suppose a smart bot might still harvest it, but I haven't had any problems.

Merritt

I've used this method in the past, but it was dead simple for me to get around it (for parsing my own documents in some cases) so I can't imagine it would be any less so for a bot. – Patmore

This stops the simplest sort of spambot harvesting (regex looking for any text that resembles and e-mail address), and has no downside: it is just as convenient for the end user as the explict href=mailto:xxx@yy link. – Cordage

I've used this method before and it seems to work pretty well. It's about the only method I could find that works in Lynx/w3m too.. – Epexegesis

This works pretty well because many (most?) of the crawlers/harvesters are incredibly stupid. – Standush

This will work well until the stupid harvesters read this thread and update ;) – Unifoliolate

According to this empirical study from 2008, URL encode was the next-to-least effective. Only plain text was worse. – Cuba

I know this is late, but it's worth pointing out that the suggestion here was to use HTML entities, which are different than URL encoding. According to that study, using entities for the @ and periods was the second most effective method (the most effective were three methods tied for first that all resulted in 0 spam messages). It would be interesting to see if this still holds nearly 6 years later. – Impossible

I find it ironic that in order to protect your email you have to enter it in to a random, shady-looking form at the site you linked to. Honeypotting, anyone? :) – Savino

Is this answer still relevant in 2019? Is this obfuscation method a good one? – Silkaline

This works well: albionresearch.com/misc/obfuscator.php – Brinkley

@SurjithSM The javascript or non javascript (html entities) version on the website? – Yate

@Yate Non JS version. Made this comment 4 years ago. I now suggest a contact form API like web3forms.com for peace of mind. – Brinkley

Answer 2

Personally, I've given up on hiding my email address. I find it easier to look into better spam-filtering solutions than worry about obfuscating. You could spend days trying to find the best way to obfuscate your address, and then all it takes is one person to sell your address to a spammer and all that work was useless.

Pocahontas

No matter how good your spam filtering is there are going to be false negatives (mails that get through that shouldn't). Ultimately you have to live with the e-mail address, but it seems like this kind of unnecessary exposure would increase the recurrence of spam getting through. – Phylum

@Brad in my experience this has not been the case. I use Google hosted mail for my domains and my email address is extremely easy to find. I have had 0 false negatives and 1 false positive since I started using it more than 14 months ago. I get several hundred spams a day in my spam folder. – Rives

I get a bunch of false negatives with Gmail. YMMV. – Patmore

Er, I should add: spam isn't a boogeyman that's going to eat your children. Getting an odd spam email isn't the end of the world. Click "report spam" and move on. – Patmore

@Brad: If it's unnecessary, don't give your address out at all. If it is necessary to give your address out, get ready for spam. You can't make it easy for a human to email you without also making it easy for a spambot to do it. – Ruhr

I just post my email unobfuscated as well. I use gmail, and the spam filter seems to work remarkably well. – Giulietta

Answer 3

The current accepted solution is to create a contact form that allows users to email you. If you receive a lot of spam from that (I don't on my site), then you can add a captcha for good measure, and you'll be far from the "low hanging fruit" at that point.

The fact of the matter is that if you are providing a link that a user can click on to pop open their email client with your address in the To: field, then the computer is able to decipher the email address from the page and so can a spam bot.

Belloir

That is to say, the logic to send the email should be written in hidden server-side code so that the address is never made public. – Belloir

While it's a fine solution, technically, it's a solution that's offputting to many users. Just sayin'. – Patmore

You're absolutely right, but I've never understood why. At most, you are one click away from the web form, just as you would be at minimum with an email client. The only thing that adds difficulty is the optional captcha. If a user can't go through that to contact you, was their message important? – Belloir

I always like it when there's an option to CC you the message. The one thing that bothers me about contact forms is that it leaves no record in my own email system. (Although a form that CCs any email address can create it's own set of problems.) – Hacking

There's also no indication that the email form actually worked. I've seen too many that were silently broken. Real emails bounce, at least. – Mcnair

@Brian Carper: Well, thats an implementation detail. The solution assumes that the programmer is intelligent enough to implement appropriate error handling. – Belloir

If the email bounces after 30 seconds, isn't it too late to inform the user at that point? If you're using a web form, you may as well not even back it with email, just dump the feedback into a database. – Mcnair

No, you still have the chance to email the user back to inform them (provided your SMTP server isn't borked), or inform them on the next pageview. – Belloir

@SamHasler could you explain that set of problems? – Clementius

@EstanislaoStan Spam / abuse – Hacking

Answer 4

You mentioned this is for your personal website. On my personal site (for example, bobsomers.com) I just have a paragraph that says this:

The best way to get in contact with me before the new site is up is to send me an email. My email address is my first name at this website. If you can't figure it out from that hint, well, you might find email more of a challenge than figuring out my address.

People seem to be able to figure that out just fine, as I get legitimate email all the time. Sometimes the best solutions don't require writing any code. :)

Whole

This method also filters out people with IQ lower than a certain level :D – Flightless

Answer 5

A lightweight way to obfuscate the href of an anchor is to base64-encode it:

> btoa('mailto:[email protected]')
< "bWFpbHRvOmVtYWlsQGV4YW1wbGUuY29t"

And then include it hardcoded:

<a href="javascript:window.location.href=atob('bWFpbHRvOmVtYWlsQGV4YW1wbGUuY29t')">E-Mail</a>

Or dynamically server-side e.g. in PHP:

<a href="javascript:window.location.href=atob('<?= base64_encode("mailto:[email protected]") ?>')">E-Mail</a>

In combination with string reversion it could be pretty spam-save:

<a href="javascript:window.location.href=atob('<?= base64_encode("mailto:[email protected]") ?>')" style="unicode-bidi: bidi-override; direction: rtl;"><?= strrev("[email protected]") ?></a>

Ranunculus

note that React shows a warning for setting href like this: Warning: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:window.location.href=atob(base64String)". – Coleencolella

Answer 6

Apparently using CSS to change the direction of your text works pretty well. That link has a test of a bunch of other obfuscation methods as well.

Whatever you use is inevitably going to be defeated. Your primary aim should be to avoid annoying the heck out of your users.

Mcnair

This stuffs up copy and paste maybe ? IIRC – Barometrograph

When the address is copy-pasted, it will show up backwards. This could be off-putting for users, if you want it to be as easy as possible to contact you. – Modica

Answer 7

Don't use any obfuscation techniques here because it's probably the first place the email harvesters will look to find out how people are obfuscating emails. If you have to have your email address visible on the site don't just copy verbatim someone else's method; obfuscate it in some unique way that no other site has used so that your method won't be known to harvesters before they visit your site.

Hacking

Unniloct: Sam Hasler's anwswer applies regardless of what the top answer is. By going with the most popular obfuscation technique, you are going with the most likely target of harvesting. – Patmore

Answer 8

mine is actually simple:

<h3 id="email">[email protected]</h3><!-- add a fake email -->


    $(document).ready(function(){
//my email in reverse :)
            var s = 'moc.elibomajninbew@htiek';
            var e = s.split("").reverse().join("");
            $('#email').html('<a href="mailto:'+e+'">'+e+'</a>');
    });

Endorse

poor guy who owns the [email protected] :) – Reunite

There are no emails on Gmail with 5 characters. – Ibbison

Answer 9

You could do as Google do on Google Code (and Groups). Display a par tof the email, and a clickable portion ("..."). Clicking that indicates you want to know the email, and you are asked to fill in a captcha. Afterwards the email (and others?) are visible to you.

Moonfish

Answer 10

One website I maintain uses a somewhat simplistic JavaScript means of (hopefully) keeping spambots out.

Email links call a JS function:

function sendEmail(name, domain) {
    location.href = 'mailto:' + name + '@' + domain;
}

To make sure only users who have JS enabled can see the link, write them out with this:

function writeEmailLink(realName, name, domain) {
    document.write('<a href="javascript:sendEmail(\''
      + name + '\', \'' + domain + '\')">');
    document.write(realName);
    document.write('</a>');
}   

The use of one JS function to write out a link that calls another means that there are two layers of protection.

Washbasin

Answer 11

As a poster above said, I also use JavaScript obfuscation from the jottings website.

The web page generates some JavaScript which can be improved on. The mailto: text string is in the clear and identifiable by robots (which could spot this and unobfuscate this string), but if one enters into the jottings.com webpage an email address of the form mailto:[email protected] instead of [email protected] and then removes the text mailto: from the JavaScript that is generated, one suddenly has some JavaScript that does not look as though it has anything to do with email at all - just random JavaScript of which the web is full. One can improve this still further by getting rid of the link text - I replaced mine by an image of my email address that is in a fairly obscure font. Then just in case this method on jottings.com becomes popular, I randomized the variable names in the output JavaScript to make it hard for a robot to spot an instance of jottings generated JavaScript code.

Obviously some of these improvements could be built into the mechanism on jottings itself, and since the code is openly available this would be relatively easy.

An example may make this a bit more clear. I used the Jottings Obfuscator at the link above to obscure mailto:[email protected] (note I am cheating on the original intent of the jottings website by entering the string mailto:[email protected] instead of [email protected]) with text "Send Me Email", which jottings turned into this Javascript:

<script type="text/javascript" language="javascript">
<!--
// Email obfuscator script 2.1 by Tim Williams, University of Arizona
// Random encryption key feature by Andrew Moulden, Site Engineering Ltd
// This code is freeware provided these four comment lines remain intact
// A wizard to generate this code is at http://www.jottings.com/obfuscator/
{ coded = "3A1OTJ:[email protected]"
  key = "J0K94NR2SXLupIGqVwt8EZlhznemfaPjs7QvTB6iOyWYo3rAk5FHMdxCg1cDbU"
  shift=coded.length
  link=""
  for (i=0; i<coded.length; i++) {
    if (key.indexOf(coded.charAt(i))==-1) {
      ltr = coded.charAt(i)
      link += (ltr)
    }
    else { 
      ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length
      link += (key.charAt(ltr))
    }
  }
document.write("<a href='mailto:"+link+"'>Send Me Email</a>")
}
//-->
</script><noscript>Sorry, you need Javascript on to email me.</noscript>

After I get that back, I paste it into an editor and:

1. remove the mailto:
2. replace link text with pointer to an image of my email address
3. rename all the variables
4. replace the "noscript" section with another link to the email address image

I end up with this:

<script type="text/javascript" language="javascript">
<!--
// Email obfuscator script 2.1 by Tim Williams, University of Arizona
// Random encryption kkeoy feature by Andrew Moulden, Site Engineering Ltd
// This kudzu is freeware provided these four comment lines remain intact
// A wizard to generate this kudzu is at http://www.jottings.com/obfuscator/
{ kudzu = "3A1OTJ:[email protected]"
  kkeoy = "J0K94NR2SXLupIGqVwt8EZlhznemfaPjs7QvTB6iOyWYo3rAk5FHMdxCg1cDbU"
  shift=kudzu.length
  klonk=""
  for (variter=0; variter<kudzu.length; variter++) {
    if (kkeoy.indexOf(kudzu.charAt(variter))==-1) {
      lutu = kudzu.charAt(variter)
      klonk += (lutu)
    }
    else {
      lutu = (kkeoy.indexOf(kudzu.charAt(variter))-shift+kkeoy.length) % kkeoy.length
      klonk += (kkeoy.charAt(lutu))
    }
  }
document.write("<a href='"+klonk+"'><img src='contactaddressimage.png' alt='Send Me Email' border='0' height='62' width='240'></a>")
}
//-->
</script>
<noscript>
    <img src="contactaddressimage.png" border="0" height="62" width="240">
    <font face="Arial" size="3"><br>&nbsp;</font></p>
</noscript>

Connelley

Answer 12

I don't how well this would work. Could you not leave your email address out and make it load using an AJAX call once the page has finished loading. Not sure if spam bots can pick up the altered HTML or if they are clever enough to listen on other HTTP traffic to try and pick email addresses or if they just scan the page as it is received the first time.

Piwowar

Time spent implementing AJAX email loading implementation: 3 days. Time saved in spam you don't have to delete: 17 minutes. – Guaiacol

Answer 13

One guy tested nine different ways of presenting an email address on a page and then published results on his blog.

His three best ways were:

1. Changing the code direction with CSS
2. Using CSS display:none
3. ROT13 Encryption

Caveat -- this was posted two years ago. Spam bots might've gotten smarter.

Albanese

Answer 14

I agree with @srobinson in that using an online form for encoding to HTML entities seems a little shady. A few lines of Python (3.6+) will do it for you:

def html_entities(text: str) -> str:
    return "".join(f"&#{ord(c)};" for c in text)

Trying that out:

>>> print(html_entities("[email protected]"))
barnstable@example.co&#109

Buttocks

In TypeScript: function htmlEntities(string: string): string { return string.split('').map(char => `&#${char.charCodeAt(0)};`).join(''); } – Clemence

Answer 15

If you work with PHP, you can grab a free script that does that automatically. It's called "Private Daddy" and we use it for our own online audio streaming service. Just one line of code and it works out of the box... you can grab it here

Inextinguishable

I would like to know why someone downvoted this. It would be helpful to explain. – Sense

Answer 16

Another approach could be by using a JavaScript framework and binding the data/model to the HTML elements. In the case of AngularJS, the HTML elements would be written as:

<a href="mailto:{{contactEmail}}"><span>{{contactEmail}}</span></a>

The interpolation {{data}} binding uses a scope variable that contains the actual email value. In addition, a filter could also be used that handles the decoding of the email as follows:

<a href="mailto:{{contactEmail | decode}}"><span>{{contactEmail | decode}}</span></a>

The benefits are in the way the HTML is written. The downside is that it requires scripting support which some for may be a no no.

just another approach.

Adinaadine

Answer 17

Using JQuery, but can easily be ported to plain JS if needed. Will take the following HTML block. This example I provided is also for tel: links for phone calls.

<a class="obfuscate" 
 href="mailto:archie...trajano...net">
 archie...trajano...net
</a>
<a class="obfuscate"
 href="tel:+One FourOneSix-EightFiveSix-SixSixFiveFive">
 FourOneSix-EightFiveSix-SixSixFiveFive
</a>

and convert it to the proper links using Javascript.

$(".obfuscate").each(function () {

$(this).html($(this).html()
.replace("...", "@").replace(/\.\.\./g, ".")
.replace(/One/g, "1")
.replace(/Two/g, "2")
.replace(/Three/g, "3")
.replace(/Four/g, "4")
.replace(/Five/g, "5")
.replace(/Six/g, "6")
.replace(/Seven/g, "7")
.replace(/Eight/g, "8")
.replace(/Nine/g, "9")
.replace(/Zero/g, "0"))

$(this).attr("href", $(this).attr("href")
.replace("...", "@").replace(/\.\.\./g, ".")
.replace(/One/g, "1")
.replace(/Two/g, "2")
.replace(/Three/g, "3")
.replace(/Four/g, "4")
.replace(/Five/g, "5")
.replace(/Six/g, "6")
.replace(/Seven/g, "7")
.replace(/Eight/g, "8")
.replace(/Nine/g, "9")
.replace(/Zero/g, "0"))

})

I documented it in more detail here https://trajano.net/2017/01/obfuscating-mailto-links/

The de/obfuscation algorithm is pretty simple so its not too taxing to write either (no need for base64 parsing)

Feminism

Answer 18

The Ajax call solution

The best is to have a form on the website and not to show email address, because all robots are more intelligent day after day, but if you need to show email address on the website, so, you can make it with ajax call on your server, and show it on click.

HTML

<a class="obfmail" href="#" rel="info">click here to show email address</a>

or

<a class="obfmail" href="#" rel="info">
    <img src="img/click-to-show-email.jpg">
</a>

jQuery

$(document).one'click', '.obfmail', function(e) {
    e.preventDefault();
    a = $(this);
    addr = a.attr('rel');
    $.ajax({
        data: { 
            email: addr
        },
        url : "/a/getemail",
        type: "POST",
        dataType: 'json',
        success: function(data) {
            a.html(data.addr);
            a.attr('href', 'mailto:' + data.addr);
        }
    });
});

PHP

if($_POST['email']) {
    ...
    return json_encode(array(
        code     => '200',
        response => 'success',
        addr     => '[email protected]'
    ));
}

For more security, you can change .on by .one like this $(document).one('click', '.obfmail', function(e) { or even work with a PHP generated token that you pass into data on ajax call, to accept only one call of the ajax function like this :

html: <a class="obfmail" href="#" rel="info" token="w3487ghdr6rc">

jquery:

...
addr = a.attr('rel');
tkn  = a.attr('token');
$.ajax({
    data: { 
        email: addr,
        token: tkn
    }, ...

.

It is possible to encode the returned email address too or invert it.

.

Working fine for phone numbers too !

Logogram

Answer 19

Cloudflare is now offering free email obfuscation service. This might be an option if you use Cloudlfare.

Bonnette

Answer 20

Honestly, your problem may be moot if you asked the question of whether or not a mailto is really what you want to use. A lot of people who use web mail, for example, or do not have the proper mail client setup in their browser are not going to benefit from a mailto. You are exposing your email address for a function that isn't going to work for a large portion of your users.

What you could do instead is use a form to send the e-mail behind the scenes so that the e-mail address is hidden and you don't have to worry about the poor saps who won't benefit from a mailto.

Phylum

Answer 21

If you say on your site that "My e-mail address is (my first name)@(my last name).com.", and your first name and last name are pretty darn obvious, that seems to be the best spam protection you're going to get.

Pleomorphism

aren't parentheses actually allowed in full-fledged emails? seems like that could be a valid email address. :p – Skyrocket

Which is another reason spam bots will miss your inbox. :-) – Pleomorphism

Answer 22

If anyone's using Rails, they can use the actionview-encoded_mail_to gem. (https://github.com/reed/actionview-encoded_mail_to)

There are a few options:

:encode - This key will accept the strings "javascript" or "hex". Passing "javascript" will dynamically create and encode the mailto link then eval it into the DOM of the page. This method will not show the link on the page if the user has JavaScript disabled. Passing "hex" will hex encode the email_address before outputting the mailto link.

:replace_at - When the link name isn't provided, the email_address is used for the link label. You can use this option to obfuscate the email_address by substituting the @ sign with the string given as the value.

:replace_dot - When the link name isn't provided, the email_address is used for the link label. You can use this option to obfuscate the email_address by substituting the . in the email with the string given as the value.

Homage

Answer 23

<!-- Multi-Email Obfuscator  -->
<!-- step 1: &#064; = @  -->
<!-- step 2: a scrap element  -->
<!-- step 3: ROT13 encode for .com  -->
info<!-- step 1 -->&#064;<!-- step 2 --><b style="display:none">my</b>domain<!-- step 3 --><script>document.write(".pbz".replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));</script>

Noted

Answer 24

Since this solution is not mentioned anywhere, but works well for me:

I do this:

• create a mailto link with fake email. I like [email protected] for obvious reasons: Spammer might spam his own botnet when using this address unchecked.

• cypher real email address and put it in an unrelated but findable hidden span or whatever element you like. Obviously to obfuscate the email and hide it from the harvester. Depending on your project structure, you might even want to put it in a JS or Session variable.

• create a click handler for these links after a second that decyphers and write the correct email address into the fake mailto link not preventing defaults. I do not think that crawlers click on mailto links, but if they would, they probaby won't wait a second, while a human being would have to be extremly fast to click a link in the first second after pageload.

Now you have a fully functional but obfuscated, honeypoted and timesecured mailto link.

Working example php file:

<html>
<head>
<title>E-Mail Obfuscating</title>
</head>
<body>
<?php
$email = "[email protected]";
echo "<a class='emailLink' href='mailto:[email protected]' >Send me an e-mail!</a>"
    ."<span style='display:none' data-hash='" . base64_encode($email) . "' />";
?>
<script>
<!--
var emailLinks = document.getElementsByClassName("emailLink");
setTimeout(function() {
    for(var i=0; i <emailLinks.length; ++i){
        emailLinks[i].addEventListener("click", function(){
            let encodedEmail = this.nextSibling.getAttribute('data-hash');
            let decodedEmail = atob(encodedEmail);
            this.href = "mailto:" + decodedEmail;
            this.text = decodedEmail;
        });
    }
}, 1000);

-->
</script>
</body>
</html>

May the code be with you.

Alie

Answer 25

What if creating a link "Contact me" pointing to a directory protected by a password? Of course, you have to give the pass to access.

"Contact me" > ••••••••••• > contact/index.html

Once accessed, the contact/index.html page reveals the email, a mailto for instance.

Kelbee

Answer 26

My solution is to rearrange the characters using css and replacing the element on hover. No change is visible to the user.

const obscureHoverReverseMailTo = input => `<span style="display: inline-flex; color: rgb(0, 0, 238); cursor: pointer; text-decoration: underline;" onmouseover="const newContent = [...this.children].sort((a, b) => a.style.order - b.style.order).map(el => el.innerText).join('');this.outerHTML = \`<a href='mailto: \${newContent}'>\${newContent}</a>\`">${input.split("").map((char, index) => `<span style="order: ${index}">${char}</span>`).sort(() => 0.5 - Math.random()).join("")}</span>`;

const obscureHoverReverseMailTo = input => `<span style="display: inline-flex; color: rgb(0, 0, 238); cursor: pointer; text-decoration: underline;" onmouseover="const newContent = [...this.children].sort((a, b) => a.style.order - b.style.order).map(el => el.innerText).join('');this.outerHTML = \`<a href='mailto: \${newContent}'>\${newContent}</a>\`">${input.split("").map((char, index) => `<span style="order: ${index}">${char}</span>`).sort(() => 0.5 - Math.random()).join("")}</span>`;

document.getElementById("testRoot").innerHTML = obscureHoverReverseMailTo("[email protected]")

<div id="testRoot"></div>

<input type="text" onkeyup="document.getElementById('testOut').innerHTML = obscureHoverReverseMailTo(this.value)">
<div id="testOut"></div>

here is the function if you have something else to hide:

const obscureHoverReverse = input => `<span style="display: inline-flex" onmouseover="this.outerHTML = [...this.children].sort((a, b) => a.style.order - b.style.order).map(el => el.innerText).join('')">${input.split("").map((char, index) => `<span style="order: ${index}">${char}</span>`).sort(() => 0.5 - Math.random()).join("")}</span>`;

Suggestible

Answer 27

Simple JavaScript-unaware bots typically look for mailto: and/or @ in HTML page contents. Obfuscating these keywords will dramatically decrease chances of email address scraping.

A Base-64 encoded URL template mailto:%user%@%domain% can be employed:

function contact(user, domain = location.hostname) {
  const template = atob('bWFpbHRvOiV1c2VyJUAlZG9tYWluJQ==');
  location.href = template
    .replace('%user%', user)
    .replace('%domain%', domain);
  return false;
}

Where 'bWFpbHRvOiV1c2VyJUAlZG9tYWluJQ==' is btoa('mailto:%user%@%domain%').

HTML links would need to be updated as follows:

<a href="javascript: contact('x', 'y.com')">e-mail me</a>

Furthermore, javascript: addresses can be hidden from the users:

<a href="#" onclick="return contact('x', 'y.com')">e-mail me</a>

The return statements prevent the page navigation to the # anchor.

Malti

Answer 28

Unfortunately, some linked sites seem to be down, so I wanted to share a simple method that works well for me (not JS required).

This simple tool converts the normal characters into html only characters e.g.: Hello —> Hello The characters are displayed normally in browsers for the users to see, but it’s harder for bots to get the email, since the email is coded in html characters. I hope this helps.

Here is the site: https://codepen.io/jaymaymo/pen/OgoBYM (yes it's a pen)

<iframe height="300" style="width: 100%;" scrolling="no" title="email encoder from http://wbwip.com/wbw/emailencoder.html" src="https://codepen.io/jaymaymo/embed/OgoBYM?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/jaymaymo/pen/OgoBYM">
  email encoder from http://wbwip.com/wbw/emailencoder.html</a> by Jammie Mountz (<a href="https://codepen.io/jaymaymo">@jaymaymo</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Unitive

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Lookeron

Answer 29

If your website is 100% statically served and has no access to dynamic technologies like php or dot net languages. You would need to use a tool or create some sort of anti bot counter measures through encapsulation or encoding.

I find the most effective method is to create an image but this would require the end user to physically type in what they see in the image. The best thing about images is that it would require a decoder to convert from image to text during there scraping process.

I've researched several methods using encoding and image creation.

First Method (works without modification)

Loop through each character in the email address link (including the mailto: protocol prefix) with the charCodeAt() function of the String object. Then prepend with &# and postfix with ; this value can be used with the anchor tag href attribute directly.

The first method can also use base 16 numbers by prepending with &#x and postfix with ; but would require manual decoding to base 10 using parseInt(value, 16) and then using fromCharCode() from the String object.

Second Method (requires the user to copy the value)

Create a DataURL using the text/html mimetype. The data url should contain a base 64 encoded html page using btoa() which contains a meta refresh tag with the encoded mailto email address link. This would essentially encapsulate the email address entirely.

The DataURL would look something like this (working link)

data:text/html;charset=utf-8;base64,PGh0bWw+PGhlYWQ+PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDsgVVJMPW1haWx0bzomIzEwMTsmIzEwOTsmIzk3OyYjMTA1OyYjMTA4OyYjNjQ7JiMxMDA7JiMxMTE7JiMxMDk7JiM5NzsmIzEwNTsmIzExMDsmIzQ2OyYjOTk7JiMxMTE7JiMxMDk7IiAvPjwvaGVhZD48L2h0bWw+

Example Meta Tag

<meta http-equiv="refresh" content="0; URL=mailto:BASE_10_ENCODED_EMAIL_ADDRESS" />

This meta tag would cause a redirect to the mailto link as it normally would by directly entering it in the address bar. The second method also works with JavaScript but you would be required to manually decode the string using the fromCharCode() then input this into the window.location.href. Using the second method also allows for a timeout of nth seconds if you wish.

Third method (requires an external tool)

Create a simple image that contains the email address in pixels there are many tools online to achieve this.

Fourth Method (requires decoding)

Use a UTF-8 encoded string. You can encode the entire value of the mailto protocol and email address using the \u UTF-8 escape sequence. This is similar to the first method but would require manual decoding. The best package for this would be jconv which has an encode and decode function in the module.

Each of the four methods described above can be demonstrated by the tools i have created.

1. Email Address Encoded
2. Email Address DataURL
3. Email Address Image
4. Email Address UTF-8

January

Answer 30

I use a PHP function to generate some javascript to output the email on page load. Note that you don't need PHP to generate the JS at runtime, you can generate the JS once locally and then include the static JS in your page.

You can also use the linked function with this snippet below to automatically obfuscate email addresses in some given HTML (where $processedContent is the HTML):

 $emailMatches = array();
 $matchCount = preg_match_all('/(?:[a-zA-Z0-9_\.\-])+\@(?:(?:[a-zA-Z0-9\-])+\.)+(?:[a-zA-Z0-9]{2,4})+/', $processedContent, $emailMatches);

 if($matchCount > 0) {
    $emailMatches = $emailMatches[0];

    foreach($emailMatches as $email) {
    $replacement = createJSMailLink($email);

    $processedContent = str_replace($email, createJSMailLink($email), $processedContent);
 }

Harriet

where you defined createJSMailLink()? – Wrangler