Pull to refresh

Разработка CAPTCHA своими руками

PHP *
Сегодня, благодаря господам спам-ботам и иже с ними, в сети практически невозможно что-либо сделать без ввода символов со сгенерированного изображения — CAPTCHA (далее — капча). Фактически, это предотвращает выполнение какого-либо скрипта без участия человека, и в этом топике я расскажу, как такую капчу создать средствами PHP, а так же упомяну очень полезный топик другого хабраюзера, который пригодится при разработке изображения-капчи.

Сразу же предупреждаю, что топик может быть интересен только начинающим разработчикам, так как по сути я изобретаю велосипед, но зато своими руками.

Основные правила


При разработке капчи нужно обязательно соблюдать несколько основных правил:

1. Капча создана для людей
Она должна сходу читаться, но не в ущерб стойкости к распознаванию. Очень наглядный пример капчи, не соблюдающей это правило — изображение справа.

2. Генератор капчи должен быть четко ограничен в используемых символах
Наглядный пример — изображение в начале топика. Конечно, reCAPTCHA — чудесное изобретение, но порой она предлагает ввести символы, которые и в charmap найти сложно. Кстати, когда речь идет о капче с использованием кириллических символов — ни в коем случае генератор не должен использовать букву «ё». Лично я знаю много людей, у которых на ~ (тильда / ё) повешено какое-то действие в системе.

3. Капча должна быть стойкой к распознаванию
… но не в ущерб читаемости. Вообще, этот пункт — самый сложный во всей разработке. Необходимо найти золотую середину — капча сходу читается людьми и вообще (насколько возможно) не читается ботами. Так же необходимо учитывать специфику ресурса, на котором планируется использовать капчу, и его контингента. Если речь идет о, допустим, форуме читающих домохозяек за сорок, то на стойкость капчи можно плюнуть с высокой башни — никому он не упрется. Если речь идет о, например, имейджборде, то тут нужна капча а-ля вырвиглаз.

Проектирование


В качестве теоретического объекта, для которого мы будем делать капчу, выступит сферический форум в вакууме, с умеренно агрессивными, умеренно умными и вообще умеренными пользователями. В разработке такой капчи нам поможет очень полезный топик от хабраюзера Pastafarianist. А именно я обращу внимание на перечисленные недостатки и достоинства взятых им капчей.

Итак, по порядку перечислим, что же мы можем использовать:

1. В изображении должно использоваться хотя бы несколько цветов. Желательно всегда разные


Изображение выше — пример того, как это выглядит в действии. На самом деле, это не очень надежный вариант, так как текст с фоном очень контрастирует. Разберемся с цветами позже.

2. Должен присутствовать шум


Прописная истина. Практически в любой капче можно встретить шум, который чаще всего выражается во множестве линий, пересекающих текст, разной длины и под разным углом.

3. Буквы должны находиться на небольшом расстоянии друг от друга


Тут главное не перестараться. Чрезмерное сближение символов приведет к сильному ухудшению читаемости человеком. На примере выше можно заметить, что буквы слипаются, это создает препятствие для бота при сегментации изображения.

4. Размеры символов должны быть разными


Если применять этот трюк, то надо помнить, что препятствие фактически выражается в том, что для сегментации капчи бот не сможет использовать постоянную матрицу. Поэтому если и делать размер символов разным, то обязательно для каждого символа размер должен быть случайным, динамическим.

5. Отвратительный шрифт


Очень полезный способ. Засечки, курсив, стилизация — отличные подводные камни для бота. Так же в сочетании с шумом в виде линий очень хорошо будет смотреться тонкий шрифт. Если абстрагироваться от первого правила генерации капчи, то можно использовать множество шрифтов сразу, к примеру свой шрифт для каждого символа.

6. Символы под случайным углом



Весьма действенный способ оградиться от ботов. Опять же, сегментация будет усложнена, хоть и не значительно. Лучше всего выбрать небольшой диапазон угла, иначе же читаемость сильно испортится (буквы будут наплывать друг на друга).

7. Динамические искажения



Ничего ужаснее человечество еще не придумало. Искажения в капче зачастую очень сильно снижают читаемость человеком. Разумеется, это достаточно эффективно против ботов, но это так же эффективно и против людей. Главное — не перестараться, искажения должны быть незначительными.

Итак, что же мы сделаем:
— Контрастный фон, с шумом
— Линии за текстом, линии на тексте
— Текст в случайном положении
— Количество символов будет случайным, от 4 до 7
— Размер каждого символа будет случайным
— Цвет текста каждый раз будет случайным
— Символы будут слегка прикасаться
— Каждый символ будет под случайным небольшим углом

Разработка


Определимся с целью:
— Генерация шума
— Генерация текста
— Форма с возможностью обновления капчи
— Обработчик введенных данных
По мере написания статьи понял, что искажения в данном случае абсолютно неуместны. Для тех, кому они все же нужны — в конце топика ссылка на урок по созданию искажений.

Пишем форму

<form action="go.php" method="post" enctype="multipart/form-data">
<!-- Форма будет отправлять введенные пользователем данные скрипту go.php методом POST -->
<img src='captcha.php' id='capcha-image'>
<!-- Сама капча -->
<a href="javascript:void(0);" onclick="document.getElementById('capcha-image').src='captcha.php?rid=' + Math.random();">Обновить капчу</a>
<!-- Ссылка на обновление капчи. Запрашиваем у captcha.php случайное изображение.  -->
<span>Введите капчу:</span>
<input type="text" name="code">
<input type="submit" name="go" value="Продолжить">
<!-- Отправляем данные скрипту-обработчику go.php -->
</form>

Тут все предельно ясно, но на всякий случай я откомментировал некоторые строчки. Кстати, обратите внимание, я не установил параметр maxlenght у поля ввода. В большинстве случаев, разработчики устанавливают этот параметр, указывая размер капчи. Во-первых это нехилая такая подсказка для бота, во-вторых у нас количество символов будет динамическим. Все, интерфейс мы написали, пора приступать к созданию скрипта генерации

Пишем генератор кода капчи (random.php)

<?php

// Функция генерации капчи
	function generate_code() 
	{    
		  $chars = 'abdefhknrstyz23456789'; // Задаем символы, используемые в капче. Разделитель использовать не надо.
		  $length = rand(4, 7); // Задаем длину капчи, в нашем случае - от 4 до 7
		  $numChars = strlen($chars); // Узнаем, сколько у нас задано символов
		  $str = '';
		  for ($i = 0; $i < $length; $i++) {
			$str .= substr($chars, rand(1, $numChars) - 1, 1);
		  } // Генерируем код

		// Перемешиваем, на всякий случай
			$array_mix = preg_split('//', $str, -1, PREG_SPLIT_NO_EMPTY);
			srand ((float)microtime()*1000000);
			shuffle ($array_mix);
		// Возвращаем полученный код
		return implode("", $array_mix);
	}
?>

Тут все ограничивается только вашим воображением. Как-то я видел иной способ — выбиралась текущая минута, час, месяц, все это перемножалось, из этого выбирались 10 случайных символов, дважды извлекался MD5-хеш, из него извлекались 6 случайных символов и затем все это еще и перемешивалось. Кстати, обратите внимание на выбранные мною символы — я исключил такие как i, l, 1 и 0, o, c, из-за того, что они слишком похожи друг на друга, в некоторых ситуациях пользователь может ошибиться. Генератор я назвал random.php (далее он будет запрашиваться в других скриптах).

Пишем генератор изображения (captcha.php)

<?php
// Устанавливаем переменную img_dir, которая примет значение пути к папке со шрифтами и (если потребуется) изображениями
define ( 'DOCUMENT_ROOT', dirname ( __FILE__ ) );
define("img_dir", DOCUMENT_ROOT."/captcha/img/"); // Если скрипт отказывается работать, то скорее всего ваш сервер не поддерживает $HTTP_SERVER_VARS. В таком случае, закомментируйте эту строчку и раскомментируйте следующую.
// define("img_dir", "/captcha/img/");

// Подключаем генератор текста
include("random.php");
$captcha = generate_code();

// Используем сессию (если нужно - раскомментируйте строчки тут и в go.php)
// session_start();
// $_SESSION['captcha']=$captcha;
// session_destroy();

// Вносим в куки хэш капчи. Куки будет жить 120 секунд.
$cookie = md5($captcha);
$cookietime = time()+120; // Можно указать любое другое время
setcookie("captcha", $cookie, $cookietime);
		
// Пишем функцию генерации изображения
function img_code($code) // $code - код нашей капчи, который мы укажем при вызове функции
{
	// Отправляем браузеру Header'ы
		header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");                   
		header("Last-Modified: " . gmdate("D, d M Y H:i:s", 10000) . " GMT");
		header("Cache-Control: no-store, no-cache, must-revalidate");         
		header("Cache-Control: post-check=0, pre-check=0", false);           
		header("Pragma: no-cache");                                           
		header("Content-Type:image/png");
	// Количество линий. Обратите внимание, что они накладываться будут дважды (за текстом и на текст). Поставим рандомное значение, от 3 до 7.
		$linenum = rand(3, 7); 
	// Задаем фоны для капчи. Можете нарисовать свой и загрузить его в папку /img. Рекомендуемый размер - 150х70. Фонов может быть сколько угодно
		$img_arr = array(
						 "1.png"
		);
	// Шрифты для капчи. Задавать можно сколько угодно, они будут выбираться случайно
		$font_arr = array();
			$font_arr[0]["fname"] = "DroidSans.ttf";	// Имя шрифта. Я выбрал Droid Sans, он тонкий, плохо выделяется среди линий.
			$font_arr[0]["size"] = rand(20, 30);				// Размер в pt
	// Генерируем "подстилку" для капчи со случайным фоном
		$n = rand(0,sizeof($font_arr)-1);
		$img_fn = $img_arr[rand(0, sizeof($img_arr)-1)];
		$im = imagecreatefrompng (img_dir . $img_fn); 
	// Рисуем линии на подстилке
		for ($i=0; $i<$linenum; $i++)
		{
			$color = imagecolorallocate($im, rand(0, 150), rand(0, 100), rand(0, 150)); // Случайный цвет c изображения
			imageline($im, rand(0, 20), rand(1, 50), rand(150, 180), rand(1, 50), $color);
		}
		$color = imagecolorallocate($im, rand(0, 200), 0, rand(0, 200)); // Опять случайный цвет. Уже для текста.

	// Накладываем текст капчи				
		$x = rand(0, 35);
		for($i = 0; $i < strlen($code); $i++) {
			$x+=15;
			$letter=substr($code, $i, 1);
			imagettftext ($im, $font_arr[$n]["size"], rand(2, 4), $x, rand(50, 55), $color, img_dir.$font_arr[$n]["fname"], $letter);
		}

	// Опять линии, уже сверху текста
		for ($i=0; $i<$linenum; $i++)
		{
			$color = imagecolorallocate($im, rand(0, 255), rand(0, 200), rand(0, 255));
			imageline($im, rand(0, 20), rand(1, 50), rand(150, 180), rand(1, 50), $color);
		}
	// Возвращаем получившееся изображение
		ImagePNG ($im);
		ImageDestroy ($im);
}
img_code($captcha) // Выводим изображение
?>

Весь код максимально закомментирован. Для проверки введенной капчи обработчиков вносим ее хэш в куки. Для выбора шрифта и фона я сделал массивы, что бы можно было засунуть туда десяток шрифтов и десяток фонов, каждый раз выбираться будут случайные. Шрифт выбрал Droid Sans, он тонкий и среди шума плохо заметен. Кстати, в данном случае я выбрал ужасный, отвратительный и контрастный фон, демонстрация будет в конце топика. К моему удивлению, на читаемость человеком это не повлияло, шрифт достаточно хорошо выделяется, не смотря на то, что цвет шрифта выбирается из случайного пикселя на фоне.

Пишем обработчик (go.php)

<META http-equiv=content-type content="text/html; charset=UTF-8">
<?php
include("random.php");

$cap = $_COOKIE["captcha"]; // берем из куки значение MD5 хэша, занесенного туда в captcha.php

// Пишем функцию проверки введенного кода
function check_code($code, $cookie) 
{

// АЛГОРИТМ ПРОВЕРКИ	
	$code = trim($code); // На всякий случай убираем пробелы
	$code = md5($code);
// НЕ ЗАБУДЬТЕ ЕГО ИЗМЕНИТЬ!

// Работа с сессией, если нужно - раскомментируйте тут и в captcha.php, удалите строчки, где используются куки
//session_start();
//$cap = $_SESSION['captcha'];
//$cap = md5($cap);
//session_destroy();

	if ($code == $cap){return TRUE;}else{return FALSE;} // если все хорошо - возвращаем TRUE (если нет - false)
	
}

// Обрабатываем полученный код
	if (isset($_POST['go'])) // Немного бессмысленная, но все же защита: проверяем, как обращаются к обработчику.
	{
		// Если код не введен (в POST-запросе поле 'code' пустое)...
			if ($_POST['code'] == '')
			{
				exit("Ошибка: введите капчу!"); //...то возвращаем ошибку
			}
		// Если код введен правильно (функция вернула TRUE), то...
			if (check_code($_POST['code'], $cookie))
			{
				echo "Ты правильно ввел капчу. Возьми с полки тортик, он твой."; // Поздравляем с этим пользователя
			}
		// Если код введен неверно...
			else 
			{
				exit("Ошибка: капча введена неверно!"); //...то возвращаем ошибку
			}
		}
	// Если к нам обращаются напрямую, то дело дрянь...
	else 
	{
		exit("Access denied"); //..., возвращаем ошибку
	}
	
?>

Тут все предельно ясно. Берем куки, записанную ранее в captcha.php, берем введенный код, точнее его хэш и сравниваем. Внимание! Если планируете пользоваться этим кодом, не забудьте изменить алгоритм проверки.

Результат



Результат получился весьма неплохим, полностью оправдав мои ожидания (прошу, пожалуйста, заметить, что я не ставил себе цель сделать непробиваемую капчу). Протестировать на стойкость его можно вот тут (надеюсь, мой сервак не упадет под хабраэффектом).
На самом деле, мой код — это лишь шаблон, над которым вы можете издеваться как угодно. А еще на самом деле это не нужно — есть reCaptcha, но лично мне доставило удовольствие делать этот скрипт, пока делал прочитал гору документации, надеюсь, что кто-нибудь подчерпнет знания из моего топика :)

Footer


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

Не кидайтесь помидорами, пожалуйста :) Это мой первый технический топик на хабре.
И да, я не имею понятия, каким образом работают современные капчи, я просто и не искал никакой информации на эту тему. Если мои методы кажутся вам индийскими — прошу немедленно написать об этом в ЛС / комментарии, я с удовольствием почитаю :) Из недостатков моего метода я вижу только то, что если в браузере не включены куки, то через эту капчу не пройти.
Tags:
Hubs:
Total votes 116: ↑83 and ↓33 +50
Views 103K
Comments Comments 98