Sunday, July 17, 2016

Protecting Your Contact Page

In my last post I explained how to use Javascript to hide your email address on a web page while still displaying it to the public. While some may not mind making their email address public, it may be more information than others would like to disclose. A business needs to route messages from their website to the proper person, but still want to have just one point of contact.

The answer for both is a contact page. It allows site visitors send a message directly from the site.

Since this method does not disclose the recipients email address you would think this would reduce SPAM, and it does, for the most part. But the good people at SPAM Inc. have figured out a way to get their message to you through your contact page. When the SPAM bots scan your page and discover it is a contact page instead of looking for your email address they just fill in the form and then press the submit button. They get what they want, you get what you don't want.

So how do you protect your inbox when using a contact page? Authentication, and there are a variety of ways to do so. Most of them involve the user having to enter some sort of extra information. Which means your potential client has to take an additional step, which can be annoying.

Here's a way to provide a check which verifies that the submit button on your contact page is clicked by a human. It involves using a little CSS that tricks the bots, so the humans will not be bothered.

How does it work?

The average contact page contains input fields for name, email address, subject, and message. Yours may have more, or less, but those are the fields that a SPAM bot is going to be looking for. So when a bot scans your page and finds these fields they fill them in with their message, click submit and move on.

You can use this to your advantage. Lets say this is the HTML for your contact form:

<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
    <div class="row">
        <label for="name">Your name:</label><br />
        <input id="name" class="input" name="name" type="text" value="" size="30" /><br />
    <div class="row">
        <label for="email">Your email:</label><br />
        <input id="email" class="input" name="email" type="text" value="" size="30" /><br />
    <div class="row">
        <label for="message">Your message:</label><br />
        <textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
    <input id="submit_button" type="submit" value="Send email" />

Below is the same form modified, with changes/additions in red:

<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
  <div class="row">
      <label for="name">Your name:</label><br />
      <input id="name" class="input" name="name" type="text" value="" size="30" /><br />
  <div class="row">
      <label for="email1">Your email:</label><br />
      <input id="email1" class="input" name="email1" type="text" value="" size="30"  /><br />

  <div class="row" id="confirm">
      <label for="email">Confirm Your email:</label><br />
      <input id="email" class="input" name="email" type="text" value="" size="30" /><br />
  <div class="row">
        <label for="message">Your message:</label><br />
        <textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
  <input id="submit_button" type="submit" value="Send email" />

Then add the following line in your CSS file:

#confirm {display: none;}

When a human uses the contact form they will see and fill in the field with the id "email1". The bots will go straight for the field with the id "email". It then becomes a simple matter of testing for data being entered in the field with the name "email".

If there is data present in that field, you can assume the form was filled in by a bot and it can be discarded. If it's blank, you can assume it came from a human and process the message.

Something to consider when using this method:
You don't have to use the field named email. You can use any field you like.

In this example, it would have been just as easy to use the message field. The only important thing is to hide the display of the field you plan on testing from anyone that views the page. This is important because a bot is not viewing a page it is reading the code of the page. All it knows is that it sees a field and that field should be filled in.

I use the field names "email" and "email1" with the hope that whoever wrote the bot was a decent programmer. If so their bot would recognize the 2 fields and deduce that one field is a confirmation for the other. Which would guarantee both will get filled in. It may not be necessary, but I can tell you that I don't get any SPAM from the contact pages that are directed to my email address.

Use whatever you are comfortable PHP/Javascript/JQuery to test the form. A quick test will allow you to verify whether or not the input came from a human.

Friday, July 8, 2016

Obfuscate Your Email Address

I had a boss who once told me, "Your best attribute is also your worst attribute". In his example he cited that people who were good speakers were generally not good listeners. The Internet is no different.

Email is a wondrous thing. It saves time and money and makes it much easier to be/stay connected to everyone in your world. The downside is SPAM, it's rare to run into someone who's not getting more than they would like. The big email providers like Gmail, Yahoo, and Microsoft all do a pretty good job of keeping SPAM out of your mailbox. But things change some if you have a website.

One of the primary reasons to have a website is to make yourself available to the public. In today's world; that  includes email, which means you have 2 options. One is to have a contact page, which hides your email address but makes the sender feel a little disconnected. After all, they don't know where this email is going; it feels impersonal. The other is to just display your email address on your site. It's much more personal and gives someone a feeling that they have a more "direct" connection with you.

Regardless of which method you choose; both make you more susceptible to SPAM. I would like to discuss both of these issues with you, one at a time. This entry will cover the direct display of your email address. My next entry will talk about protecting yourself when using a contact form.

The largest drawback to displaying your email address on the Internet is the "bot". Bots are automated routines that constantly scour the Internet page by page. They read the code of each page line by line. Their purpose is to find the email address and add it to a list. Once you get on that list, the unwanted email will start.

The best method at this time is to "obfuscate" your email address from the "bots". The best method to do so at this time is to use ROT13 encryption. What is that? Here is the definition from the PHP manual:

"The ROT13 encoding simply shifts every letter by 13 places in the alphabet while leaving non-alpha characters untouched. Encoding and decoding are done by the same function, passing an encoded string as argument will return the original version."

So let's say your email address is:

You can make it look like


to a "bot".

The best way to accomplish this is to use a small piece of Javascript code to display your email as a clickable link on your page.

You can see (and use) a working example of what follows at my web site Hired Gun Coding.

The code that provides all the "magic" is below:

document.write("<n uers=\"znvygb:zr@fbzrcynpr.pbz\">zr@fbzrcynpr.pbz</n>.replace(/[a-zA-Z]/g, function(o){return String.fromCharCode((o<="Z"?90:122)>=(o=o.charCodeAt(0)+13)?o:o-26);}));

So what does all the above mean?


is one of the most basic of Javascript functions, it displays whatever is put between the parentheses () on the screen.

<n uers=\"znvygb:zr@fbzrcynpr.pbz\">zlnqqerff@fbzrcynpr.pbz</n>

this is the address which has been encoded by moving the letter up by 13. If you count back the letters from "n" you will count back to the letter "a". So "<n" actually decodes to "<a" which is the beginning of the hyperlink tag. Which means "uers" is "href" and "znvygb" decodes to "mailto".


is the Javascript function that does the decoding. The replace function has 2 parameters searchvalue and newvalue.


this is the "searchvalue" parameter. [a-zA-Z] means replace the lowercase letters a-z or the upper case letters A-Z. It's enclosed between /  /g which means "global", or replace all occurrences found, not just the first one.


This is the beginning of the "newvalue parameter and it is the function that actually decodes each individual letter.


is the Javascript function that turns the final character code (as calculated by the function) in the letter to display on the screen.


This is probably the most intimidating part of the code but is actually easily explained.


This equation checks to see if the character passed is less than or equal to a capital Z. It uses the ? or a "ternary" operator. Mozilla defines the ternary operator this way:

"The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement."

Uppercase letters have a lower character code (ASCII number) than lowercase which is why you test for that first. If the letter is less than the capital Z it's ASCII code 90 is used, otherwise the code for a lowercase z 122 is used.


o.charCodeAt(0) + 13 takes the character (ASCII) code passed to it and adds 13. The final ternary operation ?o:o-26 makes the final adjustment. Because when encoded the character (ASCII) value was increased by 13 it will never equal what was originally passed, so the second operator 0-26 is used subtracting 26 which returns it back to its original character (ASCII) code.

What that means is this:

Let's say the lowercase m was encoded using ROT13, the character (ASCII) code for it is 109. ROT13 encoding adds 13 to the character (ASCII) code of 109; which is what makes it becomes a lower case z. A lowercase z has a character code of 122. So when decoded, by adding 13 to 122 you get a result of 135 which is NOT the letter m. Since by now we have added 13 to the original character (ASCII) code twice; subtracting 26 (from 135) returns it to it's original value of 109, the character (ASCII) code for a lowercase m.

Does your head hurt yet?

The only thing left is to encrypt the email address you want to put in. That is simple enough and can be done using PHP using the str_rot13 function.

$email = str_rot13("");

To use it in a web page, it all goes together like this:

At the top of your page:


$email = str_rot13("");


Then in your HTML where you want the mail link to appear drop this code:

<script type="text/javascript">document.write("<n uers=\"<? echo $email; ?>\"><? echo $email; ?></n>.replace(/[a-zA-Z]/g, function(o){return String.fromCharCode((o<="Z"?90:122)>=(o=o.charCodeAt(0)+13)?o:o-26);}))</script>

That will display

It's hard to say how long this method will hold things off, but it's safe to say that it will be for quite some time. The people who code these "bots" are looking for the "low hanging fruit" of the Internet; those who don't do anything to protect their email address. What has done here would require a bit of extra code for them to find the address, which is not something they'll be willing to spend their time on.

Monday, June 27, 2016

One Page Menu System

I thought it would make sense to make my first article in this blog be about how to make a simple menu system.

You wouldn't use this menu on a "public" site, this menu is well suited for a Content Management System (CMS). Rather than writing a menu for each section of your site you can create one page that contains all the menus.

You can also apply this same concept to any page that you would like to be different based on how the page was entered.

It's done using very basic PHP and CSS.

The strategy is a simple one. Create a container to hold the menu system, create a container for each menu and then display the one you need.

<div id="menu-display">
   <div id="main">
       <a class="menu-entry" href="index.php?menu=user">User Menu</a>
       <a class="menu-entry" href="index.php?menu=system">System Menu</a>
   <div id="user">
       <a class="menu-entry" href="user1.html">User Page 1</a>
       <a class="menu-entry" href="user2.html">User Page 2</a>
       <a class="menu-entry" href="user3.html">User Page 3</a>
       <a class="menu-entry" href="index.php">Main Menu</a>
   <div id="system">
       <a class="menu-entry" href="system1.html">System Page 1</a>
       <a class="menu-entry" href="system2.html">System Page 2</a>
       <a class="menu-entry" href="system3.html">System Page 3</a>
       <a class="menu-entry" href="index.php">Main Menu</a>

The "menu-display" <div> is the container that holds all the menus. Style this for color, font, etc and your menus will all look the same.

The "main", "user", and "system" <divs> are the individual menus. It doesn't matter what order they are in unless you plan to display 2 at once. An example would be additional menu items available only to certain users.

So how do you make things appear and disappear? That is where PHP is your friend, it just takes a couple lines of code.

At the top of your page:


$display = "main";

if (isset($_GET['menu']) { $display = $_GET['menu']; }


In the above the variable $display is set to "main". So if the page is called without any menu request, it will default to the main menu.

The next line checks to see if a menu name was passed to the page. If so, then the $display variable is changed from the default.

The following code is then executed at the bottom of the <head> section of the page. Just before the </head> closing tag.

    if ($display != "main") { echo "#main { display: none"; }
    if ($display != "system") { echo "#system { display: none"; }
    if ($display != "user") { echo "#user { display: none"; }

The above is a simple set of statements that checks the $display variable and sets the <div> to not be displayed if there is not a match. If you have a large number of menus you could easily use a loop to accomplish the task.

You can see a working example and download the code here.