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

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

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

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

Новые идеи про капчи

Несколько дней назад я привел пример реализации капчи-калькулятора, которую нельзя разгадать с помощью сервисов. Не так давно ко мне пришла еще одна идея - капча, вводимая мышью. Требуется четыре цифры расположить перетаскиванием в порядке возрастания. Из плюсов - быстрый ввод, не требуется несколько раз загружать картинку. Из минусов - обязательно включенный JavaScript в браузере.

Вот пример:

Файл drag.js - несколько модифицированная небольшая библиотека JS, реализующая drag'n'drop, найденная тут: javascript.ru/ui/draganddrop

Скачать исходный код: ZIP.