Капча с использованием HTML5

На большинстве сайтов в качестве капчи используется картинка, подгружаемая в бинарном виде при обращении к некоему скрипту-обработчику. Реже встречаются капчи, отображаемые с использованием технологий Flash или Java. Плюс в использовании таких капч безусловно есть, но некоторые пользователи любят отключать подобные расширения, с целью обеспечения дополнительной безопасности при серфинге в интернете. Однако пятая версия основного языка разметки веб-страниц принесла с собой множество полезных нововведений. Одно из них - элемент canvas, который предназначен для создания растровых изображений с помощью JavaScript.
Соответственно, с помощью этого элемента и JS можно выводить изображения капчи в браузер, например, в виде массива точек, которые будут собраны в изображение с помощью JS. В чем смысл? Смысл в том, чтобы затруднить автоматизированное распознавание изображений.

Во-первых, можно придумать специфический формат хранения данных, который будет впоследствии декодироваться скриптом.
Во-вторых, можно упаковать и обфусцировать данные изображения, чтобы затруднить парсинг и навязать использование JS-интерпретаторов.
В-третьих, можно использовать специфичные для браузеров JS-«фичи», которые затруднят работу интерпретаторов.
В общем, есть, где развернуться.

И, наконец, вот простой пример подобной капчи (без маджонга и гейш). По идее должен нормально работать в Firefox, Opera, Chrome и IE9.
Исходный код: скачать

Капча с использованием HTML5: 32 комментария

    1. Не умрет, все равно распознать можно, просто придется js разбирать, парсить у себя, собирать картинку, отправлять на антикапчу... А если js обфусцированный и сжатый, то задача еще усложняется)

  1. Идея интересная, только работать не будет. Есть такая утилита под unix - khtml, если не ошибаюсь, называется. Делает скриншот веб-страницы по ее URL. Делаем скриншот, вырезаем капчу, а потом ломаем как обычную, графическую.

    1. Ага и рассылаем исключительно под линуксом с постоянным испольованием данной утилиты? Факт состоит в том, что люди привыкли пользоваться софтом под Win и рассылать в 100500 потоков.
      А данный способ призван не исключить любую возможность автоматизированного распознавания, а сделать этот процесс более трудоемким. Опять же никто не мешает добавить шифрование принимаемой капчи на основе браузера пользователя.

      1. Задачку с "фотографированием" капчи можно оставить онлайн сервисам, которые юзают обычные браузеры типо огнелиса, оперы, хрома и т. п. :)

        1. Если все метнуться их использовать в промышленных масштабах, то эти сервисы в свою очередь введут противодействие автоматизации. Опять же, данный пример привязан к сессии пользователя. Как её получит сервис то?

  2. Не вглядывался в HTML5, но, судя по приведённому примеру, получить картинку большого труда не составит )

  3. Реально крутая капча куда хочешь можно прикрутить к любому движку + легко перебить под свои нужды. Спс автору за пост.

      1. из php ответ от php приходит в виде массива чисел 0 - 255, по сути поставил все так как у вас в исходнике http://biz.giperium.ru/%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA-%D0%BD%D0%B5%D0%B4%D0%BE%D0%B1%D1%80%D0%BE%D1%81%D0%BE%D0%B2%D0%B5%D1%81%D1%82%D0%BD%D1%8B%D1%85-%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%B0%D0%B3%D0%B5%D0%BD%D1%82%D0%BE/
        тут кнопка "Добавить контрагент". в конце формы каптча стоит...

    1. Проблема со стороны PHP, font.ttf присутствует вместе с captcha.php?
      Могу предложить добавить в captcha.php в начало error_reporting(E_ALL); на время и посмотреть, как он себя ведет.
      Возможно стоит временно закомментировать die('var colorArray = ['.implode($data, ',').'];');
      Добавить перед imagedestroy($im); строки header('Content-Type: image/jpeg'); imagejpeg($im); и посмотреть, что будет отображаться

  4. Привет еще раз:) Я практикуюсь в программировании так что багаж знаний небольшой. Скажи пожалуйста или покажи напримере. Кароче в вк можно узнать возраст(дату рождения) если он скрыл(hidden) тоесть на странице у человека нету информации, ну ты про этот баг знаешь)) Так вот когда в поиске людей вбиваешь фамилию он выдает список и чтобы узнать, мы выбираем от и до и смотрим, когда картинка исчезнит значит предыдущее значение это его возраст. Так вот я хочу сделать так чтобы я это не вручную делал а с помощью ajax запросов. Токо я незнаю как и там хоть я и изучил ajax на половину, а как формировать запросы и писать под вк я хз. И 2 вопрос можно это реализовать в JS? Если подскажешь кто поможет в этом деле или покажешь на примере буду очень рад.

  5. Люди, вы "под капот " смотрели? Автор всех круто объ.............л, написал километр php кода и вывел его AJAX-ом.

Добавить комментарий для Андрей Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *