Spammers are getting clever. I know the words spammer and clever don't fit easily in the same sentence but they are employing more and more methods to send you their rubbish. One method that has been around a while is automated form submissions where a bot will automatically fill out a form on your site with junk.

Now we've all been to those sites that use image verification, such as vBulletin, where the user has to enter the characters displayed in an image before submitting the form. This helps to stop automated submissions as the bot cannot "see" the image.

This simple tutorial will show you how to beat these submissions by creating an image that will prevent the user from continuing until they enter it correctly.

Essential Ingredients

ColdFusion MX 6.1

The CFX_OpenImage tag (Free from here: http://www.kolumbus.fi/jukka.manner/cfx_openimage/)

About five minutes of your time ;-)

Preparation

Create a folder named backgrounds (This will hold the backgrounds for use in your image)

Make sure you have a folder called Images

Download and install the CFX_OpenImage tag from above

Create a file name formentry.cfm or just use your existing from page.

The code (Download entire example code)

Right then. Let’s start with a basic form page that will submit to itself:

<cfif IsDefined("form.yourName")>
   <!---Process the forum--->
<cfelse>

   <form action="imageverify.cfm" method="post" name="verify">
       Your name: <input type="text" name="yourName" size="20" /><br /><br />
       <input type="submit" value="submit" />
   </form>

</cfif>

All the above code is doing is submitting a form to itself with one text field.

The next step is to set-up our variables for creating the random image so adapt the chunk of code above so it becomes this:

<cfif IsDefined("form.yourName")>
    <!---Process the forum--->

    <!---

        *****MAKE SURE YOU HAVE READ AND COMPLETED THE STEPS BELOW FOR GENERATING YOU IMAGE!*****

    --->

    <!---

        Now that we have our generated image saved as a session and also the entry from the form,
        all we do is compare the two and make sure they match

    --->

    <cfif form.imageVerify EQ session.imageText>
         The verification was good!
    <cfelse>
         The verification failed!
    </cfif>

<cfelse>

    <!---

        First we need to set the fonts, sizes etc for our image and save them to arrays.
        You can change these values to whatever you like or add more

    --->

    <!--- // List of fonts // --->
    <cfset fonttype=ArrayNew(1)>
    <cfset fonttype[1]="Arial">
    <cfset fonttype[2]="Comic Sans MS">
    <cfset fonttype[3]="Tahoma">
    <cfset fonttype[4]="MS Sans Serif">
    <cfset fonttype[5]="Impact">
    <cfset fonttype[6]="Times New Roman">
    <cfset fonttype[7]=" Georgia">
    <!--- // List of font colours // --->
    <cfset fontcolour=ArrayNew(1)>
    <cfset fontcolour[1]="00FF66">
    <cfset fontcolour[2]="33FFFF">
    <cfset fontcolour[3]="CCFFCC">
    <cfset fontcolour[4]="FFFF00">
    <cfset fontcolour[5]="FAEBD7">
    <!--- // Font weights // --->
    <cfset fontweight=ArrayNew(1)>
    <cfset fontweight[1]="Bold">
    <cfset fontweight[2]=" Normal">
    <!--- // Italics // --->
    <cfset fontitalics=ArrayNew(1)>
    <cfset fontitalics[1]="0">
    <cfset fontitalics[2]="1">

    <!---

        To further complicate the generated image we now adjust the appearance and display

    --->

    <!--- // If you change the amount of images, alter the second digit on the following line.
                Ensure all images are named start1, start2 etc up to this number // --->
    <cfset randimgname = RandRange(1,10)>
    <!--- // If you alter the number of font faces above, change the second digit below to match // --->
    <cfset randfonttype = RandRange(1,7)>
    <!--- // If you alter the number of font colours above, change the second digit below to match // --->
    <cfset randfontcolour = RandRange(1,5)>
    <!--- // For both Bold and normal weight fonts, change the following line to 1,2 (Note: Normal fonts are sometimes difficult to read on the images) // --->
    <cfset randfontweight = RandRange(1,1)>
    <!--- // Set random selection between italics/normal // --->
    <cfset randfontitalics = RandRange(1,2)>
    <!--- // Alter numbers below to adjust the range for the random rotate (Note: Seems to increase image dimensions drastically) // --->
    <cfset randrotate = RandRange(-30,30)>
    <!--- // Alter numbers below to adjust the range for the random swirl of the background image // --->
    <cfset randswirl = RandRange(10,700)>
    <!--- // Alter numbers below to adjust the range for the random wave // --->
    <cfset randwave = RandRange(10,25)>
    <!--- // Generate Random Number and store in session variable // --->
    <cfset session.imagetext = RandRange(1000,9999)>
    <!---now we pass all of the above variables into the Custom Tag--->
    <!--- // Write Image Output //--->
    <CFX_OPENIMAGE ACTION="iml"
                DEBUGs
                NAME="qimage"
                FILE="#expandpath('backgrounds/start#randimgname#.jpg')#"
                X="80"
                Y="80"
                commands="
                     setimage or1=original
                     ##Uncomment the following line if you want swirl on the background image
                     ##swirl #randswirl#
                     texture textureImagE
                     ## setfont size,italic,underline,weight,face
                     setfont 18,fontitalics[randfontitalics],0,#fontweight[randfontweight]#,#fonttype[randfonttype]#
                     ## write some text
                     text 10,10,-1,-1,#fontcolour[randfontcolour]#,#session.imagetext#
                          ## rotate by X degrees
                     rotate #randrotate#
                     wave #randwave#
                     addnoise Uniform
                     gaussianblur 1,0.5
                     write #expandpath('images/#RandRange(1000,9999)#.jpg')#
                ">

    <form action="imageverify.cfm" method="post" name="verify">
        Your name: <input type="text" name="yourName" size="20" /><br /><br />
        <!---
                Finally we disaply the image in the form
        --->
        Please enter the characters displayed below before submitting your form:<br /><br />
        <!--- // Display Image // --->
        <cfoutput query="qimage">
            <img src="images/#getfilefrompath(img_file)#" border="0">
        </cfoutput>
        <input type="text" name="imageVerify" size="10" /><br />
        <input type="submit" value="submit" />

    </form>

    <!---the following lines will just help you with debugging--->
    <!--- // Comment the following lines to disable debugging // --->
    <br /><br />Debugging Output:<br /><br />
    Value: <cfoutput>#session.imagetext#<br />
    Font: #fonttype[randfonttype]#<br />
    Background: #randimgname#<br />
    Rotation: #randrotate#<br />
    Wave: #randwave#<br />
    Weight: #fontweight[randfontweight]#<br />
    Swirl: #randswirl# (Currently Disabled)<br />
    Colour: ###fontcolour[randfontcolour]#<br />
    Italics: <cfif fontitalics[randfontitalics] EQ 1>Yes<cfelse>No</cfif>
</cfoutput>

</cfif>

The way forward with this tutorial is to adjust the variables, add more backgrounds, etc to further enhance the security of the image and to further confuse those pesky spam bots!

Many thanks to William Nisbet at Fresh Look Hosting for the original concept.

Name: Philip Williams
Web: http://www.openmindhosting.com