FEATURE: Cool Project: Create a CAPTCHA for Your Website
I
RUN A PERSONAL WEB SERVER THAT ) USE FOR VARIOUS PROJECTS AND EXPERIMENTS /VER TIME ITS ALSO BECOME A CONVENIENT PLACE FOR ME TO POST OTHER INFORMATION TO SHARE WITH FRIENDS AND FAMILY&OR EXAMPLE AFTER MUCH PROMPTING BY MY FAMILY ) FINALLY PUT UP A hWISH LISTv PAGE FOR #HRISTMAS AND BIRTHDAY GIFT IDEAS
-OST OF WHAT ) SHARE ON THIS PERSONAL WEBSITE IS INTENDED FOR FRIENDS AND FAMILY ONLY NOT FOR THE GENERAL PUBLIC )TS NOT SENSITIVE INFORMATION OR PRIVATE DATA BUT )D RATHER NOT PUT IT OUT THERE FOR JUST ANYONE TO SEE
For a while, I considered protecting my web pages using a proper login SYSTEM BUT ) DIDNT WANT TO MANAGE USER NAMES AND PASSWORDS FOR ALL MY FRIENDS AND FAMILY WHO WANTED TO ACCESS MY PERSONAL WEBSITE ) MIGHT have implemented OpenID or some other decentralized authentication protocol to allow visitors to log in using another service. And although that would be the technically correct thing to do, I thought it was overkill TO REQUIRE A USER NAME AND PASSWORD JUST FOR MY FRIENDS AND FAMILY TO VIEW MY WISH LIST PAGE
So instead, I wrote a simple web system that asks visitors to
DEMONSTRATE THAT THEY KNOW ME 4HIS ISNT A FORMAL LOGIN SYSTEM RATHER ITS A FORM OF #!04#(!
4HE CONCEPT OF ANY #!04#(! IS TO PRESENT SOME SIMPLE TEST FOR AN intended AUDIENCE TO ANSWER BUT THATS DIFFICULT FOR ANYONE ELSE -OST
#!04#(!S TRY TO PRESENT A TRIVIAL PUZZLE SUCH AS CLICKING ON ANY PHOTOS THAT CONTAIN WATER LIKE FOUNTAINS OR LAKES 4HESE #!04#(!S OFTEN ARE USED IN ONLINE COMMENT SYSTEMS TO VERIFY THAT THE PERSON LEAVING THE comment is a real person and not a bot.
)N MY CASE ) WANTED TO CREATE A #!04#(! THAT WAS SIMPLE FOR FRIENDS AND FAMILY TO ANSWER BUT DIFFICULT FOR OTHERS TO FIGURE OUT !ND ) DECIDED TO DO IT IN A TOTALLY ADORABLE WAYBY USING PHOTOS OF MY CATS
My CAPTCHA
-Y #!04#(! ASKS VISITORS TO CLICK ON THE PHOTO OF ONE OUR CATS AGAINST A hFORESTv OF OTHER CATS THAT DONT BELONG TO ME )F YOU KNOW ME PRETTY WELL THIS IS EASY /BVIOUSLY MY FRIENDS AND FAMILY KNOW WHAT MY CATS LOOK LIKE 3ELECTING THE PHOTO OF MY CAT IS A SIMPLE DEMONSTRATION THAT YOU KNOW ME STRANGERS WOULD BE UNLIKELY TO SELECT THE CORRECT IMAGE
FEATURE
FEATURE: Cool Project: Create a CAPTCHA for Your Website
5SING PHOTOS OF MY CAT ISNT A PERFECT SOLUTION )TS ENTIRELY POSSIBLE THAT ATTACKERS COULD USE A BRUTE FORCE METHOD AND KEEP CLICKING ON PHOTOS OF cats until they recognize which cats are mine. But this isn’t a proper login SYSTEM ITS JUST A #!04#(! )M NOT PROTECTING SENSITIVE INFORMATION LIKE SOCIAL SECURITY NUMBERS ) MERELY WANT TO PREVENT SOME RANDOM *OE 5SER FROM SEEING WHAT BOOKS AND T SHIRTS )M ASKING FOR AT #HRISTMAS
)N THE SIMPLEST CASE CREATING A CAT #!04#(! INVOLVES CREATING A RANDOM hFORESTv OF CAT PHOTOS WHERE ONLY ONE OF THE CATS BELONGS TO YOU 9OU CAN CREATE THIS hFORESTv IN ANY NUMBER OF WAYS /NE EASY WAY TO DO IT IN 0(0 IS TO CREATE TWO LISTS ALL IMAGES OF MY CATS AND ALL IMAGES OF OTHER PEOPLES CATS 0ICK ONE PHOTO OF MY CAT AT RANDOM FROM THE hMY CATv LIST AND SEVERAL PHOTOS AT RANDOM FROM THE hNOT MY CATv LIST THEN SHUFFLE THE RESULT
3O YOU NEED TO GET STARTED WITH PHOTOS OF CATS 4HIS IS THE EASIEST STEP 'O THROUGH YOUR PHOTO COLLECTION AND FIND PICTURES OF YOUR CATS
Figure 1.
Jim’s Cat
FEATURE
FEATURE: Cool Project: Create a CAPTCHA for Your Website
CONTENTED CATS LYING IN THE SUN SLEEPY CATS NAPPING ON CUSHIONS PLAYFUL CATS PROWLING THE BACKYARD CONFUSED CATS WONDERING WHY YOURE ALWAYS pointing a camera at them.
4HEN CROP AND RESIZE YOUR CAT PHOTOS TO THE APPROPRIATE DIMENSIONS 3O YOU CAN USE THE PHOTOS MORE EASILY IN THE #!04#(! CROP THE PHOTOS TO BE SQUARE WITH THE CAT TAKING UP MOST OF THE PHOTO )N ')-0 THIS IS EASILY DONE IF YOU SET THE #ROP TOOL TO USE A FIXED ASPECT RATIO OF hv !T THIS STAGE DONT WORRY ABOUT THE SIZE OF THE CAT PHOTOS )LL DESCRIBE HOW TO set that in a later step.
.EXT YOU NEED PHOTOS OF OTHER CATS 9OU CAN FIND THOSE FROM A VARIETY OF ONLINE PHOTOS BUT ) WENT ON &ACEBOOK AND LOOKED FOR ANY CAT PHOTOS POSTED BY MY FRIENDS ) FOUND ABOUT OTHER CAT PHOTOS THIS WAY *UST make sure the other cats don’t look too much like your cats, and same as THE PREVIOUS STEP CROP THE OTHER CAT PHOTOS SO THEY ARE SQUARE
4O USE THESE CAT PHOTOS IN A #!04#(! YOU WANT TO ENSURE THAT THE Figure 2.
Jim’s Other Cat
FEATURE
VISITOR CANNOT GUESS WHICH CAT IS YOURS BASED ON THE PHOTOS FILENAMES
0HOTOS NAMED SOMETHING LIKE MYCAT?JPG CAN PROVIDE CLEAR CLUES THAT the cat might belong to you. Instead, name all your photos in the same GENERIC WAY ) PREFER TO RENAME MY CAT #!04#(! PHOTOS ACCORDING TO THE -$ SIGNATURE OF THE PHOTO 4HIS PROVIDES SUITABLE NON PREDICTABILITY YOU can’t guess which photos are my cats and which are not simply based on THE PHOTO FILENAME
4O MAKE YOUR PICTURES MORE ALIKE STRIP YOUR CAT PHOTOS OF ANY %8)&
DATA 7HILE HUMANS WONT SEE THE %8)& DATA A BOT MIGHT %8)& DATA COULD provide a telltale hint that a photo is or isn’t your cat. So make them all THE SAME AND OMIT %8)& DATA
.OTE IF YOUR #!04#(! PHOTOS DONT CHANGE OVER TIME ATTACKERS COULD USE A BRUTE FORCE METHOD TO TRY ALL OF THE PHOTOS UNTIL THEY GUESS THE -$ SIGNATURES OF THE CORRECT IMAGES 4O PROTECT AGAINST THIS ) ADD SOME RANDOM NOISE TO THE PHOTOS )M SURE YOU CAN DO THIS IN ')-0 BUT ) FOUND it was easiest to use ImageMagick’s Convert tool to add noise while I resized the cat photos:
convert large_photo.jpg -strip -resize 250x250 +noise ´Laplacian small_photo.jpg
)MAGE-AGICK HAS SEVERAL RANDOM NOISE GENERATORS BUT ) FIND THE Laplacian method doesn’t disturb the image too much.
You easily can automate ImageMagick with a script, and that’s what ) DO ! SIMPLE "ASH SCRIPT PROCESSES ALL OF MY IMAGE FILES EVERY DAY TO resize them and add noise while renaming them to something random.
4HIS ALSO MERGES THE PHOTOS INTO A SINGLE DIRECTORY AND CREATES THE LISTS OF hMY CATSv AND hNOT MY CATSv 0UT THE LIST FILES IN A SEPARATE DIRECTORY PREFERABLY OUTSIDE THE DOCUMENT ROOT /N MY PERSONAL WEB server, my document root is under /var/www/html, but I keep my list FILES IN VARWWWETCCATS
4HIS SCRIPT RUNS ON MY PERSONAL WEB SERVER EVERY DAY
#!/bin/sh
etcdir=/var/www/etc/cats/
cachedir=/var/www/html/captcha/cache/
FEATURE: Cool Project: Create a CAPTCHA for Your Website
FEATURE
FEATURE: Cool Project: Create a CAPTCHA for Your Website
catsdir=$HOME/cats tempimg=/tmp/cat.jpg
for d in mycats notmycats ;; do ( cd $catsdir/$d
>$etcdir/$d.list
for img in *.jpg ;; do
convert $img -strip -resize 250x250 +noise Laplacian $tempimg hashval=$( md5sum $tempimg | awk '{print $1}' )
mv $tempimg $cachedir/$hashval.jpg echo $hashval.jpg >> $etcdir/$d.list done )
done
4HIS SCRIPT ADDS ALL CAT PHOTOS SAVED IN (/-%CATSMYCATS TO THE hMY CATSv LIST AND ALL CAT PHOTOS SAVED IN (/-%CATSNOTMYCATS to the “not my cats” list. ImageMagick removes all EXIF data
(-strip RESIZES ALL PHOTOS TO THE SAME SIZE -resize 250x250 and adds some random noise (+noise Laplacian !T THE SAME TIME ALL CAT PHOTOS ARE MIXED TOGETHER WITH RANDOM FILENAMES IN the /var/www/html/captcha/cache directory.