Implementing client side CAPTCHA

I got this case when my colleague tester reported a “bug” – when they typed CAPTCHA they had to submit and wait for page to reload before they knew that captcha they entered was incorrect and they could not understand why would they need to wait for page to reload… I’ve replied explaining that this validation has to be done on server… but then I’ve realized it actually can be implemented over client side while having captcha reliable (non-easily breakable/guessable) and start searching web to see what was already done on this…

Here are several ways of implementing Captcha:

  • The standard approach is to submit entered text to server and wait for server response – requires page reload – that is not interesting… :)
  • Second thing I thought of was using AJAX request to pass entered captcha text to server, validate it over server, present server response to client, so it will be done without reloading of page. More or less same as first method, but does not require page reload which is good ;)
  • But then I thought of even easier way and found couple of articles where client side validation implemented with help of Javascript and MD5 hash. Server after generating captcha creates MD5 hash of captcha text and pass it with page response to client. After client enters captcha text and press submit, Javascript creates MD5 hash of entered captcha over client side and compares it to MD5 hash passed from server, if both match – entered captcha correct and page can be submitted. Basically MD5 hash plays key role here as captcha text passed from server stored as MD5 hash string and client can’t (easily over short period of time) decode it, but able to produce MD5 hash of entered text over client side that will either match or not MD5 hash passed from server… If you do not trust MD5 you can use SHA1 or other hash algorithm – many are implemented in JavaScript. Of course you still have to perform same validation on server to prevent clients who could bypass client-side validation.

But the moral of the story is – Think different!!! :D

Tags: , ,

Leave a Reply