CAPTCHA: have implementation ideas

    By chance, the idea came up of how to implement captcha image output.
    Perhaps someone has already implemented such a method, I don’t know.

    The bottom line is to display the image not using the “img” tag, but let's say using the “div” using styles, namely the background property, but that’s not all. Background gives us the opportunity to repeat the image, therefore, we can create an image that would not make sense with a single output, but with repetition we get an image that a person could recognize.
    In general, I’d better give an example.

    I’ll take Yandex captcha for the original image:


    Now we ’ll edit the image, namely, cut it into two halves and swap them, this is what happened:


    Although it is not necessary to cut the image in this way, it depends on how you use the styles.

    And now the code:



    If you paste this code on the page, we get an image similar to the second picture.
    We need to get a normal image that a person could recognize, so we add something and get:



    As a result, we get a picture identical to the original image.
    This is the easiest way to implement this idea, you can further ponder.

    But a slightly different idea is more difficult to implement, but probably also interesting:

    Suppose that the image is displayed and part of it is overlapped by the image with the background color, the person recognizes only the visible part of the captcha, and the robot recognizes the entire image and therefore cannot pass the test.

    Also popular now: