Hide Email Address From Bots
Not much needs to be said about why it is a good idea to hide email addresses from spammer's harvesting robots.
The bots harvest to spam. Most people don't care for spam.
This article describes one way to hide email addresses from bots and still make them available on web pages — even as clickable links.
There is no need for me to ramble on. Let's get to it.
Overview
The idea is two-fold:
-
Chop up and scramble the email address to make it unrecognizable as an address — so it won't be found by a bot scanning the source code.
-
Require JavaScript to launch and run before the email address can be reconstructed — so it can be available to browsers but not to bots.
The Process
The JavaScript that does the work can be generated online or it can be created manually. Both methods are made available in this article.
When the JavaScript that does the work is in the web page source code, it can be called from anyplace on the web page where an address, plain or linked, needs to be published.
Use the WriteAddy()
function to publish the email address on a web page. And use WriteLink()
to publish the email address as a link.
Publishing an Email Address
To publish an email address so it's printed on the web page, use the WriteAddy()
function. Example:
<p>
You can write to me
at <script type="text/javascript">WriteAddy()</script> whenever
you feel like it.
</p>
There are two ways to link an email address. When tapped, the link launches the user's integrated email software. Both ways use the WriteLink()
function. Example:
<p>
Write me
at <script type="text/javascript">WriteLink()</script> whenever
you feel like it.
</p>
The above method publishes the email address and creates a link out of it. In other words, the email address itself is linked.
To link different text, specify the text as a parameter to the WriteLink()
function. For example, WriteLink("Email Me!")
links the words, "Email Me!":
<p>
<script type="text/javascript">WriteLink("Email Me!")</script>
</p>
Now, put the JavaScript that does the work of hiding your email address into your web page source code. Then you'll be good to go.
That's all it takes to use it.
Constructing the Code for Address Hiding
You may construct the email address hiding code manually or you can use the generator. Both methods are provided here, the generator first.
The JavaScript Code Generator
This generator can be used for quickly obtaining the email address hiding code. It can also be used to check your work after following the manual instructions.
Provide the generator with the email address to hide and then tap the button. The generated code will appear below the button.
Email Hiding JavaScript Generator
Put the generated JavaScript in your web page source code somewhere above where WriteAddy()
or WriteLink()
are first used. In the source code head area is fine.
Manually Creating the JavaScript Code
Here are the steps for creating the JavaScript manually. It's rather involved, but each step is easy. If you follow it all the way through, you'll have a better understanding of how the obfuscation works.
In these manual instructions, we'll use the fictitious my.name@the-isp.com
email address as the example.
-
Divide the email address into three parts.
-
The first part is the characters up to the "@" character.
-
The second part is composed of the characters following the "@" character up to the last "." character of the address.
-
The third part is the characters following the last "." character of the address.
Dividing the example
my.name@the-isp.com
email address, you'll end up with these three parts:my.name
the-isp
com -
-
Obfuscate each part.
Now that the email address has been divided into three parts, we'll do an obfuscation on each part. The reason is so bots won't recognize them as parts of an email address or, if recognized, the part will be invalid.
-
The first part, using
my.name
as an example:First, insert any three characters to the front of the first part of the email address. Example:
ABCmy.name
Then, divide it into two pieces. (It doesn't matter where this first part is divided, just so you end up with two pieces.) Example:
ABCm
y.name -
The second part, using
the-isp
as an example:First, separate the last two characters from the second part, ending up with two pieces. Example:
the-i
spThen, reverse the characters of the second piece. Example:
the-i
ps -
The third part, using
com
as an example:Reverse the characters of the third piece. Example:
moc
When those steps are done to obfuscate each part of the example email address, you'll end up with
ABCm
y.name
the-i
ps
moc -
-
Create the JavaScript:
There are three lines of custom JavaScript. When those are constructed, use them to customize the JavaScript that does the work.
-
Here is the first line.
var front = "oneF" + "twoF";
Replace
oneF
with the first piece of the first part of the email address (ABCm
in the above example).Replace
twoF
with the second piece of the first part of the email address (y.name
in the above example).With the example email address, you'll end up with:
var front = "ABCm" + "y.name";
-
Here is the second line:
var middle = "oneM" + "twoM".split("").reverse().join("");
Replace
oneM
with the first piece of the second part of the email address (the-i
in the above example).Replace
twoM
with the second piece of the second part of the email address (ps
in the above example).With the example email address, you'll end up with:
var middle = "the-i" + "ps".split("").reverse().join("");
-
Here is the third line:
var end = "oneE".split("").reverse().join("");
Replace oneE with the third part of the email address (
moc
in the above example).With the example email address, you'll end up with:
var end = "moc".split("").reverse().join("");
With the example email address, the three lines of custom JavaScript become:
var front = "ABCm" + "y.name"; var middle = "the-i" + "ps".split("").reverse().join(""); var end = "moc".split("").reverse().join("");
Those three custom lines of JavaScript are inserted into the JavaScript code that does the work. Here is the code, with the insertion point marked:
<script type="text/javascript"> function MakeAddy() { /* INSERT THE 3 CUSTOM LINES HERE */ return(("me"+front+"@"+middle+"."+end).substr(5)); } function WriteAddy() { document.write(MakeAddy()); } function WriteLink() { var addy = MakeAddy(); var text = arguments.length ? arguments[0] : addy; document.write("<a href="+"otliam".split("").reverse().join("")+":"+addy+">"+text+"</a>"); } </script>
With the three custom lines you created above with the example email address, you end up with:
<script type="text/javascript"> function MakeAddy() { var front = "ABCm" + "y.name"; var middle = "the-i" + "ps".split("").reverse().join(""); var end = "moc".split("").reverse().join(""); return(("me"+front+"@"+middle+"."+end).substr(5)); } function WriteAddy() { document.write(MakeAddy()); } function WriteLink() { var addy = MakeAddy(); var text = arguments.length ? arguments[0] : addy; document.write("<a href="+"otliam".split("").reverse().join("")+":"+addy+">"+text+"</a>"); } </script>
-
Put the JavaScript in your web page somewhere above where WriteAddy()
or WriteLink()
are first used. In the source code head area is a good place.
Implementation Overview
Create the JavaScript, either manually or with the generator.
Use it as described in the The Process section.
You are now good to go.
It is highly unlikely that a spammers' email harvesting robot will recognize your code as an email address. And even if it does, it would still need to launch and run JavaScript to reconstruct the address.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager