How to show email addresses on the website to avoid spams?
Asked Answered
A

12

84

I show email on my website as following

 <a href="mailto:[email protected]">Email</a>

But I read the following while analysing my website using woorank.com, what should I do to avoid this?

Malicious bots scrape the web in search of email addresses and plain text email addresses are more likely to be spammed.

Amylase answered 11/4, 2014 at 2:58 Comment(6)
To comply with woorank, you can do anything from making it an image to document.write with javascript and break up the email address. To actually prevent spam... that's another story.Faus
You see a wide variety of solutions to this issue. One is to not make it a link, and print info -AT- example.com, which makes the user type the email address manually if they compose a message. This is fundamentally the same as putting the email in an image -- in both cases, you'd remove the link. Another solution is to add a form with a captcha that submits to the server, which validates the captcha and then sends the email along if all is well.Cynical
Duplicate of: #19359702Soupandfish
@Soupandfish the question is tagged with php but this question is tagged with jsp, there might be a better solution for jsp codersAmylase
This is probably the most authoritative and exhaustive resource on stackexchange for this information and should answer all your questions: superuser.com/questions/235937/…Degradation
Possible duplicate of Effective method to hide email from spam botsHigley
L
28

There are multiple different choices for hiding emails on websites, commonly using either the HTML entity version of the email address (as Aziz-Saleh suggested), but from an actual web design point of view, just putting the email address like that on a website isn't the most user friendly thing to do.

For instance, the mailto: link automatically triggers the browser to open the user's Email Application of choice - but consider this. Not everybody has a dedicated email application. For instance, I don't use Outlook (I'm a Windows user), and unless I have Windows Live Mail installed, my computer can't open that link. I think Chrome can open the links into GMail if you're signed in, but I would need to check that.

Ultimately, by using mailto:, you are potentially alienating a portion of your userbase that will not be able to use that link in the first place.

I would suggest using email forms, and there are plenty of easy-to-follow tutorials available for both PHP and your language of JSP, such as this link here: Sending Email in JSP and even on StackOverflow

By using your server to send the email, you get tighter control over how the email is generated, what data the user is allowed to put in, and you could even send them a return email (generated by the server) to confirm that you have received their message. This is a tried-and-tested real-world method of allowing customers and visitors to contact you, whilst still giving you protection and control over the entire process.

TL;DR: Raw mailto: links might alienate people without dedicated email programs, whereas if you use JSP forms, you can control how they contact you, with what information (you can use fields and the HTML5 required attribute to mandate certain input fields) and you can even respond with a do-not-reply email so they know their message was heard (just don't forget to ask for their email address)

Lobectomy answered 16/4, 2014 at 23:40 Comment(10)
you are right but the only problem of using a "contact page" is that users wont be able to add my email address to their contact list; therefore, everytime they want to send an email need to visit the website.Amylase
@JackMoore, ah okay, well that's an interesting situation. I would suppose that's a little unusual, although what you could do, is when you send the email back to the user, you can set the Header of the email to your own email address, which will then allow the user to add it as a contact (instead of always using do-not-reply or similar)Lobectomy
I strongly suggest not using contact pages. Typing into much too small form fields is a hassle, not being able to attach anything as well, and i guess the percentage of people who want sent mail in their sent folder is much higher than the percentage of people who do not use a mail program.Attalanta
The General Data Protection Regulation (GDPR) is another point against contact pages.Apteryx
@Apteryx How so?Lumenhour
@Lumenhour Since the user has to enter her eMail address into the form, the website owner has to make sure to handle her eMail address accordingly to the GDPR. The users eMail address has to be encrypted before being sent to the server (shouldn't be a problem. Your website should use https anyway). The user has to be informed about how her eMail address is used, how long it is stored and so on.Apteryx
@Apteryx would you also have to inform the user of that information if they are using a mailto link? Pretty much any digital interaction would require that.Calorific
@Calorific No. Your server doesn't see their email if you use a mailto link, so it isn't subject to GDPR.Liverpudlian
@PaintingInAir it's not relevant to the server. If someone sends you an email you are obliged to protect that personal information. You are not allowed to add them to a mailing list without permission or a very good reason, you are not allowed to publish the email around the web. If you never hear from them ever again, you are kind of supposed to delete the email address after a while. Pretty impractical, but the same rules apply whether you acquire the email via a form or otherwise. Just a few extra technical details apply if you are using a form.Calorific
Just make the mailto link with a readable email address. <a href="mailto:{email}">{email}</a> This way people without an email client can just copy paste. Contact pages also need to be protected with captcha which is annoying for the end user. And as mentioned you are now responsible for the storage of the users' personal information, AND making sure their message reaches you correctly. I'm all for mailto links if I can get away with it :p But scraping is a big problem.Dropout
A
43

In the past I have seen this done with javascript. Basically you assign the email address to javascript variables and change the contents of an element using these. You can also provide a fallback for users with javascript disabled which points them in the direction of a form if you need to. Here's an example

var user = 'foo',
    domain = 'bar.com',
    element = document.getElementById('email');

    element.innerHTML = user + '@' + domain;
    //OR
    //'<a href="mailto:' + user + '@' + domain + '">Email</a>'  

This way bots never see the email address as they do not load javascript.

Augmentation answered 21/4, 2014 at 10:17 Comment(1)
But if people have disabled JS then they also can't see the link. Needs to be a fallback for that purpose. It can be achieved with <a href="mailto<!--comment-->me@... or <a href=""><span class="hidden">text</span>Calorific
R
39

Well, you can figure out a different way every day. Here's one using jQuery.

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

Then handle the click with jQuery.

$('a.mail').on('click', function(){
    var href = $(this).attr('href');
    $(this).attr('href', href.replace('badmail.', ''));
});

The reason I like this is that I can let the spammers spam the dummy mail domain thinking they got yet another e-mail harvested. If I was maintaining my own spam filter, I could collect samples to my bad bucket.

Also, this approach allows you to render the page quite clean with dynamic data and simply have the javascript snippet only once on the whole site to handle the real user clicks.

Works also on mobiles.

Rodge answered 23/4, 2014 at 22:5 Comment(2)
I think this approach is excellent. If you're displaying the email address rather than 'e-mail' though then be sure to use an image converter.Polanco
I like these kinds of solutions where you give the spammer false positives. Always better than giving them a challenge they'll most likely accept :pDropout
C
31

The trouble with the JavaScript solutions is that people with JS turned off will also not see the email address. Albeit a minority you need a combination of techniques for the best results.

Many of these techniques are detailed here, but I have provided the solutions only: https://www.ionos.co.uk/digitalguide/e-mail/e-mail-security/protecting-your-e-mail-address-how-to-do-it/

Comments

<p>If you have any questions or suggestions, please write an e-mail to:
us<!-- abc@def -->er@domai<!-- @abc.com -->n.com. 
</p>

Hidden Spans

<style type="text/css">
span.spamprotection {display:none;}
</style>

<p>If you have any questions or suggestions, please write an e-mail to:
user<span class="spamprotection">CHARACTER SEQUENCE</span>@domain.com. 
</p>

Reverse Strings This may not be friendly for multilingual sites.

<style type="text/css">
span.ltrText {unicode-bidi: bidi-override; direction: rtl}
</style>
<p>If you have any questions or suggestions, please write an e-mail to:
<span class="ltrText"> moc.niamod@resu</span>.
</p>

JavaScript as in many other answers

<script type="text/javascript">
var part1 = "user";
var part2 = Math.pow(2,6);
var part3 = String.fromCharCode(part2);
var part4 = "domain.com"
var part5 = part1 + String.fromCharCode(part2) + part4;
document.write("If you have any questions or suggestions, please write an e-mail to:
   <href=" + "mai" + "lto" + ":" + part5 + ">" + part1 + part3 + part4 + "</a>.");
</script>

ROT13 Encryption JavaScript dependant but also helps with GDPR as it's encrypted.

<script type="text/javascript">
function decode(a) {
  return a.replace(/[a-zA-Z]/g, function(c){
    return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) 
                               ? c : c - 26);
  })
}; 
function openMailer(element) {
var y = decode("znvygb:[email protected]");
element.setAttribute("href", y);
element.setAttribute("onclick", "");
element.firstChild.nodeValue = "Open e-mail software";
};
</script>
<a id="email" href=" " onclick='openMailer(this);'>E-mail: please click</a>

CSS Only Borrowed from here: Protect e-mail address with CSS only

<!doctype html>
<html>
<head>
    <title>Protect e-mail with only css</title>
    <style type="text/css">
        .e-mail:before {
            content: attr(data-website) "\0040" attr(data-user);
            unicode-bidi: bidi-override;
            direction: rtl;
        }
    </style>
</head>
<body>

<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>

</body>
</html>
Calorific answered 6/9, 2019 at 11:49 Comment(7)
i used your CSS Only solution thanks. nowadays did realy people disabling JS ? all websites use it a lot ( we can say it's mandatory )Deadradeadweight
I agree, but some people do. I wouldn't say the CSS only version is the best or most secure. I'd honestly use a combination.Calorific
@Deadradeadweight the reason many people disable it is because of tracking e.g. Analytics, Facebook, Adverts etc.Calorific
I found the reverse string idea interesting. It didn't work for me though because it reverses again when you copy from the page.Dollhouse
@Dollhouse we aren't protecting against copy and paste though, we are protecting against bots. That doesn't mean your point is not valid, I don't really know the answer. What I would say, is that these types of solution where it is really obfuscation as opposed to true security aren't usually the most secure. I'd go with a JavaScript solution usually.Calorific
Does adding the reversal string invalidate some of the benefits of using JS encryption?Lesson
@HermanToothrot I'm not really sure. I wouldn't consider it an amazing solution, but bots won't worry about CSS as it's styling only that's why it works.Calorific
L
28

There are multiple different choices for hiding emails on websites, commonly using either the HTML entity version of the email address (as Aziz-Saleh suggested), but from an actual web design point of view, just putting the email address like that on a website isn't the most user friendly thing to do.

For instance, the mailto: link automatically triggers the browser to open the user's Email Application of choice - but consider this. Not everybody has a dedicated email application. For instance, I don't use Outlook (I'm a Windows user), and unless I have Windows Live Mail installed, my computer can't open that link. I think Chrome can open the links into GMail if you're signed in, but I would need to check that.

Ultimately, by using mailto:, you are potentially alienating a portion of your userbase that will not be able to use that link in the first place.

I would suggest using email forms, and there are plenty of easy-to-follow tutorials available for both PHP and your language of JSP, such as this link here: Sending Email in JSP and even on StackOverflow

By using your server to send the email, you get tighter control over how the email is generated, what data the user is allowed to put in, and you could even send them a return email (generated by the server) to confirm that you have received their message. This is a tried-and-tested real-world method of allowing customers and visitors to contact you, whilst still giving you protection and control over the entire process.

TL;DR: Raw mailto: links might alienate people without dedicated email programs, whereas if you use JSP forms, you can control how they contact you, with what information (you can use fields and the HTML5 required attribute to mandate certain input fields) and you can even respond with a do-not-reply email so they know their message was heard (just don't forget to ask for their email address)

Lobectomy answered 16/4, 2014 at 23:40 Comment(10)
you are right but the only problem of using a "contact page" is that users wont be able to add my email address to their contact list; therefore, everytime they want to send an email need to visit the website.Amylase
@JackMoore, ah okay, well that's an interesting situation. I would suppose that's a little unusual, although what you could do, is when you send the email back to the user, you can set the Header of the email to your own email address, which will then allow the user to add it as a contact (instead of always using do-not-reply or similar)Lobectomy
I strongly suggest not using contact pages. Typing into much too small form fields is a hassle, not being able to attach anything as well, and i guess the percentage of people who want sent mail in their sent folder is much higher than the percentage of people who do not use a mail program.Attalanta
The General Data Protection Regulation (GDPR) is another point against contact pages.Apteryx
@Apteryx How so?Lumenhour
@Lumenhour Since the user has to enter her eMail address into the form, the website owner has to make sure to handle her eMail address accordingly to the GDPR. The users eMail address has to be encrypted before being sent to the server (shouldn't be a problem. Your website should use https anyway). The user has to be informed about how her eMail address is used, how long it is stored and so on.Apteryx
@Apteryx would you also have to inform the user of that information if they are using a mailto link? Pretty much any digital interaction would require that.Calorific
@Calorific No. Your server doesn't see their email if you use a mailto link, so it isn't subject to GDPR.Liverpudlian
@PaintingInAir it's not relevant to the server. If someone sends you an email you are obliged to protect that personal information. You are not allowed to add them to a mailing list without permission or a very good reason, you are not allowed to publish the email around the web. If you never hear from them ever again, you are kind of supposed to delete the email address after a while. Pretty impractical, but the same rules apply whether you acquire the email via a form or otherwise. Just a few extra technical details apply if you are using a form.Calorific
Just make the mailto link with a readable email address. <a href="mailto:{email}">{email}</a> This way people without an email client can just copy paste. Contact pages also need to be protected with captcha which is annoying for the end user. And as mentioned you are now responsible for the storage of the users' personal information, AND making sure their message reaches you correctly. I'm all for mailto links if I can get away with it :p But scraping is a big problem.Dropout
M
18

Solution 1:

You can use many publicly available email address encoders like (first result on google):

http://www.wbwip.com/wbw/emailencoder.html

This encodes the emails into their character entity value, this will require more logic form scrapers to decode it.

So an email like: [email protected] becomes &#116;&#101;&#115;&#116;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109; which can be used in a mailto as well.

Solution 2:

Use an online email to image converter (again first result on google):

http://www.email2image.com/Convert-Email-to-Image.aspx

To make it as an image. Other services enable you to do this automatically via an API like:

https://www.mashape.com/seikan/img4me-text-to-image-service#!endpoint-Main

Montparnasse answered 11/4, 2014 at 3:2 Comment(1)
Any bot worth their salt will be able to crack encoded emails. It is surprising that not all of them do, but in the general case, this is not a safe option. If you go for it anyway, picking a less popular variant is probably going to last longer.Lustrum
B
10

Personally, I came up with this, pretty straightforward and kinda funny solution. I throw this code where I want my email address to appear:

<script>(function whatever(){var s='@',n='nabil',k='kadimi.com',e=n+s+k,l='<a href=mailto:{{[email protected]}}>{{[email protected]}}</a>'.replace(/{{.+?(}})/g,e);document.write(l)})()</script>

Explanation

Bots that crawl websites and look for emails using regular expressions will grab the FTC (Federal Trade Commission) email address ([email protected]). Legit visitors will see your email address after it's constructed with that code.

##Expanded

<script>
    (function whatever() {
        var s = '@'
            , n = 'nabil'
            , k = 'kadimi.com'
            , e = n + s + k
            , l = '<a href=mailto:{{[email protected]}}>{{[email protected]}}</a>'.replace(/{{.+?(}})/g, e)
        ;
        document.write(l);
    })();
</script>

##Demo

<script>(function whatever(){var s='@',n='nabil',k='kadimi.com',e=n+s+k,l='<a href=mailto:{{[email protected]}}>{{[email protected]}}</a>'.replace(/{{.+?(}})/g,e);document.write(l)})()</script>
Brickwork answered 15/9, 2016 at 4:42 Comment(2)
Hi, I am not very familiar with JS. Could you please explain shortly your code? I am especially interested in the part with <a href=mailto:{{[email protected]}}>{{[email protected]}}</a>. Are the bots thanks to this code gonna get the address of cia/fbi and send the spam e-mail to them then? Thank you in advance.Refrigeration
@Refrigeration Hi! I added an explanationBrickwork
C
5

I've been using CloudFlare's free Email Address Obfuscation feature: https://support.cloudflare.com/hc/en-us/articles/200170016-What-is-Email-Address-Obfuscation-

Email harvesters and other bots roam the Internet looking for email addresses to add to lists that target recipients for spam. This trend results in an increasing amount of unwanted email.

Web administrators have come up with clever ways to protect against this by writing out email addresses (i.e., help [at] cloudflare [dot] com) or by using embedded images of the email address. However, you lose the convenience of clicking on the email address to automatically send an email.

By enabling Cloudflare Email Address Obfuscation, email addresses on your web page will be obfuscated (hidden) from bots, while keeping them visible to humans. In fact, there are no visible changes to your website for visitors.

To prevent unexpected website behavior, email addresses are not obfuscated when they appear in:

  • Any HTML tag attribute, except for the href attribute of the a tag.
  • Other HTML tags
  • Any page that does not have a MIME type of "text/html" or "application/xhtml+xml"

I'm not affiliated with CloudFlare. I just appreciate all that they offer for free.

Crofter answered 19/2, 2019 at 20:29 Comment(0)
A
3

I use email encoders like http://www.wbwip.com/wbw/emailencoder.html . Just put your address to the source and between the "a" tags. Something like this

<a href="mailto:&#105;&#110;&#102;&#111;&#064;&#101;&#120;&#097;&#109;&#112;&#108;&#101;&#046;&#099;&#111;&#109;">&#105;&#110;&#102;&#111;&#064;&#101;&#120;&#097;&#109;&#112;&#108;&#101;&#046;&#099;&#111;&#109;</a>

It is encoding of [email protected]

Agnate answered 22/4, 2014 at 11:27 Comment(1)
This will prevent an unsophisticated user from getting the mail address off the source code of your web site, but it won't prevent a bot at all.Attalanta
M
3

Put your email address on a transparent image in png or gif format and display that image on your web pages. Only a human reader would know the image is showing an email address. This will prevent bots from finding your email address on your website.

Mogador answered 21/6, 2017 at 23:13 Comment(2)
It will also prevent disabled users from being able to send you an email.Yarborough
I agree, unless your e-mail is super simple. ([email protected]) I won't use images, people won't bother with typing it over. Or make mistakes in the process.Dropout
C
3

Google actually provides a service for this. Free to use and works pretty well: Mail ReCaptcha

Countdown answered 27/6, 2017 at 1:35 Comment(1)
And no longer works, because it relies on the old version of ReCaptcha. I wish the different parts of Google would talk to each other.Proserpina
A
2

Yeah it means use a php form for visitors to contact you through. It is much safer and stops bots sending emails to you like thousands of times. Look around Google for a contact form tutorial there will be plenty!

A tutorial will tell you to use php and so when the user fills out a form it will be emailed to you with the details they filled out in the form. However most forms use like a "Captcha" entry and it stops the bots, almost like a "Are you Human?" test.

Hope this helps.

Adela answered 11/4, 2014 at 3:2 Comment(1)
PHP would not be my platform of choice, but the fundamental approach of using a contact form solves (this part of) the problem elegantly. Next up, combatting form spam. In addition to adding a CAPTCHA, of course, similarly make sure that the form's source does not reveal any email address.Lustrum
P
1

Edit: Having used Formspree for a little over a year now, I have to say I'm not too happy. It's really easy for people to spam you all kinds of garbage.

2020 (and potentially beyond) solution:

  1. Register with Formspree, a free platform that forwards form data to an email of your choosing. Be sure to register using the email address on which you want to receive submissions.
  2. Copy the unique Formspree endpoint that gets generated.
  3. Create a contact form with this endpoint.

Congrats! Your email is officially masked from bots.

Prepossess answered 27/5, 2020 at 11:58 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.