Сегодня, друзья, мы напишем капчу на Flash. Статья посвящается обладателем сайта на хостинге без поддержки php и просто всем "интересующимся" 
1 Немного теории
CAPTCHA — это аббревиатура от английских слов "Completely Automatic Public Turing Test to Tell Computers and Humans Apart" — полностью автоматический тест Тьюринга для различения компьютеров и людей. Иными словами, это задача, которую легко решает человек, но которую невозможно (или крайне трудно) научить решать компьютер.
Применяются CAPTCHA для того, чтобы предотвратить множественные автоматические регистрации и отправления сообщений программами-роботами. Т. е. задача CAPTCHA — защита от спама, флуда и захвата аккаунтов.
2 Пишем план
Способ проверки: простое арифметическое действие (+-) из чисел не больше 90.
Способ отправить браузеру подтверждение проверки: вызовем js из флеш по событию заполнения поля ответа.
Чтобы немного запутать пользователя слегка понакланяем цифры, сделаем их разных цветов, поменяем фон.
И сделаем какую-нибудь обратную связь (всем нравится повторно заполнять форму?).
3 Приступим-с
Создаем новый документ (320*130).
Делаем динамическое поле, убираем у него возможность выделения, внедряем какой-нибудь экзотический шрифт (0123456789+-), называем tf - это будет заготовка для тестирующих цифр.
Для того, чтобы не использовать хитрые формулы, конвертируем наш tf в мувиклип и делаем ему несколько ключевых кадров с текстом разного цвета (можно поэкспериментировать со щрифтами и размерами), пишем в первом кадре stop(). Всего я сделал 5 кадров.
Все. Заготовку мы реализовали... Размножим ее ручками :
Называем клипы mc_1,mc_2 ... mc_5.
Делаем статическое текстовое поле для вывода классической фразы "введите результат цифрами", оборачиваем его в мувиклип называем его mes,
делаем второй кадр, меняем текст на "число введено верно" (он появится, как только мы введем правильный ответ).
Делаем поле ввода текста, называем его tf_otvet.
Фон. Рисуем квадрат 500*500, заштриховываем его теми цветами, которыми красили наши циферки (совет6 сильно не увлекатся).
конвертируем в клип и называем его bg.
4 Код
Подключаем класс для взаимодействия с javaScript.
import flash.external.*;Обьявляем переменные
var one_num = null;
var tho_num = null;
var znak = null;// если 1, то выполняем сложение,если он равен 2, то вычитание.
var otvet = null;Пишем функцию, которая будет нам генерировать случайное значение в заданном диапазоне
function generate(min,max){
return Math.ceil(Math.random()*(max) + min);
}Пишем функцию, которая будет нам генерировать числа для проверки
function generateNum(){
one_num = generate(0,90);
tho_num = generate(0,90);
if(znak == 2){// чтобы в ответе не получилось отрицательное число
if(one_num < tho_num)
generateNum();// это рекурсия, генерируем другую пару, пока значения не будут нас устраивать
}
if(znak == 1)// считаем ответ
otvet = one_num + tho_num;
else
otvet = one_num - tho_num;
}Пишем функцию, которая будет менять цвет и наклон чисел
function getColorAndRotation(){
for(i=1;i<6;i++){
_root['mc_'+i].gotoAndStop(generate(0,5));
_root['mc_'+i]._rotation = generate(-20,20);
}
}Пишем функцию, которая будет менять позицию фона
function getBg(){
bg._y = -(generate(0,340));// цифры взяты несколько с потолка, впрочем пойдет
bg._x = -(generate(0,190));
}Пишем функцию, которая будет рисовать цифры
function setValues(){
one_num = one_num.toString();
tho_num = tho_num.toString();
mc_1.tf.text = one_num.substr(0,1);
mc_2.tf.text = one_num.substr(1,1);
mc_4.tf.text = tho_num.substr(0,1);
mc_5.tf.text = tho_num.substr(1,1);
if(znak == 2)
mc_3.tf.text = '-';
else
mc_3.tf.text = '+';
}Пишем функцию, которая будет выполнять роль "обертки"
function interfase(){
znak = generate(0,2);
generateNum();
getColorAndRotation();
getBg();
setValues();
}Ловим событие ввода значения
tf_otvet.onChanged = function(){
if(otvet == tf_otvet.text) {
// отправляем сообщение js скрипту о том что проверка закончена
String(ExternalInterface.call("checkForm",true));
mes.gotoAndStop(2);
}
}Стартуем!!
interfase();Все на данный момент работает, но чего-то не хватает для полного счастья.
Ага! А сделаем-ка возможность обновить изображение.
Делаем кнопочку, называем ее re.
re.onPress = function(){
interfase();// задаем новые значения
mes.gotoAndStop(1);// убираем сообщение о правильномм вводе
tf_otvet.text = '';// очищаем поле ввода
}Весь код:
import flash.external.*;//взаимодействие с js
var one_num = null;
var tho_num = null;
var znak = null;
var otvet = null;
function generate(min,max){
return Math.ceil(Math.random()*(max) + min);
}
function generateNum():Void{
one_num = generate(0,90);
tho_num = generate(0,90);
if(znak == 2){
if(one_num < tho_num)
generateNum();
}
if(znak == 1)
otvet = one_num + tho_num;
else
otvet = one_num - tho_num;
}
function getColorAndRotation(){
for(i=1;i<6;i++){
_root['mc_'+i].gotoAndStop(generate(0,5));
_root['mc_'+i]._rotation = generate(-20,20);
}
}
function getBg(){
bg._y = -(generate(0,340));
bg._x = -(generate(0,190));
}
function setValues(){
one_num = one_num.toString();
tho_num = tho_num.toString();
mc_1.tf.text = one_num.substr(0,1);
mc_2.tf.text = one_num.substr(1,1);
mc_4.tf.text = tho_num.substr(0,1);
mc_5.tf.text = tho_num.substr(1,1);
if(znak == 2)
mc_3.tf.text = '-';
else
mc_3.tf.text = '+';
}
function interfase(){
znak = generate(0,2);
generateNum();
getColorAndRotation();
getBg();
setValues();
}
tf_otvet.onChanged = function(){
if(otvet == tf_otvet.text) {
String(ExternalInterface.call("checkForm",true));
mes.gotoAndStop(2);
}
}
re.onPress = function(){
interfase();
mes.gotoAndStop(1);
tf_otvet.text = '';
}
// start
interfase();Статья взята отсюда и немного доработана автором блога.
Продолжение следует..
Энергия и рекорды на блогах
- Первоклассные результаты по ледолазанию демонстрирует сборная России 2009 в Швейцарии - об этом блог активной дамы.
- На блоге о зимнем спорте зимние игры детей и взрослых - забавные результаты.
- Некоторые секреты танца от авторитетной студии танцев Холимикс.
- Активно работает автор блога о музыкальных битах - снова новый батл на страничках блога.
Это всё клево, конечно, только вот эта «капча» не спасёт от ботов совершенно.
Кроме того, здесь напрочь отсутствует, собственно, взаимодействие с сервером и передача кода капчи от сервера клиенту. Это всё равно, что строить боинг 777 при помощи скотча и супеклея.
А почему это должно быть интересно тем, у кого нет пхп? Да и не пхп единым живут люди
.
Статья посвящается обладателем сайта на хостинге без поддержки php и просто всем “интересующимся”, ага
Но первым это будет “практически” полезнее.
Смысл CAPTCHA не в показе текста всевозможными способами, а в показе ключа, который требуется для отправки формы, причём таким образом, чтобы распознать ключ мог только человек. На сервере в это время хранится сессия со сгенерированным ключом и выводится картинка. Если ключи после отправки формы совпадают, то сообщение добавляется.
У вас же просто пример, как можно раскидать по полю несколько разноцветных цифр и всё, это вообще не CAPTCHA.
Поэтому, прежде чем рассказывать всем, как делать что-то, нужно сначала самому знать предмет.
etc, можно поставить кнопочку (во Flash), по нажатию на которую будет отправляться форма с введенными данными. Кнопка будет появляться при правильном вводе чисел. Не?
Ничего не мешает отправить запрос в скрипт в обход вашей флешки.
<<Ничего не мешает отправить запрос в скрипт в обход вашей флешки.
А если адрес скрипта знает только флеш, а? И он же и отправляет форму.
kyzi007, а вы думаете, что автор бота настолько глуп, что не сможет опеределить адрес, куда отправляется запрос?
Ну отправит бот запрос в обход флеша и что с того? Если генерить ключ по одинаковому алгоритму у флеша и пхп, на основании каких то изменяющихся данных, то без знания алгоритма у бота нет шансов))
Ой вы знаток ботов? Тогда объясните пожалуйста, как бот внутрь флешки пролезет, мне очень интересно, правда. Да и кстати как он определит именно что флешка отправляет данные? И вот с какого банана он вдруг в флешку полезет? Да и еще правильный запрос пошлет? Вот от человека который захочет ее поломать она и правда не поможет, как и впрочем наверно подавляющая часть остальных
, да только вот времени на сделать подобную поделку тратится от силы полчаса…
2Игорь:
Как вы обеспечите одинаковость ключей во флеше и в php? Путём передачи ключа от php во flash. Даже если он будет в шифрованном виде, получить алгоритм раскодировния из того же флеша проблемы не составляет.
2kyzi007, бот внутрь флеша не полезет, он даже его грузить не будет, а тупо отправит POST-запрос сразу в скрипт. Сломать всю эту систему с флеш-капчей займёт времени гораздо меньше, чем с капчей-картинкой. Картинка для того и сделана, чтобы передать ключ на экран исключительно в графическом виде.
Оговорюсь сразу – я не рачитываю на защиту от человека, который который расстарается и напишет бота специально против моей флеши или взломает ее декомпилятором.
Итак бот всесилен.
Он как бог. Видит, что флешка котороя физически стоит в начале страницы рядом с баннерами способна послать POST запрос. Может догадаться что означает 1! (например) строка передавяемая серверному скрипту состоит из (*переменная*/*значение*секретный код), расшифрует их и пошлет.
Куда? А куда – нибудь.
Потому что флеше известно имя папки, а имя файла она узнает от js скрипта на странице.
Но предположим что он и это может узнать.
И что тогда?
А тогда я сменю механизм защиты на другой и у всех будет работа
Замучаетесь менять. Я ещё раз говорю, что флеш-капча — слив по полной.
<<Замучаетесь менять.
Ой ли?
<< Я ещё раз говорю, что флеш-капча — слив по полной.
Это значит что?
Серьезные дяди способные написать хорошего бота маятся левой флешей не будут.
И вообще я ни одного конкретного примера от вас не слышала.
Это значит что?
Кроме пустого пизд*жа вам сказать нечего.
Пример чего вам нужен?
Чтобы алгоритм работал именно как тест Тьюринга, ключ на клиентскую часть должен приходить только в графическом виде, то есть картинкой. Если ключ передаётся иначе (в зашифрованном виде или в открытую) — это уже не тест Тьюринга, потому как алгоритм передачи можно раскрыть. Потенциальный писатель бота сломает вашу капчу в пять секунд, если она будет интересна ему. Это врядли, конечно, потому как никому она нафиг не нужна, но сам факт возможности простого взлома этой «капче» чести не делает.
Так яснее? Если это по-вашему пи*дёж и моё мнение для вас не авторитетно, то занимайтесь веселыми буковками и циферьками дальше, лет через пять поймете, что такое капча и как она работает. А сейчас это статья про то, как расставить в рандомном порядке буковки и циферьки и только.
2etc
Извиняюсь, а вы разве не представляете как сделать одинаковость ключей во флеше и пхп?
Даже если флешку расковыряют, в качестве ключа раз в пару часов передаём во флеш определённую строку, я посмотрю как автор бота будет расковыривать флешку каждый день ради того чтобы пропиариться на каком нить сайте))). Хочу заметить я не сторонник решения каптчи на флеше, я просто считаю что это решение имеет право быть, просто реализовать его труднее, потому то его и не используют. Зачем делать лишние движения если можно сделать проще. Но если хорошенько подумать над флешевой каптчей, то если у вас конечно не сайт с посещаемость в сотни тысяч в день то ломать такую капчу слишком геморно. Точно так же как и некоторые варианты обычной)
Да, кстати нет ограничения на число)))
пример 25+26
запала клавиша получилось 51111, флеш принял это как правильный ответ т.к. в строке содержится 51)). нужно проверять полное соответствие))
«передаём во флеш определённую строку»
Каким образом? Отдадим php-скриптом же. Ничего не мешает боту спросить у этого скрипта ключ и передать в POST-запросе. И вся ваша флеш-капча останется за бортом.
Я ещё раз повторяю, что сервер должен отдавать ключ графически, в виде сгенерированной картинки, чтобы «расшфировать» ключ, показанный на ней, мог только человек с помощью собственных глаз. Для бота анализ картинки является очень серьезной задачей.
Флеш-капча же для показа ключа должна его сначала получить от сервера. Даже если она получит его в зашифрованном виде, алгоритм расшифровки будет доступен на клиентской стороне, что автоматически означат, что защита такой капчи чуть менее чем нулевая.
И ещё, из всей этой статьи мне неясно одно, зачем капча тем, у кого нет php на сайте?
toetc, Аргументов больше не имею, убедили).
“И ещё, из всей этой статьи мне неясно одно, зачем капча тем, у кого нет php на сайте?”
Ну там ведь ещё написано тем ком интересно). А если серьёзно то ведь а хосте м.б. и перл и АСП
Денис, видимо, ребята еще не доросли до некоторых вещей. Во-первых зайдите на http://en.wikipedia.org/wiki/Captcha, плюс английский подправите.
Дело все в том, что это творение чрезвычайно просто взламывается, потому что у нас есть декомпилируемый флэш и зашифрованные данные ему передающиеся. Плюс firebug нам честно скажет что куда передается. Даже мне будет дело получаса написать программку, которая будет эту капчу обходить.
Другой вопрос надо ли оно мне. Если, например, кто-то на популярном форуме воспользуется вашей идеей и сделает такую капчу, то его заспамят буквально сразу же. На своем же сайте с небольшой посещаемостью пожалуйста — кому нужно тратить на него время?
И что за, извините, мат тут в коментах? Дети малые.
статья не о capcha, а о рисовании символов разными цветами.
Жаркий тут спор. Молодежь “пинает” “стариков”.
Уважаемый kyzi007, я бы на Вашем месте прислушался тому, что говорит прожженый _etc.
во-первых, капче не обойтись без бекенда (php, ruby, .net & etc). А все, что уходит от “клиента” на сервер, то перехватывается сниферами (корорые скриптуются к стати) и естественно при желании “разбирается” и ломается.
во-вторых, если Вам так уж хочется делать капчу с использованием Adobe Flash. То, никто Вам не мешает обмениваться с сервером картинками (как сделано в нормальных капчах). А для пущего креативу использовать протокол для обмена между флешом и сервером с возможностью передачи бинарников, которые вы сможете легко “шифровать” хоть тем же ксором.
etc прав.
Действительно, если нет php (jsp, asp и т.д.), следовательно посетитель не может оставлять сообщения, регистрироваться и вообще каким-либо образом влиять на содержимое сайта. Следовательно необходимость в капче отсутствует.
Если же какая-то серверная технология присутствует, то никто не мешает общаться со скриптом в обход флешки. Получать (вместо флешки) ключ и отправлять (вместо флешки) ответ. Разобрать флешку, чтобы достать из неё алгоритм не так сложно.
Хотя есть-таки вариант, когда флеш-капча может оказаться не хуже (а может даже и лучше) чем обычная – это в том случае если swf будет полностью генерироваться php (как сейчас генерируются гифы и джепеги). Но, опять же, генерировать нужно нетривиальным способом.
Полный бред.
Запомните раз и навсегда:
Всё что передается клиенту в ответ от сервера – открытая информация. Держать какие то алгоритмы преобразования на стороне клиента (в swf файле) – значит отдать этот алгоритм ему. И не надо надеятся на то что swf нельзя сломать.
Хм.. А зачем CAPCHA для swf форм? Ботых их читать не умеют ^_^
etc, Dan, Reijii, Valentin Vladimirovich и др.. Спасибо вам большое за комментарии, т.к. теперь я полностью представляю себе принцип работы CAPTCHA
Тормоза жуткие при вводе текста в Вашу “CAPT4U”
Простите, особо не вникал в комменты, просто пара замечаний навскидку…
Прежде всего, не надо делать визуальную муть – в случае с флэш это совершенно не требуется. Можно просто поставить яркую желтую точку в случайном месте и рядом три синих, и предложить кликнуть по желтой. Или по красной.
А второе – нужно, чтобы при отправке формы flash-объект добавлял переменную, содержащую что-то хитрое. Достаточно хитрое, чтобы спамбот не мог это имитировать, но серверный скрипт однозначно определял бы как верный результат.
Е-е-е, etc!
Как это ничего не помешает вызвать метод в флешке? Кроссдомен помешает.
Sergeyev, какой метод? Зачем его вызывать во флешке?
Что то не увидел где в скрипте рисуются линии.. исходника тоже нет, а он чаше всего полезней любых комментариев как это было сделано )))
p.s. в свои 14-16 лет слепил такю штуку
http://trinhop.tripod.com/demo/menu.html
всё на as1 в flash5
http://trinhop.tripod.com/wx