Anyone who has spent time web surfing in the last few years has seen the popularity of Captchas rise to the point where it’s almost considered bad practice to not use one. The reality is in today’s world you need to protect your application from spam bots and brute force cracks. And fortunately for us Cold Fusion programmers, CF8 makes this incredibly easy with the edition of the cfimage tag.
Although relatively easy from a programmatic standpoint, when using cfimage for captchas you should take your intended audience into consideration in order to make the best decision on setting attribute values. Those you will need to take into consideration are width, height (overall image size), fontsize, and difficulty (how hard the text is to read).
Qusetions you might and should ask before proceeding:
- How old are my readers?
- How tech-savvy are my readers?
- Do my users have any visual disabilities?
I decided for my purposes that my average readers would be in their 20s, technicaly-savvy and unlikely to have any visual impairment. After playing around with the sizes for a while I finally settled on this:
Here is sample output at each difficulty level:
Low:
Medium:
High:
Once you are satisifed with your captchas look you need to do a bit of programming to make it useful. You will need to:
- Come up with a method for generating a random string
- Store the string for comparison after form submittal
- And lastly compare the value entered by the user to our captcha string to make sure it’s a match
[1. Come up with a method for generating a random string]
There are tons of ways you can do this… heck you probably have a method already lying around somewhere already. But incase you don’t, the key thing with random string generators is to chose random numbers from the ascii table and then use chr() to pull out the character. Since my captchas are inherently case sensitive (see part 2), I pull random numbers from 65,90 (A-Z).
*I could have technically used both upper and lowercase since my code converts the input to uppercase prior to doing the hash check anyway, however I felt using one or the other provided more uniformity, and ultimately uppercase letters were easier to read.
function randString(len){
var i = 0;
var str = "";
var chr1 = "";
for (i = 0; i < len; i++){
chr1 = chr(randRange(65,90));
str &= chr1;
}
return str;
}
[2. Store the string for comparison after form submittal]
I chose to store mine within the form begin submitted using the Hash() function… although I could have easily stored this in the session or client scope if I wanted to. You can use any of these methods or come up with another, but consider following my lead b/c it is fundamentally simplier and doesn’t require an active memory store.
*Take note that hashing the string means the input is case sensitive.
<input name="rs" type="hidden" value="<cfoutput>#hash(rs)#</cfoutput>" />
[3. And lastly compare the value entered by the user to our captcha string to make sure it’s a match]
In this case we have to hash the input (form.captcha) and compare it to our stored value (form.rs):
<cfset rs = hash(ucase(form.captcha))> <!--- hash input --->
<cfif rs eq form.rs and len(trim(msg))> <!--- do comparison --->
For detailed information on cfimage, check out the livedocs entry from adobe.
Download the complete example.
web development
cfml
