I Click Therefore I Am - PixelCAPTCHA Demo App

TL; DR - Everyones hates CAPTCHAs! So do I. But I wrote a new one anyway :p. It's a visual CAPTCHA scheme that can be solved with 2-4 mouse clicks and is named pixelcaptcha.

Here are the links to a borderline ugly demo web application (I like to think its borderline), a detailed white paper (you may like it) and its Java source code (with gory Maths - you've been warned).

Long Story
This post is to talk about a fancy kid in the CAPTCHA town that now happens to have a demo web app for you to play with. It was first demo'ed at BlackHat USA Arsenal. It's source code has been available for a while but I finally got around to creating a demo web app and wanted to share it via this blog so that the security and developer community can play around and share feedback.


The Demo Web Application
To solve a CAPTCHA, you need to find the black characters similar to be blue ones and hit submit. If you accidentally select a wrong character, you can use the 'Clear Selection' button to clear your selection. I should point out that a CAPTCHAs are good only for one use. If you submit wrong solution once, attempts to solve the same CAPTCHA again will result in error message.

The demo web application has several components to it. It allows you to generate and solve new CAPTCHAs and try out different CAPTCHA configurations. At the backend, the demo application uses the open source CAPTCHA library.

When you visit the demo app for the first time, the default CAPTCHA configuration is used, which you can change by providing a new configuration. The default configuration has:

• Horizontal CAPTCHAs
• Two challenge characters 
• Ten response characters to choose from
• The characters to draw the CAPTCHA are chosen from 0-255 unicode point range
• Unordered solution

The image below shows an example solved CAPTCHA with default configuration.

The Three Control Buttons
You will see three buttons under the CAPTCHA image which let you perform the actions as described below:

1. New Captcha - The New Captcha button refreshes with a new CAPTCHA for you to try out
2. Submit Solution - Once you are confident that you have solved the CAPTCHA correctly, you can submit the solution to the server for validation. A CAPTCHA solution can be submitted to server only once with the 'Submit Solution' button. Any additional attempts result in an error. 
3. Clear Selection - If you have not yet submitted the CAPTCHA solution to the server, you can use this option as many times as you like. When you need to change your solution you can click on this button to clear you solution and reload the same CAPTCHA. This option is useful only if it is exercised before the CAPTCHA solution is submitted to the server.

Message Box
The text in the bottom right box displays information about your most recent actions. The text color legend and some example messages are provided below.

• Blue color indicates CAPTCHA configuration updates. The image below shows a CAPTCHA configuration.

• Green color indicates that correct CAPTCHA solution was provided. The image below shows that a correct CAPTCHA solution was provided

• Red color indicates that in correct CAPTCHA solution was provided. The image below shows that the CAPTCHA solution that was provided was for a CAPTCHA ID that has either expired or is not present.

Different CAPTCHA Configurations
When you select a new value from any dropdown, a new CAPTCHA configuration will be set on the server and the on-screen CAPTCHA will be refreshed with the new configuration. The instructions at the top of the page are also updated based on the challenge character count. I'll briefly explain different configuration options that you can try out on the demo application.

1. Challenge Count - Changing this value sets the total number of challenge characters. It can take 2, 3 or 4 as a valid value. For example, if you set it to 4, you will see 4 blue characters and you will need to choose four black characters similar to the blue challenge characters.
2. Response Count -  Changing this value set the total number of response characters to choose from. It can take 10, 11 or 12 as a valid value.
3. CAPTCHA Orientation - You can generate vertical or horizontal CAPTCHAs for different type of target screens. A vertical CAPTCHA may be more suitable for the mobile devices, a horizontal CAPTCHA may be more suitable for desktops.
4. Unicode Code Point Range - This allows you to provide the unicode character range to choose from. The default value is 0-255. However, you can choose 0-4095 or 0-65535 to use larger character space to pick and use for CAPTCHA challenge and response characters from. The library allows you to provide comma separated arbitrary code points.
5. Ordered Clicks - When set to true, the CAPTCHA solution should follow the order in which the challenge characters appear in the CAPTCHA. For horizontal CAPTCHA, find the topmost challenge character among the response characters and click on it first, then move to the second from top, and so on. For vertical CAPTCHA, find the leftmost challenge character among the response characters and click on it, and so on.

A Few Example CAPTCHAs and The Corresponding Configuration

• Image shows a horizontal CAPTCHA with 4 challenge characters, 10 response characters and unicode character range 0-4095

• Image shows a vertical CAPTCHA with 2 challenge characters, 10 response characters and unicode character range 0-4095

• Image shows a CAPTCHA with 4 challenge characters, 12 response characters to choose from and unicode character range 0-65535

I'll be looking forward for your feedback. Please feel free to leave feedback here, log bugs on GitHub or directly reach out to me. Thank you!