1

As Mailhide will be discontinued (to my understanding in Feb 2018), I need a new tool/service to check whether a human user wants to obtain the email address of an employee on our website.

Key requirement is that the tool detects this with an as high as possible probability, i.e. without asking to solve a captcha; of course, as a second level verification, i.e. if the tool/service is not 100% sure, such captcha may be used.

I know of two existing services/tools, i.e. "Nocaptcha Recaptcha" and "Invisible Recaptcha", but maybe there are others as well, and I neither know which of these two meets the requirement best, hence whether the additional “check” (with resulting mouse/finger movements) of the Nocaptcha gives you a (much?) higher succeed % than the invisible one.

  • The deadline is long past. Did you ever find a solution? If so, posting an answer here will help others. – Mawg Oct 2 '18 at 10:24
  • 1
    @Mawg See my comment below browly's answer (which I accepted). I will post my own answer with description of what I did, as it might be useful for others. – Peter K. Oct 10 '18 at 10:54
  • Thanks, Peter. And upvaote, of course :-) – Mawg Oct 10 '18 at 11:44
1

"Nocaptcha Recaptcha" (now called reCAPTCHA v2) and Invisible reCAPTCHA work the same way in the background. The only difference is that reCAPTCHA v2 uses its own button, while Invisible reCAPTCHA uses an existing button on your site the user was going to click anyway. So the success rate should be about the same. Invisible reCAPTCHA just requires more coding to implement.

reCAPTCHA v3 might be what you're looking for. There's no buttons: it runs entirely in the background. This API returns a score reflecting the probability that the user is a bot, and then you decide what to do with the user based on that score.

More info here:

Choosing the type of reCAPTCHA

  • 1
    Thanks a lot for your answer. I did not yet implement another solution yet; the Mailhide actually was not discontinued immediately at the announced date, so I left it at the time. But I checked again today (thanks for reminding me!!), and now I get the dreaded Error 404. So back to work. I will accept your answer, which seems to imply that the Google solution is the best, i.e. de facto standard. This was already my own personal judgment, but as I am not a web dev professional, I wanted the input/confirmation from the community here. So thanks again ! – Peter K. Oct 10 '18 at 10:51
  • You can get around 404 with archive.org – Mawg Oct 10 '18 at 11:44
  • 1
    @Mawg Maybe my comment was not clear, but I meant that I get the 404 when I activate the Mailhide link (i.e. a visitor clicks on the mail icon of a person listed on our website). Do you say that archive.org keeps all these customized Recaptcha/Mailhide urls?? If so, I would be interested to know how to use this. – Peter K. Oct 10 '18 at 13:33
  • Oops! My bad. Sorry :-( – Mawg Oct 10 '18 at 13:34
  • @browly Do you know whether there is any difference between using invisible and v3 with regards to protection/success rate ? – Peter K. Oct 11 '18 at 21:50
0

I accepted the answer from @browly as the "correct" one for the reason I mentioned in the comment. But in this answer I will give some more information on what I actually implemented on my website, just for completeness and in the (maybe vain) hope that it helps someone else.

Preliminary remarks/context :

  • I am not a web dev pro and never had any formal training in web dev; all knowledge is basically Google searched;
  • I built my first website in 2003 (which I am still maintaining/updating in the original version), and have built about 5 other websites since then; all quite low-key. This is just to explain that my experience is really limited, and why my approach might seem a bit old-fashioned compared to all the flashy stuff I seen on the web nowadays;
  • For the topic at hand (how to provide a person's email address on a website), I read many articles, and there does not seem to be a consensus opinion : it goes from "do everything you can to hide/obfuscate" to "it doesn't matter, the spammers can counter every method, and anyways, the email spam filters are so good that it doesn't matter if your email address can be harvested";
  • I am aware of the importance to cater for the visually impaired (or other non-standard visitors), and there are obvious conflicts between some obfuscation methods and keeping information accessible for e.g. screenreaders, so I did try to meet these constraints in my own way, but I do not claim that this is 100% compliant with latest regulations.

Regarding the one but last point, I still would like to "play it safe", and not just put the email addresses in a simple mailto: ...

My implementation :

Next to each person's name, there is the mail symbol and the LinkedIn symbol. Previously, clicking on the mail symbol activated Google Mailhide, and the email address was shown (in a clickable link) in a (ugly!) pop-up window. Duplicating this with one of the ReCaptcha's will be my next challenge (any tips welcome !) and I will document here at a later stage.

What I did already, is showing the email address in picture format when the visitor hovers over the mail symbol (the address is kept visible for 30 seconds after the mouse has moved away from the mail symbol, so plenty of time to see the email address). I went quite far with the obfuscation (belts and suspenders) : I cut the email addresses in three png's (name, @url without tld, i.e. like a twitter handle, and finally ".com"), shown with two different css methods (background and content), in different css selectors, and with the image filenames meaningless. Overkill probably, but I had some fun inventing this. Even with a spambot going through the css, and doing some OCR on image files, I do not think that a robot could patch this together. Downside is of course that the email address is not a clickable mailto: link (on my to-do list as explained above), and that the email address cannot be copy/pasted as it is no text. I should add here that our email address format is very simple (see next point).

For screen readers, the email icon html is <img alt="Our email is Lastname |at| our website address" src="mail-icon-white.png">. This is probably not perfect, but I think it is "good enough" and, maybe not entirely politically correct, if a visitor cannot interpret this, I am not sure I want to receive an email from that person ;)

The functionality implemented is that when the visitor "clicks" on the mail symbol, his mail client is opened with the correct email address (basic mailto: functionality). And this must only work if reCaptcha v3 verification was successful and with a high score.

Some helpful posts : https://stackoverflow.com/questions/7381150/how-to-send-an-email-from-javascript

And here a few helpful links about using reCaptcha v3:

https://github.com/google/recaptcha/tree/master/examples and the demo : https://recaptcha-demo.appspot.com/

https://github.com/hanshuo/mailhide2 (I did not run this yet, but I understand that it just displays the mailto: link, and I want that it directly opens the mail client, i.e. one click less for the user.

My implementation is quite basic :

  • In javascript, I call a php script with the token;
  • I do the verification with Google/recapcha in the php script (it's all basic until here, and this happens automatically just after page load), and I decide whether the results are OK (i.e. successful call and high score) or not, and assign an alphanumeric code to a result string (I do not see the need to send the full JSON results back to the front end);
  • I then echo that string (basically a "Y" or "N") to the front end (javascript), and I store this in a global variable;
  • When a visitor clicks on a mail icon of an employee, a new javascript function is called (with an employee identifier as parameter);
  • That javascript function calls another php script (with the "Y"/"N" parameter and the employee identifier;
  • The php script then decides based on the "Y"/"N" whether to send back the full email address (assigned based on the employee identifier), or an empty string, to the front end;
  • Based on the returned string, the javascript function then either opens a "new mail" window with the correct email address, or does nothing (I do not think this is problematic from a user interface perspective, as this would be the exceptional case that recaptcha returns a bad results, but it is a normal user; and by hovering over the mail icon, the email address was visible in image format, so when clicking doesn't give any results, the user still sees the email address and can type the email address manually).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.