MindPalette CAPTCHA Security Image (2.1)

NOTE: This tutorial is to be used with at least version 3.0.14 of our form processing scripts. It will work with both the NateMail.php and ProcessForm.php script. The script requires PHP 4 and the GD Image Libraries (installed by default in most recent versions of PHP). You may use this script and tutorial as freeware.

The purpose of this script and tutorial is NOT to provide a sophisticated, fool-proof catpcha image that can't be machine-read. Rather, my intent is to make the form processing scripts safer from the vast majority of spam hijacking attempts without overly compromising accessibility. Aside from the script itself being useless for sending out mass emails, a security image makes even the annoying, pointless spamming abuse much more difficult, and hopefully not worth the effort.

As with the rest of our scripts, these security add-ons are provided as-is and we can not be responsible for any damage caused by their installation, use or misuse.

  1. Overview & Basic Installation
  2. Form Page Installation
  3. Validating Input (with NateMail, ProcessForm or other)
  4. Configuration Options
  5. Troubleshooting & FAQ

Overview & Basic Installation:

This script works by adding a security image and text entry field to your pre-existing HTML form. The value entered into the text entry field must match the string of letters and numbers shown in the security image. When the form is processed in NateMail or ProcessForm, the code entered into the input field is compared against the code used for the image and the submission is rejected if the codes are different.

To begin installation, download the "mpfs.zip" archive containing all the necessary files:

Next, unzip the archive and install the script by uploading the entire "mpfs" folder to the document root folder of your web server (same directory your home page is in). You may install the script into a different folder of your site, but you will later need to alter a couple paths in the code to tell PHP where everything is. For minimal editing, it's best to install into your site's document root directory.


Form Page Installation:

Connect the Script to your Form

To use the MPFS script in your HTML form, you'll first need to change the extension of your form page to .php (or whatever extension your web host requires to alert the server that there's PHP code in the page that needs to be processed). Next, to connect the script to the form on your page, you'll need to add some PHP code into the very top of the form page (if you're using a visual web editor like Dreamweaver or GoLive, make sure you're in source code view). It's very important that there NOT be any content before the PHP code - not even spaces or line breaks.

I will later show an example of the code to use that takes advantage of all configuration options, but for a minimal installation using all the default settings (best for initial testing), here is the code to paste:

<?php
$MPFSHttpPath = '/mpfs/';
$MPFSServerPath = $_SERVER['DOCUMENT_ROOT'].'/mpfs/';
require($MPFSServerPath.'MPFS.class.php');
$MPFS = new MP_MPFS();
// start configuration options
// end configuration options
$MPFS->generateCode();
?>

If you've installed the "mpfs" folder into the document root of your site, in most cases you can leave everything as-is. Otherwise, if you've installed into a different directory or your server can't find the script files, here is a line-by-line description of what's happening, and what to change if needed:

$MPFSHttpPath = '/mpfs/';
This tells the script the HTTP path to your "mpfs" folder, relative to your site's document root. For instance, if you've installed the folder into http://www.yoursite.com/mpfs, it should be OK as-is. If you've installed it into http://www.yoursite.com/scripts/mpfs, the value between the single quotes would change to '/scripts/mpfs/'.
$MPFSServerPath = $_SERVER['DOCUMENT_ROOT'].'/mpfs/';
This setting should contain the full server path to the "mpfs" folder. On most servers, the $_SERVER['DOCUMENT_ROOT'] variable will automatically detect the path to the server's document root. If not, you'll need to enter the path manually, for instance: $MPFSServerPath = 'var/www/html/mpfs/';

The rest of the code is purely functional, and should not require editing. It basically imports the MPFS.class.php script file, creates a new object named $MPFS and generates a new random code to be used in the security image.

At this point, I'd recommend uploading your edited form page and loading it in your browser. If all went well, your form should look the same as it did before installation. If the server has a problem with either of your path settings, you will most likely see either a blank page, or a PHP error message complaining that it can't find the MPFS.class.php file. If you're getting an error message, see the FAQ section, or contact your web host for the correct paths to use. Otherwise, we'll continue...

Generate the Image and Input Field

To add the code image and input field, you will need to add a few PHP snippets into the HTML source code of your form page as follows:

<?php print($MPFS->outputImageTag()); ?>
Insert this bit of PHP code wherever you'd like the image to appear (with the captcha security code).
<?php print($MPFS->outputInputBox()); ?>
This code will add the user input field into your form, and must be within your <form> tags. In most cases, you'll also want to add some informative text before the field, such as "Please re-enter the security code shown above:".
<?php print($MPFS->outputNewImgLink("new image")); ?>
I'd highly recommend providing a link to allow your visitors to load an alternate image in case the first is too difficult to read. The above snippet will tell the script to automatically generate a link to allow this (using JavaScript). The "new image" text between the quotes may be changed to whatever you'd like the link text to be.
<?php print($MPFS->outputHintText()); ?>
This is an optional feature to supply your visitors with a text-based code hint. Using this feature would decrease security, but increase accessibility.

For example, the captcha code between your <form> tags may look like the following:

<p>
<?php print($MPFS->outputImageTag()); ?>
<?php print($MPFS->outputNewImgLink("new image")); ?>
<?php print($MPFS->outputHintText()); ?>
</p>
<p><label>
Please re-enter the security code shown above:
<?php print($MPFS->outputInputBox()); ?>
</label></p>

At this point, you should be able to upload your form page, load it in your browser, and see the automatically generated security image and input field. If the image is not appearing, the problem is most likely with your HTTP path to the "mpfs" folder. Otherwise, we'll continue...

JavaScript Code Pre-Validation

It's often more convenient for your visitors to include JavaScript pre-validation for your security image, which checks if the user input matches the code before allowing the form to submit. To accomplish this, you'll need to add a PHP snippet in the <head> section of your form page:

<?php print($MPFS->outputJSCheck("formName")); ?>

This will import the necessary JavaScript functions to check the code input. The "formName" value between the quotes will need to be changed to whatever the "name" attribute is set to in your HTML <form> tag. To use the JavaScript with your form, you'll also need to add an onsubmit="return MPFSValidate();" attribute to your form tag that calls the function. For example:

<form name="formName" method="POST" action="/path/to/processor.php" onsubmit="return MPFSValidate();">

If you are already using JavaScript validation and would like to implement the code check into your own script instead, include the same PHP snippet into your form page's <head> section, but instead of attaching the onsubmit event above, call the MPFSCheckStatus() function from within your own validation script and it will return a boolean "true" if the codes match, and "false" otherwise.


Validating Input (with NateMail, ProcessForm or other)

As long as you're using NateMail or ProcessForm, versions 3.0.14 or greater, activating the security image features should be very simple. See lines 173 - 174 in ProcessForm (144 - 145 in NateMail)...

$securityFile = "";
$securityError = "Form security error (security image mismatch or unauthorized form page).<br>$le";

To activate the image security, enter the absolute server path to the MPFSProcessForm.php file (inside the "mpfs" folder) for the $securityFile value. The path should start out the same as the $MPFSServerPath path entered in the form page, plus the name of the MPFSProcessForm.php file. For instance:

$securityFile = $_SERVER['DOCUMENT_ROOT']."/mpfs/MPFSProcessForm.php";
$securityError = "Form security error (security image mismatch or unauthorized form page).<br>$le";

Of course, the path inside the quotes will need to be modified if the security folder is not at the root level of your site. You can also customize the error message in the $securityError line for when the text entry does not match the security image.

If you're NOT using NateMail or ProcessForm, you should still be able to implement this plug-in by importing the main MPFS.class.php file, creating a new instance of the class and using the $MPFS->validateInput() method to return a boolean "true" if the codes match, and "false" otherwise. For example:

require_once($_SERVER['DOCUMENT_ROOT']."/mpfs/MPFS.class.php");
$MPFS = new MP_MPFS();
$captchaStatus = $MPFS->validateInput();
if (!captchaStatus) { /* handle captcha error */ }

The script should now be installed and ready to upload and test. If it looks like something is not working, please see the FAQ section below. Otherwise, we will continue with the script's configuration options.


Configuration Options

The script is customized from your form page instead of the main MPFS.class.php file. Earlier we installed the script using the default configuration settings, but you may have noticed the following lines in the code:

// start configuration options
// end configuration options

Any custom configuration settings should be inserted between these two lines in the form page. Here is an example showing and installation with all the configuration options and their default settings:

<?php
$MPFSHttpPath = '/mpfs/';
$MPFSServerPath = $_SERVER['DOCUMENT_ROOT'].'/mpfs/';
require($MPFSServerPath.'MPFS.class.php');
$MPFS = new MP_MPFS();
// start configuration options
$MPFS->codeMinLength = 3;
$MPFS->codeMaxLength = 5;
$MPFS->textColor = array('R'=>225, 'G'=>225, 'B'=>225);
$MPFS->bgColor = array('R'=>75, 'G'=>75, 'B'=>75);
$MPFS->colorVariance = 50;
$MPFS->randomColorFlip = true;
$MPFS->caseSensitive = false;
$MPFS->forceCase = '';
$MPFS->inputFieldName = 'MPFS_input';
$MPFS->imgNameID = 'MPFS_image';
$MPFS->imgAltText = '(verification image)';
$MPFS->codeStructure = 'XHTML';
// hint text options (if applicable)
$MPFS->hintAsAltText = false;
$MPFS->hintNumberText = 'number ';
$MPFS->hintLetterText = 'letter ';
$MPFS->hintLetterUpper = 'uppercase ';
$MPFS->hintLetterLower = 'lowercase ';
$MPFS->hintNumbers[0] = 'zero';
$MPFS->hintNumbers[1] = 'one';
$MPFS->hintNumbers[2] = 'two';
$MPFS->hintNumbers[3] = 'three';
$MPFS->hintNumbers[4] = 'four';
$MPFS->hintNumbers[5] = 'five';
$MPFS->hintNumbers[6] = 'six';
$MPFS->hintNumbers[7] = 'seven';
$MPFS->hintNumbers[8] = 'eight';
$MPFS->hintNumbers[9] = 'nine';
$MPFS->hintPrefix = 'CODE HINT: ';
$MPFS->codeMinLength = 3;
$MPFS->codeMinLength = 3;
// end configuration options
$MPFS->generateCode();
?>

A line-by-line description of each setting follows:

$MPFS->codeMinLength
This setting specifies the minimum number of characters to use when generating a random code.
$MPFS->codeMaxLength
This setting specifies the maximum number of characters to use when generating a random code.
$MPFS->textColor
This setting determines the base color of the code image text and is specified using an array for the RGB color values. For instance, solid black would have a 0 for all values, or: array('R'=>0, 'G'=>0, 'B'=>0); solid white would have a 255 for each: array('R'=>255, 'G'=>255, 'B'=>255);
$MPFS->bgColor
This setting determines the base color of the code image background and is specified using an array for the RGB color values. For instance, solid black would have a 0 for all values, or: array('R'=>0, 'G'=>0, 'B'=>0); solid white would have a 255 for each: array('R'=>255, 'G'=>255, 'B'=>255);
$MPFS->colorVariance
This setting determines the amount of variance to allow for foreground and background colors to radomize the color scheme. The value should be a single number/integer, and indicates the amount of variation on the RGB scale (0-255).
$MPFS->randomColorFlip
This setting should have a true or false value. If true, the script will randomly toggle the foreground and background colors.
$MPFS->caseSensitive
This setting should have a true or false value. If true, the script will check the entered code against the image as case-sensitive.
$MPFS->forceCase
This setting will force the script to only use uppercase letters, lowercase letters, or a mixture of both. The allowed values are: 'upper', 'lower' and '' (nothing between the quotes for mixed case).
$MPFS->inputFieldName
This setting specifies the name attribute to use for the input field. This value will also be the ID attribute of the input field (used for CSS styling). The value should be inside quotes.
$MPFS->imgNameID
This setting sepcifies the name and id attributes for the <img> tag that is generated for the random code.
$MPFS->imgAltText
This setting specifies the alt text attribute used for the random code <img> tag.
$MPFS->codeStructure = 'XHTML';
This setting should be set to 'XHTML' if the form page is XHTML, otherwise 'HTML' for HTML.
$MPFS->hintAsAltText
Set this property to true or false (no quotes). If true, the code hint string will be used as your image alt text (lower security, higher accessibility).
$MPFS->hintAsAltText
If you'd like to use the script's generated hint text as the image alt text, set this to true (lower security, higher accessibility).
$MPFS->hintNumberText
This should be the text used to describe numbers in the code hint (if applicable).
$MPFS->hintLetterText
This should be the text used to describe letters in the code hint (if applicable).
$MPFS->hintLetterUpper
This should be the text used to describe upper case letters in the code hint (if applicable).
$MPFS->hintLetterLower
This should be the text used to describe lower case letters in the code hint (if applicable).
$MPFS->hintNumbers
This is a list of text descriptions of numbers to use in the code hint (if applicable).
$MPFS->hintPrefix

Troubleshooting & FAQ:

When I upload my form and load it into the browser, I can see the PHP code (and it's not working).
PHP is either not available on your server, PHP has not been enabled for your hosting account, or your host server requires a different extension for PHP files. A valid PHP environment is required for this script. Please contact your web host for help.
The code image is not showing up in the browser.
In most cases, this means the HTTP path entered at the top of your form page is incorrect.
The JavaScript function to allow the visitor to change the code is not working, or fails to validate after changing.
In most cases, this means the HTTP path entered at the top of your form page is incorrect. It's also remotely possible that another script is conflicting with the security image scripts. In either case, there's is probably a JavaScript error message that can be detected by your web browser for analysis.
My question is not covered here, or the suggested fix did not work.
Please post a link to your non-functioning page and a description of the problem in our support forum. We can not guarantee an answer, but will try to help if we can.

[ back to top ]