If you run a community-driven business, agency, or website, you want people to be able to reach out to you whether it’s to nurture new leads, respond to customer service inquiries, or foster a relationship with members of your community.
But not at the cost of receiving spam.
Receiving spam emails is a nuisance and a waste of time at best, and in some cases they may contain malicious content such as phishing scams or malware.
Spam emails clog up your inbox, making it harder to find important messages, and can even negatively impact your email deliverability, causing legitimate messages to filter into the spam folder.
In this article, we will look at methods that can be used to share an email address on a website, securely.
How do bots find out my email address?
Automated programs, known as email scrapers, search the web for email addresses to add to their lists of addresses to which they send spam messages.
Here’s a deeper look at how this happens:
Plain text email addresses
When an email address is posted on a website in plain text, it is extremely easy for email scraping bots to discover and harvest it. These bots are programmed to look for text strings that match the common format of an email address (e.g. [email protected] ).
HTML source code
Even if an email address is obfuscated on the visible page, if it is present in the HTML source code in a recognizable format, robots can still find it by scanning the code.
Linked “mailto” hyperlinks
Some websites use “mailto” hyperlinks to allow visitors to click on an email address and open their email client to send a message. Bots can easily follow these links and extract the email addresses they point to.
Form data
If a website has a contact form that sends data to an email address, bots could discover the email address by analyzing the form code or by intercepting form submissions if the website is not properly secured.
Hidden Text or CSS Tricks
Some webmasters use CSS tricks to hide email addresses or disguise them within the page. However, more sophisticated bots can analyze the page’s style and scripts to discover hidden or disguised email addresses.
Metadata and headers
Sometimes email addresses can be found in a website’s metadata or HTTP headers, which robots can examine.
Third-party tools and plugins
Some third-party tools or plugins used on websites can expose email addresses to bots, either due to poor design or malicious intent.
By keeping your email address hidden or encrypted, you can reduce the risk of email trackers finding it and adding it to their lists.
What can I do to prevent email spam?
Use a contact form
A contact form is a web-based form that visitors can fill out to send you a message.
The form will typically include fields for the visitor’s name, email address, and message, and will use PHP or another programming language to send the message to their email address.
By using a contact form, you can avoid displaying your email address directly on your website and reduce the risk of receiving spam messages.
You can make the form even more secure by adding a CAPTCHA.
A CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart) is a security feature designed to distinguish human users from automated scripts or bots.
It works by presenting a challenge to the user that is easy for a human to solve but difficult for a computer. For example, a CAPTCHA might present a distorted image of letters and numbers and ask the user to enter the characters they see. The characters in the image are selected and distorted in a way that makes them difficult for automated programs to recognize, but easy for a human to read.
Once the user enters the correct solution to the CAPTCHA challenge, the website can be sure that the request is coming from a human. This helps prevent spam, fraudulent activity, and other malicious behavior that could be carried out by automated programs.
Use an encrypted email link
An email link is a hyperlink that opens the visitor’s email client and automatically populates the “To” field with their email address.
To protect your email address from being collected by email scrapers, you can encrypt the link using JavaScript or another method.
You can create an image of your email address and display it on your website instead of displaying text.
Visitors will have to manually type the email address into their email client, making it difficult for automated programs to copy it.
However, this method is less user-friendly for visitors, as they have to transcribe the email address and it can lead to typos and errors. It is also a bad practice in terms of accessibility.
The HTML obfuscation approach to protect your email address
Hiding an email address in HTML is a common approach used to protect email addresses from bots.
The basic idea is to encode the email address in HTML so that it appears as plain text to humans, but not to robots scanning the HTML source code.
CSS Approach
We can use CSS styling capabilities to hide certain content whose sole purpose is to trick spambots. Consider this scenario, where we have content similar to the above, but now enclosed in a span element:
<p>To contact, send an email to [email protected]. <span class="block-bots" aria-hidden="true">¡GE OUT BOTS!</span></p>Then we apply the following CSS rule:
span.block-bots
{
display: none;
}Thus, the end user will see:
—
To contact, please email [email protected] .
—
Coding with entities
HTML entities are special characters used to represent characters that cannot be easily entered with a keyboard, such as the @ symbol.
To obfuscate an email address, you can encode the characters in the email address as entities.
For example, the ‘@’ symbol can be represented as ‘@’ and the ‘.’ symbol can be represented as ‘.’.
Hide email address in HTML comments
Another way to obfuscate an email address is to hide it within HTML comments. Browsers ignore HTML comments when displaying a web page, but bots crawling websites for email addresses will still try to extract the content of the comments.
To obfuscate an email address, you can add the email address inside an HTML comment, making it harder for robots to extract. For example:
example <-- HTML comment --> @ <-- HTML comment --> domain.comBots/scrapers will usually scrape the HTML and include the comments as part of the email address, so try sending an email with “example<–HTML comment –>@<–HTML comment–>domain.com” instead of just “[email protected]” which of course won’t make it to your mailbox.
However, since HTML comments are not displayed in browser output, the email address will appear to genuine visitors as [email protected] .
JavaScript Coding
You can also encode the email address using JavaScript and display it on the web page using JavaScript code.
This makes it difficult for bots to extract the email address, since the email address is stored in the JavaScript code and not in the HTML source code.
First, create an HTML link element with the email address as the value of the href attribute. For example:
<a href="mailto:[email protected]">Contact</a>Next, add an ID to the link element so we can target it using JavaScript. For example:
<a href="mailto:[email protected]" id="contact-link">Contact</a>In JavaScript, we can create a function that replaces the email address with an obfuscated version of it. This function can be triggered when the link is clicked. Here is an example:
function obfuscateEmail() {
var link = document.getElementById("contact-link");
var email = link.href.replace("mailto:", "");
var obfuscated = "";
for (var i = 0; i < email.length; i++) {
obfuscated += "&#" + email.charCodeAt(i) + ";";
}
link.href = "mailto:" + obfuscated;
}This function retrieves the email address from the href attribute of the link, removes the “mailto:” prefix, and then obfuscates each character of the email address using HTML entities.
The obfuscated email address is then set as the value of the href attribute.
Finally, we need to add an event listener to the link element that triggers the obfuscateEmail() function when the link is clicked. Here’s an example:
var link = document.getElementById("contact-link");
link.addEventListener("click", obfuscateEmail);With this code in place, the email address on the contact page will be obfuscated when the link is clicked, making it harder for bots to extract the address and send spam emails.
Combining multiple techniques
For even more protection, you can combine multiple obfuscation techniques, such as encoding the email address with entities and hiding it within HTML comments, or encoding it with JavaScript and also encoding the characters as entities.
It’s important to note that while these methods may make it harder for bots to obtain your email address, they are not foolproof.
Advanced bots can bypass these methods, so it’s always best to use multiple protection methods and periodically check your inbox for spam.