Best Way to Obfuscate an E-Mail Address on a Website

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

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.

What is the correct way to obfuscate an email address when posting it on a website in 2020?

You really only have two choices:

Block the spam

Get a commercial (normally "full domain") spam filter. If you are using a gmail or other free/nearly-free address, forget about it - you can't put in a proper filter. A quality filter will not be free. No filter will be perfect (always some False Positive or False Negative). And then deal with the False Positive (customers who can't get to you because their email was blocked) or False Negative (the delete key is your friend).

Make it hard to use

That can be making the email address graphical - customers hate that because they have to type it and there is room for error unless the address is really simply like info@example.com.

That can be using Javascript to assemble the email address on-the-fly so that web scrapers don't get it. But that doesn't work if customers have Javascript turned off.

That can be using a Form instead of just a mailto: link. Keep the form simple - name, email address, phone number (if that is relevant for your business), a textarea field for the question/comment/complaint/etc. But often Forms need protection against spam.

Make the Form hard to use. Seriously. That is what Captcha text input, multiple Submit steps, "I am not a Robot" checkboxes (which are useless unless paired with a system that analyzes input based on timing to (try to) filter out robots), etc. are all about. No one-size fits all.

Personally, I just put the email address out there and use a quality spam filter. I would use a different email address for each page (if you have more than one), in order to make filtering through messages easier.

Good luck. This is a never-ending problem.

Making email addresses safe from bots on a webpage?

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?

Protect e-mail address with CSS only

It's very simple. You can protect your email address with only HTML & CSS. You don't need to know about PHP or Java script. Try below code.

Simple HTML and CSS code:

<!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>

Output of above code:

jhon@gmail.com

Please note:

Here I'm just used two extra attributes.

1) data-user write your e-mail id user name in reverse.

2) data-website write your e-mail id website in reverse.

Is it worth obfuscating email addresses on the web these days?

On websites I maintain, I consider it my duty to protect my user's email addresses. Spam is bad enough, I don't need to make it easy for the spammers.

At the same time, usability demands functional mailto links. My favorite method for achieving this is to use the free SpamSpan technique (at paranoia level 3). It is free, cross-browser, seems effective, and leaves easy-to-read text when JavaScript is disabled.

Sample HTML

<span class="spamspan">
<span class="u">user</span>
[at]
<span class="d">example [dot] com</span>
</span>

Result (JavaScript enabled)

user@example.com

Result (JavaScript disabled)

user [at] example [dot] com

Best Way to Obfuscate an E-Mail Address on a Website