NjabuloJahra Jun 29 2011 at 19:51

HTML Captcha без использования изображений

24 min

1.6K

Lumber room

From sandbox

HTML Captcha на основе таблиц

Основана данная проверка на обычных HTML таблицах. Принцип заключается в следующем:

1. Задается список цветов для букв — ячеек таблицы
2. Задается список цветов для фона — ячеек таблицы

Пропарсить такую таблицу довольно сложно, так как изменить цвета текста и ячеек можно в любое время, или изменить количество выводимых символов.
Данные, вводимые пользователем передаются через переменные сессии, а не как это реализованно во многих других Captcha через невидимое поле элемента «INPUT»

Предварительно создаем в базе данных таблицу

Каждая цифра разделенная точкой с запятой это координата закрашиваемого квадрата(ячейки таблицы) фоном букв.

Класс для получения кода

<?php
class class_get_robot_code
{
	var $amount_letter;//количество символов
	var $general_keycode;
	
	function view_letter($code,$letter_size,$td_size,$sdvig)
	{
		$arr_bgcolor_letter = array("#07078F","#01354F","#000000","#013E7A","#0C0C42","#013737","#1E0636","#1C1C34","#353546");
		$arr_bgcolor = array("#D3D3FF","#BBBBBB","#D5DEEF","#BAC2D3","#80C5E7","#B9AEAE","#C9ECEC","#9DBAD7","#EFD5E8","#E1E7CB");
		$arr_yx = explode(";",$code);
		$arr_y = array();
		$arr_x = array();
		$size_of_arr_xy = sizeof($arr_yx);
		for($n=0;$n<$size_of_arr_xy;$n++)
		{
			$arr_y[$n]=substr($arr_yx[$n],0,1); 	
			$arr_x[$n]=substr($arr_yx[$n],1,1)+$sdvig;			
		}
		?>
		<table border="0" cellpadding="0" cellspacing="0">
		<?php
		for($i=1;$i<=5*$letter_size;$i++)
		{
			?>
			<tr>
			<td></td>			
			<?php
			for($j=1;$j<=5*$letter_size;$j++)
			{
				$n_color = rand(0,sizeof($arr_bgcolor)-1);
				$bgcolor = $arr_bgcolor[$n_color];
				for($n=0;$n<$size_of_arr_xy;$n++)
				{
					if(($i==$arr_y[$n]) && ($j==$arr_x[$n]))
					{
						$n_color = rand(0,sizeof($arr_bgcolor_letter)-1);
						$bgcolor = $arr_bgcolor_letter[$n_color];	
					}	
				}				
				?>
				<td bgcolor="<?php echo $bgcolor;?>" width="3" height="3"></td>
				<?php	
			}
			?>
			<td></td>
			</tr>
			<?php
		}
		?>
		</table>
		<?php		
	}
	
	function get_get_robot_code()
	{
			$general_keycode="";
//Это мы конектимся в базу и получаем символы и коды
//Функции для коннекта в базу данных лежат в отдельном файле
			$db = new db_mysql();
			$db->trashdb_sql(); $db->connect();

			$query_string="select symbol,code from antirobot";			
			$result=$db->query($query_string); 

//в результате у нас есть результат с необходимыми кодами
						
			$amount_rec = $db->num_rows($result);
			$arr_symbols=array();
			if($amount_rec>0)
			{
				for($j=1;$j<=$amount_rec;$j++)
				{
					$main_arr = $db->fetch_array($result); 
					$arr_symbols[$j-1]= array($main_arr["symbol"],$main_arr["code"]);	
				}
			}
			
			$size_of_main_arr = sizeof($arr_symbols);
			
		?>
		<table border="0" cellpadding="0" cellspacing="0">
		<tr>
		<?php
			for($j=1;$j<=$this->amount_letter;$j++)
			{
				?>
				<td>
				<?php
				$random_letter = rand(0,$size_of_main_arr-1);
				$arr_letter = $arr_symbols[$random_letter];
				$this->general_keycode.=$arr_letter[0];
				$letter_size = rand(1,1);
				$td_size = rand(3,3);
				$sdvig=0;
				$this->view_letter($arr_letter[1],$letter_size,$td_size,$sdvig);				
				?>
				</td>
				<?php				 	
			}			
		?>		
		</tr>
		</table>
		<?php													
	}
}
?>

Для Вызова используем код:

session_start();
//Указываем сколько символов будет выводится в captcha	 
	$class_get_robot_code->amount_letter=6;
		$class_get_robot_code->get_get_robot_code();
		$_SESSION['answer_key'] = $class_get_robot_code->general_keycode;
session_commit();

Этот код можно вызывать через ajax.

Использовал данную конструкцию на сайте
www.trashjob.ru

Так же есть адаптированный вариант для использования в wordpress. Для этого создал 3 файла:

comments.php — файл для защиты от спама при комментариях
html-captcha.php — файл формы настройки captcha
html-captcha.classes.php — файл класса captcha

comments.php

<code>
            <?php
                /****** HTML Captcha Spam Protection Plugin ******/
                if (function_exists('hc_spam_protection')) {
                $hc_opt = get_option('plugin_htmlcaptcha');
                ?> <p>
                <table>
                <tr><td>
                <input type="text" aria-required="true" tabindex="6" size="22" value="ANTISPAN (Required)" name="<?php echo $hc_opt['hc_opt_fieldname_useranswer'];?>" id="<?php echo $hc_opt['hc_opt_fieldname_useranswer'];?>" 
                onfocus="if(this.value=='ANTISPAN (Required)') this.value='';" onblur="if(this.value=='') this.value='ANTISPAN (Required)';" style="background:none repeat scroll 0 0 #F3FBFF; border:1px solid #CEE0E4; font-family:Helvetica,Arial,sans-serif; font-size:13px; padding:7px 5px;"/>
                </td>
                <td style="padding-bottom: 5px;">
                <small>Введите символы с картинки учитывая регистр. (Защита от спама)</small>
                <? hc_spam_protection();?>
                </td></tr>
                </table>
                
                </p>
            <?php } // if function_exists... ?>

html-captcha.php

<?php
/*
Plugin Name: html Captcha
Plugin URI: http://www.fishbeer.ru/htmlCaptcha
Description: Captcha html.
Version: 1.0
Author: Njabulo Jahra
Author URI: http://www.trashjob.ru

$hc_info['install_dir'] = ABSPATH . 'wp-content/plugins';
if ( basename(dirname(__FILE__)) != 'plugins' ) $hc_info['install_dir'] .= '/' . basename(dirname(__FILE__));


# Include the class and create object
if ( !class_exists('htmlCaptcha') )
	include_once($hc_info['install_dir'] . '/html-captcha.classes.php');
$hc_Obj = new htmlCaptcha;

# Get settings
$hc_opt = get_option('plugin_htmlcaptcha'); 


function hc_spam_protection() {

	global $hc_Obj,$hc_opt, $user_ID;
	// Set class options
    if(isset($user_ID))
    { 
	   //echo $user_ID;
       $hc_Obj->amount_letter = $hc_opt['hc_opt_amount_letter_register'];
    }
    else
    {
        $hc_Obj->amount_letter = $hc_opt['hc_opt_amount_letter'];    
    }
    
    $hc_Obj->letter_color = $hc_opt['hc_opt_color_letter'];
    $hc_Obj->bg_letter_color = $hc_opt['hc_opt_bgcolor_letter'];
    //echo $hc_opt['hc_opt_amount_letter'];
    $hc_Obj->get_get_robot_code();
    
    
    //$_POST['answer_key']=$hc_Obj->general_keycode;
    $_SESSION['answer_key']=$hc_Obj->general_keycode;
    //echo $hc_Obj->dump_array($_SESSION);
    //echo $hc_opt['hc_opt_msg_no_answer'];
	return true;

}

/*******************************************************************************
 * Input validation. 
 ******************************************************************************/
function hc_check_input($comment_data) {

	global $user_ID, $hc_opt;

    
    if ( ( $comment_data['comment_type'] == '' ) ) { // Do not check if the user is registered & do not check trackbacks/pingbacks
					
		// Get value user has entered
		$value_entered = $_POST[$hc_opt['hc_opt_fieldname_useranswer'] ];
        //session_start();
        if(isset($_SESSION['answer_key']))
        {

            if ($value_entered==$_SESSION['answer_key'])
            {
            $result='';    
            }   
            else
            {
            $result = 'Wrong answer';
            unset($_SESSION['answer_key']);    
            } 
        }
        else
        {
        $result = 'No answer';   
        }
		//echo "result".$result;
        
        // Get input validation result
		//$result = $hc_Obj->InputValidation($actual_result, $value_entered);
    
		// DIE if there was an error. Apply filter for security reasons (strip JS code, etc.)
        //echo $hc_opt['hc_opt_msg_no_answer'];
		switch ($result) {
			case 'No answer': 
				hc_aux_die( apply_filters('pre_comment_content', stripslashes($hc_opt['hc_opt_msg_no_answer'])) );
				break;
			case 'Wrong answer': 
				hc_aux_die( apply_filters('pre_comment_content', stripslashes($hc_opt['hc_opt_msg_wrong_answer'])) );
				break;
		}

	}
	return $comment_data;
}



/*******************************************************************************
 * Apply plugin
 ******************************************************************************/
add_filter('preprocess_comment', 'hc_check_input', 0);


$hc_db_version = "1.0";
$page_title = "Настройки HTML Captcha";

function hc_deinstall () {
   global $wpdb;
   $table_name = $wpdb->prefix . "antibot_codes";      
   $sql = "DROP TABLE " . $table_name;
   $results = $wpdb->query( $sql );
}

function hc_install () {
   global $wpdb;
   global $hc_db_version;


   $table_name = $wpdb->prefix . "antibot_codes";
   if($wpdb->get_var("show tables like '$table_name'") != $table_name) {
      
      $sql = "CREATE TABLE " . $table_name . " (
	  id int(2) NOT NULL AUTO_INCREMENT,
      symbol char(1) NOT NULL DEFAULT '',
      code char(50) NOT NULL DEFAULT '',
	  PRIMARY KEY (`id`)    
	) DEFAULT CHARSET=utf8 AUTO_INCREMENT=22;";

      require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
      dbDelta($sql);

      $insert = "      
        INSERT INTO " . $table_name ." (`id`, `symbol`, `code`) VALUES
        (1, 'B', '11;12;13;21;24;31;32;33;41;44;51;52;53;54'),
        (2, 'A', '11;12;13;14;21;24;31;34;41;42;43;44;51;54'),
        (3, 'T', '11;12;13;22;32;42;52'),
        (7, 'L', '11;21;31;41;44;51;52;53;54;'),
        (5, '1', '13;22;23;33;43;52;53;54'),
        (6, '4', '11;13;21;23;31;32;33;34;43;53'),
        (8, 'H', '11;14;21;24;31;32;33;34;41;44;51;54'),
        (9, '8', '11;12;13;14;21;24;31;32;33;34;41;44;51;52;53;54'),
        (10, 'P', '11;12;13;14;21;24;31;32;33;34;41;51'),
        (11, 'C', '11;12;13;14;21;24;31;41;44;51;52;53;54'),
        (12, '9', '11;12;13;14;21;24;31;32;33;34;44;51;52;53;54'),
        (13, '2', '11;12;13;14;21;24;33;34;42;51;52;53;54'),
        (14, 'F', '11;12;13;14;21;31;32;33;41;51'),
        (15, 'K', '11;14;21;23;31;32;41;43;51;54'),
        (16, 'E', '11;12;13;14;21;31;32;33;41;51;52;53;54'),
        (17, 'G', '11;12;13;14;21;31;33;34;41;44;51;52;53;54'),
        (18, 'R', '11;12;13;14;21;24;31;32;33;34;41;43;51;54'),
        (21, 'J', '12;13;14;24;34;41;44;52;53');
        ";

      $results = $wpdb->query( $insert );
 
      add_option("jal_db_version", $hc_db_version);

   }
}

function hc_add_options_to_admin() {
    if (function_exists('add_options_page')) {
		add_options_page('HTML Captcha', 'HTML Captcha', 8, basename(__FILE__), 'hc_options_subpanel');
    }
}

// This will add the new item, 'Math Comment Spam', to the Options menu.
function hc_options_subpanel() {
    $tmp_noanswer =	'<p align="center">
    <strong>Ошибка:</strong> Вы не заполнили поле защитного кода.
    </p>';
   	$tmp_wronganswer = '<p align="center">
    <strong>Ошибка:</strong> Вы ввели неправильный код, вернитесь назад и повторите попытку.
    </p>';
    
    $optionarray_def = array(
		'hc_opt_amount_letter'				=> 5,
        'hc_opt_amount_letter_register'		=> 2,        
        'hc_opt_color_letter'				=> '#07078F,#01354F,#000000,#013E7A,#0C0C42,#013737,#1E0636,#1C1C34,#353546',
		'hc_opt_bgcolor_letter' 		=> '#D3D3FF,#BBBBBB,#D5DEEF,#BAC2D3,#80C5E7,#B9AEAE,#C9ECEC,#9DBAD7,#EFD5E8,#E1E7CB',
        'hc_opt_msg_no_answer' 		=> $tmp_noanswer,
		'hc_opt_msg_wrong_answer' 	=> $tmp_wronganswer,
		'hc_opt_fieldname_useranswer' => 'hc_value'
    );
    add_option('plugin_htmlcaptcha', $optionarray_def, 'HTML Captcha Plugin Options');
    
    	/* Check form submission and update options if no error occurred */
	if (isset($_POST['submit']) ) {
		### SECURING FORMS ###
		/*	if ( function_exists('current_user_can') && !current_user_can('manage_options') )
      			die(__('Cheatin’ uh?'));
			check_admin_referer( $mcsp_nonce );*/
		### SECURING FORMS ###

		$optionarray_update = array (
			'hc_opt_amount_letter' 		=> $_POST['hc_opt_amount_letter'],
            'hc_opt_amount_letter_register' => $_POST['hc_opt_amount_letter_register'],             
            'hc_opt_color_letter'		=> $_POST['hc_opt_color_letter'],
            'hc_opt_bgcolor_letter'		=> $_POST['hc_opt_bgcolor_letter'],
			'hc_opt_msg_no_answer'		=> $_POST['hc_opt_msg_no_answer'],
			'hc_opt_msg_wrong_answer' 	=> $_POST['hc_opt_msg_wrong_answer'],
			'hc_opt_fieldname_useranswer' => $_POST['hc_opt_fieldname_useranswer']
		);
		update_option('plugin_htmlcaptcha', $optionarray_update);

	}    
    $optionarray_def = get_option('plugin_htmlcaptcha');
    ?>    
    <!-- ############################## Страница опции ################### -->
    <div class="wrap">
    <form name="hc_options_form" method="post" action="<?php echo $_SERVER['PHP_SELF'] . '?page=' . basename(__FILE__); ?>&updated=true">

      
   	<fieldset class="options">
        <p style="margin-left: 5px; color: #555; font-size: .85em;">
        <label for="hc_opt_amount_letter">Количество символов для незарегистрированных:</label>
		<input name="hc_opt_amount_letter" type="text" id="hc_opt_amount_letter" value="<?php echo $optionarray_def['hc_opt_amount_letter']; ?>" size="2" />
        <br />
        <label for="hc_opt_amount_letter_register">Количество символов для зарегистрированных:</label>
		<input name="hc_opt_amount_letter_register" type="text" id="hc_opt_amount_letter_register" value="<?php echo $optionarray_def['hc_opt_amount_letter_register']; ?>" size="2" />
        <br />        
        <label for="hc_opt_color_letter">Цвета букв через запятую:</label>
		<br /><input name="hc_opt_color_letter" type="text" id="hc_opt_color_letter" value="<?php echo $optionarray_def['hc_opt_color_letter']; ?>" size="100" />
        <br />
        <label for="hc_opt_bgcolor_letter">Цвета фона под буквами через запятую:</label>
		<br /><input name="hc_opt_bgcolor_letter" type="text" id="hc_opt_bgcolor_letter" value="<?php echo $optionarray_def['hc_opt_bgcolor_letter']; ?>" size="100" />
        </p>
	</fieldset>
       
       	<!-- ****************** Field Names ****************** -->
	<fieldset class="options">
		<p style="margin-left:5px; color: #555; font-size: .85em;">
			<label for="hc_opt_fieldname_useranswer">Поле для ответа:</label>
			<br /><input name="hc_opt_fieldname_useranswer" type="text" id="hc_opt_fieldname_useranswer" value="<?php echo $optionarray_def['hc_opt_fieldname_useranswer']; ?>" size="30" />
		</p>
	</fieldset>
    
    	<!-- ****************** Error Messages ****************** -->
	<fieldset class="options">
		<!-- No Answer -->
		<p style="margin-left: 5px; color: #555; font-size: .85em;">
			Сообщение, которое будет показано при отсутствии ответа:
		</p>
		<textarea style="margin-left: 5px" name="hc_opt_msg_no_answer" id="hc_opt_msg_no_answer" cols="100%" rows="3"><?php 
			echo htmlspecialchars(stripslashes($optionarray_def['hc_opt_msg_no_answer']));
		?></textarea>

		<!-- Wrong Answer -->
		<p style="margin-left: 5px; color: #555; font-size: .85em;">
			Сообщение, которое будет показано, если введено не правильное число:
		</p>
		<textarea style="margin-left: 5px" name="hc_opt_msg_wrong_answer" id="hc_opt_msg_wrong_answer" cols="100%" rows="3"><?php 
			echo htmlspecialchars(stripslashes($optionarray_def['hc_opt_msg_wrong_answer']));
		?></textarea>

	</fieldset>
    
        	<div class="submit">
		<input type="submit" name="submit" value="<?php _e('Применить опции') ?> »" />
	   </div>   
    </form>
    </div>
    <?    
}

function hc_aux_die($message) {

		if ( function_exists('wp_die') ) {
			wp_die($message);
		} else {
			die($message);
		}
}
	
register_activation_hook(__FILE__,'hc_install');
register_deactivation_hook(__FILE__,'hc_deinstall');
add_action('admin_menu', 'hc_add_options_to_admin');
?>

html-captcha.classes.php

<?php
class htmlCaptcha
{
	var $amount_letter;//количество символов
	var $general_keycode;//возвращает результат формирования каптчи
    var $letter_color;//цвета букв
    var $bg_letter_color;//цвета фона букв
	
    function dump_array($array)
    {
    if(is_array($array))
    	{
    		$size = count($array);
    		$string = "";
    		if($size)
    		{$count=0;
    			$string.="{";
    			foreach($array as $var => $value)
    			{$string.="$var=$value";
    				if($count++<($size-1))
    				{$string.=", ";}}
    			$string.="}";}
    		return $string;
    	}
    	else
    	{
    		return $array;
    	}
    }
    
	function view_letter($code,$letter_size,$td_size,$sdvig)
	{
	    $arr_bgcolor_letter = explode(',',$this->letter_color);
        $arr_bgcolor = explode(',',$this->bg_letter_color);
		//$arr_bgcolor_letter = array("#07078F","#01354F","#000000","#013E7A","#0C0C42","#013737","#1E0636","#1C1C34","#353546");
		//$arr_bgcolor = array("#D3D3FF","#BBBBBB","#D5DEEF","#BAC2D3","#80C5E7","#B9AEAE","#C9ECEC","#9DBAD7","#EFD5E8","#E1E7CB");
		$arr_yx = explode(";",$code);
		$arr_y = array();
		$arr_x = array();
		$size_of_arr_xy = sizeof($arr_yx);
		for($n=0;$n<$size_of_arr_xy;$n++)
		{
			$arr_y[$n]=substr($arr_yx[$n],0,1); 	
			$arr_x[$n]=substr($arr_yx[$n],1,1)+$sdvig;			
		}
		?>
		<table border="0" cellpadding="0" cellspacing="0">
		<?php
		for($i=1;$i<=5*$letter_size;$i++)
		{
			?>
			<tr>
			<td></td>			
			<?php
			for($j=1;$j<=5*$letter_size;$j++)
			{
				$n_color = rand(0,sizeof($arr_bgcolor)-1);
				$bgcolor = $arr_bgcolor[$n_color];
				for($n=0;$n<$size_of_arr_xy;$n++)
				{
					if(($i==$arr_y[$n]) && ($j==$arr_x[$n]))
					{
						$n_color = rand(0,sizeof($arr_bgcolor_letter)-1);
						$bgcolor = $arr_bgcolor_letter[$n_color];	
					}	
				}				
				?>
				<td bgcolor="<?php echo $bgcolor;?>" width="3" height="3"></td>
				<?php	
			}
			?>
			<td></td>
			</tr>
			<?php
		}
		?>
		</table>
		<?php		
	}
	
	function get_get_robot_code()
	{
	        global $wpdb;
            //echo $this->amount_letter;
            $table_name = $wpdb->prefix . "antibot_codes";
			$general_keycode="";
			//$db = new db_mysql();
			//$db->trashdb_sql(); $db->connect();
			$query_string="select symbol,code from " . $table_name;			
			$result=$wpdb->get_results($query_string,'ARRAY_A');
            //echo $this->dump_array($result)."<br>";                                   						
			$amount_rec = $wpdb->num_rows;
            //echo $amount_rec;            
			$arr_symbols=array();
			if($amount_rec>0)
			{
                $j=-1;
	           foreach($result as $main_arr)
    			{
    			     
                     $j++;                
    			     //echo "main_arr: ".$this->dump_array($main_arr)."<br>";
                     //echo $j; 
    			     $arr_symbols[$j] = array($main_arr["symbol"],$main_arr["code"]);
                     
    			}
			}
			
			//echo "arr_symbols: ".$this->dump_array($arr_symbols)."<br>";
            $size_of_main_arr = sizeof($arr_symbols);
            //echo "size".$size_of_main_arr;
			
		?>
		<table border="0" cellpadding="0" cellspacing="0">
		<tr>
		<?php
			for($j=1;$j<=$this->amount_letter;$j++)
			{
				?>
				<td>
				<?php
				$random_letter = rand(0,$size_of_main_arr-1);
				$arr_letter = $arr_symbols[$random_letter];
				$this->general_keycode.=$arr_letter[0];
				$letter_size = rand(1,1);
				$td_size = rand(3,3);
				$sdvig=0;
				$this->view_letter($arr_letter[1],$letter_size,$td_size,$sdvig);				
				?>
				</td>
				<?php				 	
			}
            //echo $this->general_keycode; 			
		?>		
		</tr>
		</table>
		<?php													
	}
}
?>

Настройки плагина в wordpress будут выглядеть как:

Установка html-Captcha

1. Скопируйте папку html-Captcha из архива в директорию плагинов вашего сайта(Например: wp-content/plugins)
2. Со страницы установки плагинов в административной панели WordPress активируйте плагин
3. Войдите на страницу настроек плагина и установите требуемые параметры(по умолчанию они уже заданы, если не уверены то не трогайте их)
4. Откройте файл comments.php из архива и скопируйте в буфер обмена весь код который в нем написан.
5. Вставьте только что скопированный код в файл comments.php вашего шаблона в том месте где прописана кнопка SUBMIT(«Отправить»)
6. Вставьте код в самое начало файла wp-config.php, находящийся в корневой папке wordpress

Вот такой код Captcha получается на странице после формирования.

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#80C5E7" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#1E0636" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#BBBBBB" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#80C5E7" width="3" height="3"></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td bgcolor="#80C5E7" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#1E0636" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td bgcolor="#BBBBBB" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#80C5E7" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#01354F" width="3" height="3"></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#80C5E7" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#1C1C34" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#1E0636" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#013737" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#0C0C42" width="3" height="3"></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#9DBAD7" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#BBBBBB" width="3" height="3"></td>
              <td bgcolor="#01354F" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#013E7A" width="3" height="3"></td>
              <td bgcolor="#D3D3FF" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#000000" width="3" height="3"></td>
              <td bgcolor="#353546" width="3" height="3"></td>
              <td bgcolor="#01354F" width="3" height="3"></td>
              <td bgcolor="#1E0636" width="3" height="3"></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#E1E7CB" width="3" height="3"></td>
              <td bgcolor="#B9AEAE" width="3" height="3"></td>
              <td bgcolor="#07078F" width="3" height="3"></td>
              <td bgcolor="#BAC2D3" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td bgcolor="#BBBBBB" width="3" height="3"></td>
              <td bgcolor="#C9ECEC" width="3" height="3"></td>
              <td bgcolor="#01354F" width="3" height="3"></td>
              <td bgcolor="#EFD5E8" width="3" height="3"></td>
              <td bgcolor="#D5DEEF" width="3" height="3"></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Может быть и оптимизировать можно как то.
Готовый плагин для для wordpress лежит тут: html-captcha
Пользуйтесь.

PS. Интересны конструктивные комментарии. Каптчу на хабре смог пройти с третьего раза. ;)

Tags:

captcha

Hubs:

Lumber room