Разработка CAPTCHA своими руками
Сегодня, благодаря господам спам-ботам и иже с ними, в сети практически невозможно что-либо сделать без ввода символов со сгенерированного изображения — CAPTCHA (далее — капча). Фактически, это предотвращает выполнение какого-либо скрипта без участия человека, и в этом топике я расскажу, как такую капчу создать средствами PHP, а так же упомяну очень полезный топик другого хабраюзера, который пригодится при разработке изображения-капчи.
Сразу же предупреждаю, что топик может быть интересен только начинающим разработчикам, так как по сути я изобретаю велосипед, но зато своими руками.
Основные правила
При разработке капчи нужно обязательно соблюдать несколько основных правил: 
1. Капча создана для людей
Она должна сходу читаться, но не в ущерб стойкости к распознаванию. Очень наглядный пример капчи, не соблюдающей это правило — изображение справа.
2. Генератор капчи должен быть четко ограничен в используемых символах
Наглядный пример — изображение в начале топика. Конечно, reCAPTCHA — чудесное изобретение, но порой она предлагает ввести символы, которые и в charmap найти сложно. Кстати, когда речь идет о капче с использованием кириллических символов — ни в коем случае генератор не должен использовать букву «ё». Лично я знаю много людей, у которых на
(тильда / ё) повешено какое-то действие в системе.
3. Капча должна быть стойкой к распознаванию
… но не в ущерб читаемости. Вообще, этот пункт — самый сложный во всей разработке. Необходимо найти золотую середину — капча сходу читается людьми и вообще (насколько возможно) не читается ботами. Так же необходимо учитывать специфику ресурса, на котором планируется использовать капчу, и его контингента. Если речь идет о, допустим, форуме читающих домохозяек за сорок, то на стойкость капчи можно плюнуть с высокой башни — никому он не упрется. Если речь идет о, например, имейджборде, то тут нужна капча а-ля вырвиглаз.
Проектирование
В качестве теоретического объекта, для которого мы будем делать капчу, выступит сферический форум в вакууме, с умеренно агрессивными, умеренно умными и вообще умеренными пользователями. В разработке такой капчи нам поможет очень полезный топик от хабраюзера Pastafarianist. А именно я обращу внимание на перечисленные недостатки и достоинства взятых им капчей.
Итак, по порядку перечислим, что же мы можем использовать:
1. В изображении должно использоваться хотя бы несколько цветов. Желательно всегда разные
Изображение выше — пример того, как это выглядит в действии. На самом деле, это не очень надежный вариант, так как текст с фоном очень контрастирует. Разберемся с цветами позже.
2. Должен присутствовать шум
Прописная истина. Практически в любой капче можно встретить шум, который чаще всего выражается во множестве линий, пересекающих текст, разной длины и под разным углом.
3. Буквы должны находиться на небольшом расстоянии друг от друга
Тут главное не перестараться. Чрезмерное сближение символов приведет к сильному ухудшению читаемости человеком. На примере выше можно заметить, что буквы слипаются, это создает препятствие для бота при сегментации изображения.
4. Размеры символов должны быть разными
Если применять этот трюк, то надо помнить, что препятствие фактически выражается в том, что для сегментации капчи бот не сможет использовать постоянную матрицу. Поэтому если и делать размер символов разным, то обязательно для каждого символа размер должен быть случайным, динамическим.
5. Отвратительный шрифт
Очень полезный способ. Засечки, курсив, стилизация — отличные подводные камни для бота. Так же в сочетании с шумом в виде линий очень хорошо будет смотреться тонкий шрифт. Если абстрагироваться от первого правила генерации капчи, то можно использовать множество шрифтов сразу, к примеру свой шрифт для каждого символа.
6. Символы под случайным углом
Весьма действенный способ оградиться от ботов. Опять же, сегментация будет усложнена, хоть и не значительно. Лучше всего выбрать небольшой диапазон угла, иначе же читаемость сильно испортится (буквы будут наплывать друг на друга).
7. Динамические искажения
Ничего ужаснее человечество еще не придумало. Искажения в капче зачастую очень сильно снижают читаемость человеком. Разумеется, это достаточно эффективно против ботов, но это так же эффективно и против людей. Главное — не перестараться, искажения должны быть незначительными.
Итак, что же мы сделаем:
— Контрастный фон, с шумом
— Линии за текстом, линии на тексте
— Текст в случайном положении
— Количество символов будет случайным, от 4 до 7
— Размер каждого символа будет случайным
— Цвет текста каждый раз будет случайным
— Символы будут слегка прикасаться
— Каждый символ будет под случайным небольшим углом
Разработка
Определимся с целью:
— Генерация шума
— Генерация текста
— Форма с возможностью обновления капчи
— Обработчик введенных данных
По мере написания статьи понял, что искажения в данном случае абсолютно неуместны. Для тех, кому они все же нужны — в конце топика ссылка на урок по созданию искажений.
Пишем форму
Тут все предельно ясно, но на всякий случай я откомментировал некоторые строчки. Кстати, обратите внимание, я не установил параметр maxlenght у поля ввода. В большинстве случаев, разработчики устанавливают этот параметр, указывая размер капчи. Во-первых это нехилая такая подсказка для бота, во-вторых у нас количество символов будет динамическим. Все, интерфейс мы написали, пора приступать к созданию скрипта генерации
Пишем генератор кода капчи (random.php)
Тут все ограничивается только вашим воображением. Как-то я видел иной способ — выбиралась текущая минута, час, месяц, все это перемножалось, из этого выбирались 10 случайных символов, дважды извлекался MD5-хеш, из него извлекались 6 случайных символов и затем все это еще и перемешивалось. Кстати, обратите внимание на выбранные мною символы — я исключил такие как i, l, 1 и 0, o, c, из-за того, что они слишком похожи друг на друга, в некоторых ситуациях пользователь может ошибиться. Генератор я назвал random.php (далее он будет запрашиваться в других скриптах).
Пишем генератор изображения (captcha.php)
Весь код максимально закомментирован. Для проверки введенной капчи обработчиков вносим ее хэш в куки. Для выбора шрифта и фона я сделал массивы, что бы можно было засунуть туда десяток шрифтов и десяток фонов, каждый раз выбираться будут случайные. Шрифт выбрал Droid Sans, он тонкий и среди шума плохо заметен. Кстати, в данном случае я выбрал ужасный, отвратительный и контрастный фон, демонстрация будет в конце топика. К моему удивлению, на читаемость человеком это не повлияло, шрифт достаточно хорошо выделяется, не смотря на то, что цвет шрифта выбирается из случайного пикселя на фоне.
Пишем обработчик (go.php)
Тут все предельно ясно. Берем куки, записанную ранее в captcha.php, берем введенный код, точнее его хэш и сравниваем. Внимание! Если планируете пользоваться этим кодом, не забудьте изменить алгоритм проверки.
Результат
Результат получился весьма неплохим, полностью оправдав мои ожидания (прошу, пожалуйста, заметить, что я не ставил себе цель сделать непробиваемую капчу). Протестировать на стойкость его можно вот тут (надеюсь, мой сервак не упадет под хабраэффектом).
На самом деле, мой код — это лишь шаблон, над которым вы можете издеваться как угодно. А еще на самом деле это не нужно — есть reCaptcha, но лично мне доставило удовольствие делать этот скрипт, пока делал прочитал гору документации, надеюсь, что кто-нибудь подчерпнет знания из моего топика 🙂
Footer
Как и обещал, вот очень полезный код для искажения текста, если кому пригодится.
Не кидайтесь помидорами, пожалуйста 🙂 Это мой первый технический топик на хабре.
И да, я не имею понятия, каким образом работают современные капчи, я просто и не искал никакой информации на эту тему. Если мои методы кажутся вам индийскими — прошу немедленно написать об этом в ЛС / комментарии, я с удовольствием почитаю 🙂 Из недостатков моего метода я вижу только то, что если в браузере не включены куки, то через эту капчу не пройти.
Create Custom Captcha in HTML CSS & JavaScript
Hey friends, today in this blog, you’ll learn how to create Custom Captcha in HTML CSS & JavaScript. In the earlier blog, I have shared how to Detect User Browser using JavaScript, and it’s time to create a simple captcha program.
Mostly, Captcha is used on the comment or contact form of the websites to restrict robots (bot) from commenting on a blog post or sending a message to the admin. There can be random images or codes in the captcha, and the users must have to select correct images or match the codes to complete their task.
In this small project [Custom Captcha in JavaScript], there is an image with the random 6 characters and numbers. You can also refresh the captcha code and get a new one using the reload button.
In the input field, you have to enter the captcha codes that are shown on the image. If your codes matched with the captcha codes, then there is appears a success message else there appears an error message. If you’ve matched the codes, then after 4 seconds there will be generated a new one captcha code.
Recommended Book: Rich Dad Poor Dad Pdf
I hope you liked this simple captcha program and want to get source codes but don’t worry I have given codes and source code files at the bottom of this page from where you can copy-paste codes the source code files.
But before copying codes, let’s understand the basic codes and concepts of this program. At first, in the JavaScript file, I have stored all characters and numbers in the array, then inside for loop, using Math.random() function I got 6 random characters from the given array.
And passed these codes or characters in the captcha by adding space between each character. After this, I got user-entered values, split them, and joined them with space (‘ ‘) so users don’t need to enter spaces to match the codes.
Once I joined the user values then I matched this user value with the captcha codes. If the value is not matched I’ve shown an error message, and if the value is matched I’ve shown a success message and generate the new random codes after 4 seconds using the setTimeout() function.
Create Custom Captcha in JavaScript [Source Codes]
To create this program [Custom Captcha in JavaScript]. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the following codes into your file.
First, create an HTML file with the name of index.html and paste the given codes into your HTML file. You’ve to create a file with .html extension and remember the image that is used on this program will not appear.
Exit fullscreen mode
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
Exit fullscreen mode
That’s all, now you’ve successfully created a Custom Captcha in HTML CSS & JavaScript. So this is all for today.
Thanks!
Как сделать капчу в html
A captcha is a way of identifying a user whether the user is human or not. A captcha is made up with the help of combining letters and digits. it ensures that the user who is trying to access the platform is a human. So without wasting the time let’s get started.
Application of Captcha:
- Form Authentication: For login and sign up it can be used to ensure that a end user is human.
- Preventing Fake Registrations: With the captcha we can prevent bots from creating a account on a system.
- Preventing Fake comments: This way bot would not be able to do Comment on a system,
- NetBanking and financial institutes: To ensure that Authentication is only done by humans and this way manipulation of transactions can be prevented.
Note: Captcha can protect From some Automated attacks as well.
Example: First, create a section for Captcha with HTML. The below code will generate a design for a captcha and from the CSS file we will add style and on the image(refresh) click, we will generate a new captcha by calling generate() method from JavaScript.
HTML Form Submit with Google reCAPTCHA, Vanilla JS and PHP
Finding simple answers for submitting custom HTML forms are hard to find, especially when adding in Google reCAPTCHA and avoiding jQuery. The following code is a result of hours of hunting Stack Overflow for answers to two main problems: How to submit an HTML form without AJAX and how to prevent Google reCAPTCHA from overriding HTML5 form validation. The first required using a hidden iFrame as the form target, and the second involved placing the ReCAPTCHA attributes in a hidden div rather than in the submit button.
Here is the sendEmail.php file:
Written by Harry Herskowitz
Harry is a web developer and videographer with a focus on using technology to empower local artists and communities