Formcha. Antibot with a human face?

Prehistory

Once I tried to register on one developer forum. He tried for a long time, used almost all of his stock of curses addressed to the admin, who overdid it with the captcha settings. I registered only from the 15th time and spent a lot of useful time fighting someone's paranoia.

After this incident, I sharply wanted to come up with some kind of antibot system that would not cause attacks of aggression when solved, and would cause attacks of aggression from those people who would write a hacking system.


')

Research problem

To begin, let us return (once again) to the problem of captcha. Complicated captcha is achieved by adding noise and distortion. But this is a double-edged sword, because the more noise and distortion you add, the harder it is for a person to guess the characters. If you make a mistake with the input - start all over again. Often, they simply have to update the image several times in order to somehow simplify their solving problem.

If we approach the solution of the problem only within the framework of the current implementation, then apart from the next clone, nothing can be done. And this clone will have all the hereditary problems of the "parents". One of my rules sounds like this: “If you cannot solve a problem in a simple way, then you need to change the condition of the problem so that it is solved in a simple way.”

Why do you need a captcha? To weed out the automatic sending of data to the server. What does the user do with it? Using the form. And what if the form to make the same captcha?

A form is a collection of named fields. If you simply replace the field names with the abracadabra, then it will not do anything, since you can easily calculate the position of an element in the node tree, make field mapping, send data to the server according to the mapping. The problem does not solve, but we develop the idea further. Let the fields come in random order with coded names. The user, before filling the form, will first restore the correct field order, and only then fill out the form and send it. The riddle of this captcha will be to get the correct field order. How to know that the order is correct? You can mark the field names and the input fields themselves with images, colors, figures, anything, and then set the task to add a puzzle using some algorithm.

Algorithm

To begin with, we create a certain array of normal field names in the reference order. I will use abstract language to describe.

formData = [ { name: "first_name" }, { name: "last_name" }, { name: "nick" } ]

Add hashes to the structure, which are made based on the name, plus an index that will come in handy later.

formData = [
{
name: "first_name",
hash: "0947fh27",
index: 0
},
{
name: "last_name",
hash: "82jj2n4lE2",
index: 1
},
{
name: "nick",
hash: "jf12sjfjI9",
index: 2
}
]

Now we create three fraudulent arrays with wrong positions. I will simplify this to indexes.

fake = [ [ 2, 1, 0 ], [ 2, 0, 1 ], [ 1, 0, 2 ] ]

And we add in the middle a normal array with the correct positions. It is important that this is not in the first place, so that a person understands that he needs to do something before sending it. Yes, and false positives can be reduced.

fake = [ [ 2, 1, 0 ], [ 2, 0, 1 ], [ 0, 1, 2 ] , [ 1, 0, 2 ] ]

It's all good, but now how to make a puzzle? For the demonstration, I chose a simple puzzle with geometric figures of different colors. You need to collect their halves. I added one half of a certain random figure to the normal data; I placed the first false array in pairs according to the indices.
formData = [
{
name: "first_name",
hash: "0947fh27",
index: 0,
picture: "red_circle_left"
},
{
name: "last_name",
hash: "82jj2n4lE2",
index: 1,
picture: "yellow_triangle_left"
},
{
name: "nick",
hash: "jf12sjfjI9",
index: 2,
picture: "green_circle_left"
}
]

fake [0] = [
{
hash: "jf12sjfjI9",
index: 2,
picture: "green_circle_right"
}
{
hash: "82jj2n4lE2",
index: 1,
picture: "yellow_triangle_right"
},
{
hash: "0947fh27",
index: 0,
picture: "red_circle_right"
}
]

We save these structures into the session and begin to form the HTML part. To draw the graphics, I used css-classes, which I used as the background links to the pictures by index, and not by the hash, so that there was no clue for the hacker about the true order.

It turned out like this:

.lp0 { background: url( /img/get/?type=l&pos=0) ... }
.lp1 { background: url( /img/get/?type=l&pos=1) ... }
.lp2 { background: url( /img/get/?type=l&pos=2) ... }
.rp0 { background: url( /img/get/?type=r&pos=0) ... }
.rp1 { background: url( /img/get/?type=r&pos=1) ... }
.rp2 { background: url( /img/get/?type=r&pos=2) ... }


The script reads data from the session and returns the names of the pictures for the text description of the fields (type = l) from the normal array, and for the fields themselves (type = r) from the blende array.

We draw the left side with the textual description of the fields in the normal order, and the fields themselves in the fake array, while arranging the classes of the nodes in the normal order for both the left and right parts. The field names will be taken from hash.

Everything, further in the course comes JS. I used as an example StateController, which coped well with the task of cyclic field permutation and, further, the task of data collection.

After the user has “collected” the form, he can fill it out.

But we need to ensure that the fields go in the right order. For this, json is the best fit. We collect data into the structure we need, keeping the position of each field, and send it to the server with an AJAX request.

The server accepts data in one single json field, retrieves its “old” records from the session about the correct data structure, and begins to compare two arrays by hashes. If everything is good, then mapping of values ​​and names of elements is performed, and then this information is sent for processing to subsequent functions. If everything is bad, then we notify the user about inadequate behavior, and if there is a desire to protect oneself from busting options, we apply administrative measures with an increase in the lag between receiving information from this IP and the like.

Voila! View functional demonstration

Problems

Where without them. I will list the most important:

• The complexity of implementation is slightly higher than with conventional captcha. Integration will be challenging for newbies.
• Data cannot be sent by ordinary POST or GET requests, only JSON, in order to guarantee the position of the data.
• I can not imagine how to send data in the usual way, and not using AJAX.
• Autocomplete will not work as encrypted field names.
• The minimum number of form elements is three. Then you have to get out by introducing empty blende fields.

Security enhancement methods

They can come up with a long time, and the main direction, as I see it, is in creating a variety of puzzles. You can sort out different puzzles, different figures, different principles of combination. To quickly not parse the text of the riddle, you can make the text of the question in the form of a picture. But that's another story…