Фон Однажды я попытался зарегистрироваться на форуме разработчиков.
Пробовал долго, использовал почти весь свой запас ругательств в адрес админа, который переборщил с настройками капчи.
Я зарегистрировался всего одиннадцатый раз и потратил много полезного времени на борьбу с чьей-то паранойей.
После этого случая мне вдруг захотелось придумать какую-то антибот-систему, которая бы не вызывала приступов агрессии при ее решении, но вызывала бы приступы агрессии у тех людей, которые будут писать систему взлома.
Исследуйте проблему
Для начала вернемся (еще раз) к вопросу с капчей.Сложность капчи достигается за счет добавления шума и искажений.
Но это палка о двух концах, ведь чем больше шума и искажений вы добавите, тем сложнее человеку угадать символы.
Если вы ошиблись при вводе, начните все сначала.
Зачастую я просто вынужден несколько раз обновить изображение, чтобы как-то упростить задачу ее решения.
Если подходить к решению проблемы только в рамках текущей реализации, то кроме очередного клона ничего сделать нельзя.
И у этого клона будут все наследственные проблемы «родителей».
Одно из моих правил звучит примерно так: «Если нельзя решить проблему простым способом, то нужно изменить условие задачи так, чтобы ее можно было решить простым способом».
Зачем нужна капча? Отфильтровать автоматическую отправку данных на сервер.
Как пользователь это делает? Использование формы.
Что делать, если форма была сделана с той же капчей? Форма представляет собой набор именованных полей.
Если просто заменить имена полей на абракадабру, то это ничего не даст, так как можно легко вычислить положение элемента в дереве узлов, сделать маппинг полей и отправить данные на сервер по маппингу .
Проблему это не решает, но мы развиваем идею дальше.
Пусть поля приходят в случайном порядке с закодированными именами.
Перед заполнением формы пользователь сначала восстановит правильный порядок полей, а только потом заполнит форму и отправит ее.
Задача этой капчи состоит в том, чтобы получить правильный порядок полей.
Как узнать, что заказ правильный? Вы можете пометить названия полей и сами поля ввода изображениями, цветами, цифрами, чем угодно, а затем поставить задачу собрать пазл по какому-то алгоритму.
Алгоритм
Сначала мы создаем массив обычных имен полей в стандартном порядке.Для описания я буду использовать абстрактный язык.
formData = [ { name: "first_name" }, { name: "last_name" }, { name: "nick" } ]
Добавляем в структуру хэши, созданные на основе имени, плюс индекс, который пригодится в дальнейшем.
formData = [
{
name: "first_name",
hash: "0947fh27",
index: 0
},
{
name: "last_name",
hash: "82jj2n4lE2",
index: 1
},
{
name: "nick",
hash: "jf12sjfjI9",
index: 2
}
]
Теперь мы создаем три обманчивых массива с неверными позициями.
Я упрощу это до индексов.
fake = [ [ 2, 1, 0 ], [ 2, 0, 1 ], [ 1, 0, 2 ] ]
И добавьте обычный массив с правильными позициями посередине.
Важно, чтобы это не было первым приоритетом, чтобы человек понимал, что ему нужно что-то сделать перед отправкой.
И ложных срабатываний можно уменьшить.
fake = [ [ 2, 1, 0 ], [ 2, 0, 1 ], [ 0, 1, 2 ], [ 1, 0, 2 ] ]
Это все хорошо, но как теперь составить пазл? Для демонстрации я выбрал простую головоломку с геометрическими фигурами разных цветов.
Вам нужно собрать их половинки.
Я добавил к нормальным данным половину некоторой случайной цифры и расположил пары в первом ложном массиве по индексам.
formData = [
{
name: "first_name",
hash: "0947fh27",
index: 0,
picture: "red_circle_left"
},
{
name: "last_name",
hash: "82jj2n4lE2",
index: 1,
picture: "yellow_triangle_left"
},
{
name: "nick",
hash: "jf12sjfjI9",
index: 2,
picture: "green_circle_left"
}
]
fake [0] = [
{
hash: "jf12sjfjI9",
index: 2,
picture: "green_circle_right"
}
{
hash: "82jj2n4lE2",
index: 1,
picture: "yellow_triangle_right"
},
{
hash: "0947fh27",
index: 0,
picture: "red_circle_right"
}
]
Мы сохраняем эти структуры в сеанс и начинаем генерировать HTML-часть.
Для отрисовки графики я использовал css-классы, которые указал в качестве фона со ссылками на картинки по индексу, а не по хешу, чтобы хакеру не было подсказки об истинном порядке.
Получилось примерно так: .
lp0 { background: url( /img/get/Эtype=l&pos=0) .
} .
lp1 { background: url( /img/get/Эtype=l&pos=1) .
} .
lp2 { background: url( /img/get/Эtype=l&pos=2) .
} .
rp0 { background: url( /img/get/Эtype=r&pos=0) .
} .
rp1 { background: url( /img/get/Эtype=r&pos=1) .
} .
rp2 { background: url( /img/get/Эtype=r&pos=2) .
}
Скрипт считывает данные из сессии и выдаёт названия картинок для текстового описания полей (type=l) из обычного массива, а самих полей (type=r) из ложного массива.
Левую часть рисуем с текстовым описанием полей в обычном порядке, а сами поля в фейковом массиве, при этом классы узлов размещаем в обычном порядке как для левой, так и для правой части.
Имена полей будут взяты из хеша.
Вот и все, дальше в дело вступает JS. В качестве примера я использовал StateController, который отлично справлялся с циклическим переключением полей и последующим сбором данных.
После того как пользователь «собрал» форму, он может ее заполнить.
Но нам нужно убедиться, что поля идут в правильном порядке.
Json идеально подходит для этого.
Собираем данные в нужную нам структуру, сохраняя положение каждого поля, и отправляем на сервер AJAX-запросом.
Сервер получает данные в одном единственном json-поле, забирает из сессии свои «старые» записи о правильной структуре данных и начинает сравнивать два массива по хешам.
Если все хорошо, то значения и имена элементов сопоставляются, а затем эта информация отправляется на обработку последующим функциям.
Если все плохо, то мы уведомляем пользователя о неподобающем поведении, а если есть желание защититься от вариантов перебора, применяем административные меры по увеличению задержки между получением информации с заданного IP и тому подобное.
Вуаля! Посмотреть демо-версию функционала
Проблемы
Где бы мы были без них? Перечислю самые важные:- Сложность реализации немного выше, чем при обычной капче.
Интеграция будет сложной для новичков.
- Данные не могут быть отправлены с помощью обычных запросов POST или GET, только JSON, чтобы гарантировать положение данных.
- Я не представляю, как отправлять данные обычным способом, причем не с помощью AJAX.
- Автозаполнение не будет работать, поскольку имена полей зашифрованы.
- Минимальное количество элементов формы — три.
Тогда придется выкручиваться введением пустых полей-манок
Методы улучшения защиты
Придумывать их можно долго, и основное направление, как мне видится, в создании разнообразных головоломок.Вы можете попробовать разные загадки, разные фигуры, разные принципы комбинирования.
Чтобы не быстро разбирать текст загадки, можно текст вопроса оформить в виде картинки.
Но это уже другая история… Теги: #интерфейсы #json #алгоритм #CAPTCHA #Ajax #форма регистрации #StateController
-
Хакерство В Киберпространстве
19 Oct, 24 -
Регистрация Рэс Через Портал Госуслуг
19 Oct, 24 -
Текст Личного Сообщения В Электронном Письме
19 Oct, 24 -
Drawball - Интернет-Граффити
19 Oct, 24 -
Auto Layout С Переменным Набором Элементов
19 Oct, 24
