asked on

Prevent / reduce email harvesting using an image – javascript approach ?

Hello Experts,

I am in a position where I need to make an email address visible on a website. Naturally, I’d much prefer not to have it harvested by spammers, or at least significantly reduce that possibility. I have an idea on which I would appreciate an opinion:

From the online research I’ve done, displaying an image of the email address would seem to be one of the most efficient ways of protecting it (I understand it is technically possible to optically scan such an image, but at this point in time is too resource-intensive for the vast majority, if not all web scraper bots).

However, the image approach puts a significant burden on users, as they have to manually type in the address in order to send a message. So it is not an ideal solution.

Now, I understand that bots typically don’t read javascript (again, too resource-intensive). This makes me wonder if it would make sense to work JS so that clicking on the email image brings up the user’s email client and inserts the email address into the “To” field, as would happen with a regular email link ? For clarity, following the image click, JS would do all of this, not anything in the HTML / CSS code. And JS would not display the email address on the page as I have seen with other strategies. The address would only be displayed by the image on the web page.

My online research didn’t turn up any discussion on this specific tactic, so, I thought I would post it here to ask if anyone has any experience using this method, or otherwise would appreciate comments from anyone familiar with this sort of scenario.

Incidentally, I am fully aware that this would not be 100% effective, but I reckon taking some measures is better than nothing. Also, I realize that this would not work for users whose browser has JS disabled, but at least they would be still able to see the email image.

Leonidas Dosas

An another proceeding is to use canvas with your email text inside cover by light gray grid.Check this:

HTML

<canvas id="myCanvas" width="200" height="100"
style="border:2px solid #FF4848;">
</canvas>

Open in new window

JS code:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
ctx.fillStyle="#3923D6";
ctx.fillText("Your email here",20,50);
//I draw vertical lines interval 10px
for (var x = 0.5; x < 200; x += 10) {
  ctx.moveTo(x, 0);
  ctx.lineTo(x, 500);
}
//I draw horixontal lines interval 10px
for (var y = 0.5; y < 100; y += 10) {
  ctx.moveTo(0, y);
  ctx.lineTo(200, y);
}
ctx.strokeStyle = "#ddd";
ctx.stroke();

Open in new window

Rob

The way I've seen it done is to mask or have a "click here" to show the email address.

As an example of what i mean, look at the contact details listed on any property on realestate.com.au

David Johnson, CD

remember that security and ease of use are conflicting items.
you might want to consider google's mailehide https://www.google.com/recaptcha/admin#mailhide
or send the email directly by the application all the user gets is a return email address <their email address>, subject, and body text boxes

Paul McCabe

ASKER

Thank you all for your comments.

Leonidas: I am not a JS expert, but as far as I can see, this is an alternative way to display an email address on a web page without having the address itself in the HTML or CSS code. From the viewpoint of making it more difficult to harvest the email address, is there some essential advantage to using this method over a .jpg or .png image of the email on the web page ? (the scenario in my question)

Rob: I had a look at the realestate.com.au site you suggested. It is a relatively big site, and I can see plenty of forms, but couldn’t find anything where an email appears when a button is clicked. In any case, as mentioned at the start of my question, I need to display the email address on the page. The user base is not very sophisticated.

David: “security and ease of use are conflicting items.” Well, yes I was sort of aware of this. I had considered mailhide, but that and the other potential solution you suggest both involve not displaying the email address on the page. As mentioned in my comments to Rob, the user base is not very sophisticated and I really need to display the email address on a webpage.

However, I don’t think anyone has really touched on my question. Is the specific idea described in my question feasible, and does it seem (on the face of it) good, bad or mediocre ?

Paul McCabe

ASKER

Or is there a better solution that still involves displaying the email address on a web page ?

Rob

Sorry, wrong site

https://www.gumtree.com.au/s-ad/campbelltown/other-parts-accessories/premium-quality-universal-leather-car-seat-cover-heaps-of-designs/1085161501

Look on the right under "send message" there's half a number and a link to "show number". If you click the number it asks you to log in. It's the process here that's important not the fact that this is a phone number and not an email, and the fact it asks you to log in vs whatever you decide to do.

The idea by clicking the "show number" or in your case "show email", is to request the full email from the server and replace that email in the front end using ajax. It's quite simple so let me know if you want an example of how you would do this.

Paul McCabe

ASKER

Rob, thank you for your quick response. I had a look at the site and saw the set-up you describe. It is certainly pretty rigid security, but unfortunately I think most of our users would balk at having to create an account / log in just in order to send us an email. So while this would be an interesting and very secure way to do it, I don't think it would be workable for our user base. I appreciate the suggestion though (I've never seen this particular set-up before).

SOLUTION

Leonidas Dosas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rob

I realised that, sorry I was trying to show you an example of the workflow more so than needing them to log in.

Here is a simple demo of what i meant: http://jsbin.com/legisebera/edit?html,js,output (just click the link and you'll see)

Paul McCabe

ASKER

Leonidas -OK, I see your point. I suppose it would be a bit easier to manipulate the code rather than an image, if the email address needs to be changed. Although I guess a downside is that JS-disabled browsers would not display anything.

Rob -Thank you for the code. However, the email address seems to be contained in the HTML where it is likely the spammers can easily harvest it (even without mailto:). My idea was to have all of the email in the JS where spammers will have a much harder time getting a hold of it (see original question). In fact, as an extra precaution it would be ideal to have the email broken into "parts" within the JS, which are brought together only when the email image on the web page is clicked, for insertion into the address box of the user's default email client. For example, if the email address was example@domain.com. it could be broken into "example", "@doma" and "in.com", none of which is going to be recoginized as a valid email address, or even domain (assuming email harvester bots could even read the JS).

I am really appreciative of your input on this, but to re-confirm, I am just soliciting thoughts here as to whether the anti-email harveting scheme I've outlined in the original question is (i) techically feasible, and (ii) likely to be effective.

Rob

Sure and to be honest it's not the way I would do it and I'm happy to be corrected though I haven't seen a case where it's necessary to display an email on a webpage.

I won't go any further with the idea I've put forward as it doesn't do your original question justice so I'll change tact, even though we could make it work hiding the email in the JS or even on the server.

Please have a read of my article on the subject of capturing a web query and why mailto should really be removed from the internet completely :)

https://www.experts-exchange.com/articles/12871/Avoiding-mailto-and-how-to-capture-a-web-enquiry.html

That is, you should never have to put an email address visible on the web. In my humble opinion it limits how you can capture a web query and exposes you to spam as you've mentioned.

Paul McCabe

ASKER

Rob -thanks again for your comments and link to the article. Re. never having an email visible on the web, I agree that having all users communicate via a form would make life simpler all round, but some customers just prefer email, and I need to cater to them (I have a form right alongside the email address so they can pick their favorite). Incidentally, I am based in Japan, where all "proper" companies are expected to have a visible email on their website, which is another reason for needing to have it visible on the website.

Since the thread is starting to get a little long, I have summarized everything in the attached PDF file.scheme-2017-4-2.pdf

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Paul McCabe

ASKER

Great, thanks ! In that case I'll have it implemented and hopefully be spam-free for a long time ! Thank you for your help.