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

Пятница, 19. Ноябрь 2010
Раздел: HTML/JS, PHP, автор:

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

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

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

 Обсудить на форуме


Получать обновления на почту:     

Комментариев: 31 к “Капча с использованием HTML5”

  1. Интересно, спасибо.
    Где найти подробную документацию по html5 ?

    [Ответить]

    Kaimi:

    Думаю где то тут http://www.w3.org/TR/html5/

    [Ответить]

  2. такую каптчу нужно предложить разработчикам "вконтакте" ))) спам умрет сам по себе

    [Ответить]

    dx:

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

    [Ответить]

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

    [Ответить]

    Kaimi:

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

    [Ответить]

    SHok:

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

    [Ответить]

    Kaimi:

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


  4. Nameless :

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

    [Ответить]

    Kaimi:

    А если добавить обфускацию JS, то составит. Да и нагрузка на компьютер при рассылке возрастет.

    [Ответить]


  5. Мимоходом :

    Хрумер пробивает ?

    [Ответить]


  6. b3gt :

    /wp-content/uploads/2010/11/html5_captcha/captcha.php?get цвета есть =) берем GD2 и собираем пикчу. Имхо ничего сложного, не вникал углубленно.

    [Ответить]

    Kaimi:

    А если массив каждый раз выдается после обработки js-обфускатором?

    [Ответить]

    b3gt:

    имхо массив с числами не обфусцируеш сильно

    [Ответить]


  7. Kote :

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

    [Ответить]


  8. Станислас :

    Встречайте нового читателя, отличный блог, в закладки. Капчу стянул, спасибо

    [Ответить]

    Kaimi:

    Thank you all for support and putting us one step closer to world domination! (c)

    [Ответить]

  9. Не вырисовываются буквы на рисунке, в чем может быть причина?

    [Ответить]

    Kaimi:

    Трудно сказать, посмотри отладочную консоль браузера

    [Ответить]

    Андрей:

    из 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/
    тут кнопка "Добавить контрагент". в конце формы каптча стоит...

    [Ответить]

    Kaimi:

    Ошибка установки соединения с базой данных

  10. Сейчас все восстановилось, посмотрите пжл

    [Ответить]

    Kaimi:

    Проблема со стороны 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); и посмотреть, что будет отображаться

    [Ответить]

    Андрей:

    Текст генерируется, но на картинке не рисуется, все что посоветовали сделал

    [Ответить]

    Kaimi:

    Т.е. php-скрипт выдает корректную картинку?

    Андрей:

    Корректную, но текст на ней не видно, специально добавил $black = imagecolorallocate($im, 0, 0, 0); в цикл прорисовки букв

    Kaimi:

    Если нет текста, значит проблема со шрифтом


  11. Arthur :

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

    [Ответить]


Оставьте ваш комментарий