How to protect your email address on your website from spam

As a website operator you’re advised to include your email address on your website so that you can easily be contacted by visitors, but should you put your email address on your website? Sometimes it’s even mandatory if you do business within the EU and this is because of the GDPR. The problem with including your email address is that you could find yourself inundated with spam. So how do you protect your email address on your website from spam and still fulfill your oblig­a­tions? We present the most popular methods and explain their ad­van­tages and dis­ad­van­tages.

Email har­vest­ing and how spambots stalk their prey

Email har­vest­ing is the automated ac­qui­si­tion of email addresses for unfair ad­ver­tis­ing, phishing attacks, or spreading malicious software. Spe­cial­ized programs (known as “email har­vesters”) search websites, mailing lists, forums, or social media platforms for email addresses. They recognize email addresses due to their char­ac­ter­is­tic features such as the @ sign. More refined spambots can even search for al­ter­na­tive spellings website operators try to get away with such as [at], [AT], (at), (AT):

Even more revealing than the @ sign is the HTML email attribute mailto:user@domain.com. This enables website visitors to open their preferred email program with a simple click. Website operators are therefore advised to steer clear of classic patterns when providing their email address.

Classic rep­re­sen­ta­tion of the email address without being protected

In order to be able to protect an email address as much as possible before it is au­to­mat­i­cal­ly read out by email har­vesters, you have to envision how it is generally in­te­grat­ed into a web page. A simple, easily ac­ces­si­ble email address can be inserted into any HTML page using the following code example:

<p>If you have any questions or suggestions, please write an email to: 
<a href="mailto:user@domain.com">user@domain.com</a>.
</p>

From the user’s point of view this is an ideal rep­re­sen­ta­tion of an online email address. In order to keep the display user-friendly, the most popular method for pro­tect­ing an email is to make it look un­rec­og­niz­able in the source text without changing how it looks in the browser. Al­ter­na­tive­ly, it is possible to separate the email address from the actual website and forward it to the mailto link with a side-server redirect.

Method 1: CAPTCHAs

CAPTCHAs offer the pos­si­bil­i­ty to protect email addresses on websites. In this process, encrypted email addresses are not displayed in plain text until users have proven that they’re human by passing a check. These checks ask the user to do a variety of tasks such as entering a com­bi­na­tion of letters or numbers, quick math problems, or puzzles.

CAPTCHAs offer a com­par­a­tive­ly high level of pro­tec­tion against spam because email addresses are not displayed in the source code at all or only in encrypted form. CAPTCHAs can also fit well into your website’s design because there are so many different designs. The website’s user-friend­li­ness is affected due to the user having to put in extra effort to access the email address and also means that the oblig­a­tion to make important contact in­for­ma­tion ac­ces­si­ble isn’t fulfilled.

Method 2: Replacing the email address

It is possible to remove the entire email address from the source code and replace it with either graphics or a redirect link to the mailto link.

Integrate email address as a graphic

If an email address is im­ple­ment­ed as a graphic, it can still be read by the human eye, but texts written as graphics are hard for email har­vesters to recognize. Including cor­re­spond­ing contact in­for­ma­tion as a graphic therefore protects email addresses on websites from spam. The HTML code would look like this:

<img src="Path/graphicfile.png" with="120" height="20" alt= If you have any questions or suggestions, please write an email to: user@domain.com">

This email address is legible for most people. The text can neither be copied nor linked to a mailto link, which many users will find tedious to manually type in them­selves. Text in­for­ma­tion in the form of a graphic is often not available for users with visual im­pair­ment. People with visual im­pair­ments can only read the address with the help of cor­re­spond­ing in­for­ma­tion in the alt attribute. These can be read out with the help of screen readers, but the downside is that they are also available to spambots so this method alone is not rec­om­mend­ed as a pre­ven­ta­tive measure against spam.

HTML email link via redirect

You can protect your email address on your website from har­vesters by sep­a­rat­ing it from the website. A script is generally used, which redirects users to the mailto link after the first click. This opens the user’s email program and displays the address. For spambots that scan the source code of a website, this link will look like a file link. This pro­tec­tion mechanism can, for example, be im­ple­ment­ed as a link to a PHP file that contains the redirect:

<p>If you have any questions or suggestions, please write us an
<a href="redirect-mailto.php">email</a>.
</p>

The content of the redirect-mailto.php file is a script that redirects to the actual mailto link:

<?php
header("Location: mailto:user@domain.com"); 
?>

The dis­ad­van­tage of this spam pre­ven­tion solution is that users need a handler for mailto: to get to the email address. In practice, this is usually an email program such as Outlook or Thun­der­bird. However, web mailers can also be entered as handlers in new browsers.

Method 3: Masking the email address

If you don’t want to com­plete­ly replace an email address with a graphic or a mailto link, there are al­ter­na­tive strate­gies to encrypt an email address on a website.

Masking by character encoding

Common character encoding, used when masking email addresses in the source code, is based on HTML entities or HEX code. This type of encoding is suitable because the re­spec­tive reference char­ac­ters are au­to­mat­i­cal­ly trans­lat­ed in the browser view.

If the char­ac­ters of the email address user@domain.com are masked using HTML entities, they are first written in the al­ter­na­tive style:

@ = @ . = . (period)

This results in the following source code:

<p>If you have any questions or suggestions, please write an email to: 
<a href="mailto:user&commat;domain&period;com">user&commat;domain&period;com</a>
</p>

If you want to encrypt the whole email address , you can use HEX encoding. The Unicode character number is used and is listed in the following basic schema:

&#char­ac­ter­num­ber;

Typically, the HEX number of the cor­re­spond­ing character is indicated by a small “x”. Thus the letter “m” could be noted down as “m” or decimal “m”. The email address user@domain.com including the mailto link would look like this:

<p>If you have any questions or suggestions, please write an 
<a href="&#x6d;&#x61;&#x69;&#x6c;&#x74;&#x6f;&#x3a;&#x62;&#x65;&#x6e
;&#x75;&#x74;&#x7a;&#x65;&#x72;&#x40;&#x64;&#x6f;&#x6d;&#x61;&#x69;
&#x6e;&#x2e;&#x64;&#x65;">email</a>.
</p>

In principle, masking the email address can be done quickly and easily by character encoding. However, the pro­tec­tion offered is com­par­a­tive­ly low since most spambots are now pro­grammed to easily decipher this simple form of en­cryp­tion.

Masking by adding char­ac­ters

Basically, it is possible to hide email addresses from spambots by inserting ad­di­tion­al char­ac­ters into them. Programs will then hopefully not see the address as a whole and therefore it won’t be able to be read out au­to­mat­i­cal­ly. HTML comments, for example, provide a simple way to do this.

<!-- Comment -->

If comments like these are added into the email address, spambots (who scan the website) will stumble across the following code:

<p>If you have any questions or suggestions, please write an email to:
u<!-- Comment -->ser@domai<!-- comment -->n.com.
</p>

While a human user will see the correct email address in the web browser, a spambot is expected to read out the blended text in the span element.

A dis­ad­van­tage of masking the address by adding extra char­ac­ters is that with this method the email address can’t be linked with an HTML email link. In this case, users must manually copy the address into their email program.

Method 4: En­crypt­ing the email address

A common method for email en­cryp­tion is ROT13, which can be im­ple­ment­ed with just a few lines of JavaScript.

<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:orahgmre@qbznva.qr");
element.setAttribute("href", y);
element.setAttribute("onclick", "");
element.firstChild.nodeValue = "Open email software";
};
</script>
<a id="email" href=" " onclick='openMailer(this);'>Email: please click</a>

In line 9 of the sample code, it shows the encrypted version of the email address user@domain.com including the mailto text string (znvygb:orahgmre@qbznva.qr) as well as how it should be encrypted (in lines 2 to 7). The function in lines 8 to 13 opens the user’s preferred email program and writes the decrypted address into the recipient field.

The script is started by clicking on the link with the anchor text “Email: please click” (lines 15 to 16). After being clicked on, this displays the text “Open email software” (line 12).