Making email addresses safe from bots on a webpage?

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

I generally don't bother. I used to be on a mailing list that got several thousand spams every day. Our spam filter (spamassassin) let maybe 1 or 2 a day through. With filters this good, why make it difficult for legitimate people to contact you?

Invent your own crazy email address obfuscation scheme. Doesn't matter what it is, really, as long as it's not too similar to any of the commonly known methods.

The problem is that there really isn't a good solution to this, they're all either relatively simple to bypass, or rather irritating for the user. If any one method becomes prevalent, then someone will find a way around it.

So rather than looking for the One True email address obfuscation technique, come up with your own. Count on the fact that these bot authors don't care enough about your site to sit around writing a thing to bypass your slightly crazy rendering-text-with-css-and-element-borders or your completely bizarre, easily-cracked javascript encryption. It doesn't matter if it's trivial, nobody will bother trying to bypass it just so they can spam you.

You can protect your email address with reCAPTCHA, they offer a free service so people have to enter a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) to see your email: https://www.google.com/recaptcha/admin#mailhide

I've written an encoder (source) that uses all kinds of parsing tricks that I could think of (different kinds of HTML entities, URL encoding, comments, multiline attributes, soft hyphens, non-obvious structure of mailto: URL, etc)

It doesn't stop all harvesters, but OTOH it's completely standards-compliant and transparent to the users.

Another IMHO good approach (which you can use in addition to tricky encoding) is along lines of:

<a href="mailto:userhatestogetspam@example.com" 
   onclick="this.href=this.href.replace(/hatestogetspam/,'')">

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.

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    =    "you@yourdomain.com";
$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);
?>

You can try to hide characters using html entities in hexa (ex: &#x40 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 wouldn't bother -- it is fighting the SPAM war at the wrong level. Particularly for company web sites I think it makes things look very unprofessional if you have anything other than the straight text on the page with a mailto hyperlink.

There is so much spam flying around that you need good filtering anyway, and any bot is going end up understanding all the common tricks anyway.

HTML:

<a href="#" class="--mailto--john--domain--com-- other classes goes here" />

JavaScript, using jQuery:

// match all a-elements with "--mailto--" somehere in the class property
$("a[class*='--mailto--']").each(function ()
{
    /*
    for each of those elements use a regular expression to pull
    out the data you need to construct a valid e-mail adress
    */
    var validEmailAdress = this.className.match();

    $(this).click(function ()
    {
        window.location = validEmailAdress;
    });
});

I don't bother. You'll only annoy sophisticated users and confuse unsophisticated users. As others have said, Gmail provides very effective spam filters for a personal/small business domain, and corporate filters are generally also very good.

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 "me@example.com" will be converted into :

<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#109;&#101;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;">email me</A>

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>

The only safest way is of course not to put the email address onto web page in the first place.

Use a contact form instead. Put all of your email addresses into a database and create an HTML form (subject, body, from ...) that submits the contents of the email that the user fills out in the form (along with an id or name that is used to lookup that person's email address in your database) to a server side script that then sends an email to the specified person. At no time is the email address exposed. You will probably want to implement some form of CAPTCHA to deter spambots as well.

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 = 'user@example.com';
echo '<a href="'.bar('mailto:?to=' . foo(','.$email.'')).'">mail me</a>';

// output
// <a href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x3F;&#x74;&#x6F;&#x3D;&#x25;&#x32;&#x43;&#x25;&#x37;&#x35;&#x25;&#x37;&#x33;&#x25;&#x36;&#x35;&#x25;&#x37;&#x32;&#x25;&#x34;&#x30;&#x25;&#x36;&#x35;&#x25;&#x37;&#x38;&#x25;&#x36;&#x31;&#x25;&#x36;&#x44;&#x25;&#x37;&#x30;&#x25;&#x36;&#x43;&#x25;&#x36;&#x35;&#x25;&#x32;&#x45;&#x25;&#x36;&#x33;&#x25;&#x36;&#x46;&#x25;&#x36;&#x44;">mail me</a>

But as it is legal to use them, every browser/e-mail client should handle these encodings too.

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 'your-email@domain.com';
  } else {
    /* The event is not trusted */
    return 'chuck@norris.com';
  }
}

⚠ IE isn't compatible !

Read more from doc: https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

I make mine whateverDOC@whatever.com and then next to it I write "Remove the capital letters"

Another, possibly unique, technique might be to use multiple images and a few plain-text letters to display the address. That might confuse the bots.

Gmail which is free has an awesome spam filter.

If you don't want to use Gmail directly you could send the email to gmail and use gmail forwarding to send it back to you after it has gone through their spam filter.

In a more complex situation, when you need to show a @business.com address you could show the public@business.com and have all this mail forwarded to a gmail account who then forwards it back to the real@business.com

I guess it's not a direct solution to your question but it might help. Gmail being free and having such a good SPAM filter makes using it a very wise choice IMHO.

I receive about 100 spam per day in my gmail account but I can't remember the last time one of them got to my inbox.

To sum up, use a good spam filter whether Gmail or another. Having the user retype or modify the email address that is shown is like using DRM to protect against piracy. Putting the burden on the "good" guy shouldn't be the way to go about doing anything. :)

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.

A script that saves email addresses to png files would be a secure solution ( if you have enough space and you are allowed to embed images in your page )

This is what we use (VB.NET):

Dim rxEmailLink As New Regex("<a\b[^>]*mailto:\b[^>]*>(.*?)</a>")
Dim m As Match = rxEmailLink.Match(Html)
While m.Success
    Dim strEntireLinkOrig As String = m.Value
    Dim strEntireLink As String = strEntireLinkOrig
    strEntireLink = strEntireLink.Replace("'", """") ' replace any single quotes with double quotes to make sure the javascript is well formed
    Dim rxLink As New Regex("(<a\b[^>]*mailto:)([\w.\-_^@]*@[\w.\-_^@]*)(\b[^>]*?)>(.*?)</a>")
    Dim rxLinkMatch As Match = rxLink.Match(strEntireLink)
    Dim strReplace As String = String.Format("<script language=""JavaScript"">document.write('{0}{1}{2}>{3}</a>');</script>", _
                RandomlyChopStringJS(rxLinkMatch.Groups(1).ToString), _
                ConvertToAsciiHex(rxLinkMatch.Groups(2).ToString), _
                rxLinkMatch.Groups(3), _
                ConvertToHtmlEntites(rxLinkMatch.Groups(4).ToString))
    Result = Result.Replace(strEntireLinkOrig, strReplace)
    m = m.NextMatch()
End While

and

    Public Function RandomlyChopStringJS(ByVal s As String) As String
        Dim intChop As Integer = Int(6 * Rnd()) + 1
        Dim intCount As Integer = 0
        RandomlyChopStringJS = ""
        If Not s Is Nothing AndAlso Len(s) > 0 Then
            For Each c As Char In s.ToCharArray()
                If intCount = intChop Then
                    RandomlyChopStringJS &= "'+'"
                    intChop = Int(6 * Rnd()) + 1
                    intCount = 0
                End If
                RandomlyChopStringJS &= c
                intCount += 1
            Next
        End If
    End Function

We override Render and run the outgoing HTML through this before it goes out the door. This renders email addresses that render normally to a browser, but look like this in the source:

<script language="JavaScript">document.write('<a '+'clas'+'s='+'"Mail'+'Link'+'" hr'+'ef'+'="ma'+'ilto:%69%6E%66%6F%40%62%69%63%75%73%61%2E%6F%72%67">&#105;&#110;&#102;&#111;&#64;&#98;&#105;&#99;&#117;&#115;&#97;&#46;&#111;&#114;&#103;</a>');</script>

Obviously not foolproof, but hopefully cuts down on a certain amount of harvesting without making things hard for the visitor.

It depends on what exactly your needs are. For most sites with which I work, I have found it far more useful to put in a "contact me/us" form which sends an email from the system to whomever needs to be contacted. I know that this isn't exactly the solution that you are seeking but it does completely protect against harvesting and so far I have never seen spam sent through a form like that. It will happen but it is very rare and you are never harvested.

This also gives you a chance to log the messages before sending them giving you an extra level of protection against losing a contact, if you so desire.

Spam bots will have their own Javascript and CSS engines over time, so I think you shouldn't look in this direction.

Hidden Base64 solution.

I think it does not matter if you put an email address in a :before/:after pseudo or split it in reverse written data attributes ... Spambots are clever and analyze parsed webpages.

This solution is interactive. The user has to click "show" to get an base64 decoded email address which can be copied and/or is clickable.

// search for [data-b64mail] attributes
document.querySelectorAll('[data-b64mail]').forEach(el => {

  // set "show" link
  el.innerHTML = '<span style="text-decoration:underline;cursor:pointer">show</span>';
    
  // set click event to all elements
  el.addEventListener('click', function (e) {
    let cT = e.currentTarget;

    // show address
    cT.innerHTML = atob(cT.getAttribute('data-b64mail'));
    
    // set mailto on a tags
    if (cT.tagName === 'A')
      cT.setAttribute('href', 'mailto:' + atob(cT.getAttribute('data-b64mail')));

  });

});

// get base64 encoded string
console.log(btoa('mail@example.org'));

<p>E-mail (span): <span data-b64mail="bWFpbEBleGFtcGxlLm9yZw=="></span></p>

<p>E-mail (link): <a href="#" data-b64mail="bWFpbEBleGFtcGxlLm9yZw=="></a></p>