Dot-matrix Captcha
Jednoduchý nápad ako vygenerovať Captcha obrázok, ktorý v skutočnosti nie je obrázok.
Synopsi sťažoval, že Captcha je prežitok a treba vymyslieť niečo nové. Spomenul som si pritom, že som kedysi vymyslel celkom vtipný spôsob ako vygenerovať Captcha kód ktorý nie je obrázok. To robotom celkom zamotá hlavu.
Namiesto obrázku vygenerujem tabuľku. V nej budú prázdne a plné políčka. Prázdne sú podfarbené bielou, plné čiernou farbou. Ak sa tabuľka správne naformátuje, výsledkom bude pixelfontový číselný kód, ktorý bežný návštevník bez problémov prečíta.
Praktický príklad
Túto techniku som prvý krát použil vo svojom projekte Raidar. Ak si to teda skutočne chcete skúsiť v praxi, mrknite na registračný formulár Raidaru.
Samotný zobrazený bezpečnostný kód vyzerá asi takto:
| X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |||||||||||||||||||||||||||||||||
| X | X | X | X | X | X | X | X | ||||||||||||||||||||||||||||||||||||||||||
| X | X | X | X | X | X | X | |||||||||||||||||||||||||||||||||||||||||||
| X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||||||||||||||||||||||||||||||||||||
| X | X | X | X | X | X | X | |||||||||||||||||||||||||||||||||||||||||||
| X | X | X | X | X | X | X | X | X | |||||||||||||||||||||||||||||||||||||||||
| X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Kód
PHP
Na všetko stačí jednoduchá funkcia, ktrej sa pošle číslo a vráti HTML kód s tabuľkou:
function dotmatrixCaptcha( $randomNumber ) {
// jedničky sú tmavé, nuly svetlé políčka
// každý riadok reprezentuje číslo od 0 do 9
$font = array(
array( '01110', '10001', '10001', '10001', '10001', '10001', '01110' ),
array( '00100', '01100', '10100', '00100', '00100', '00100', '11111' ),
array( '01110', '10001', '10001', '00010', '00100', '01000', '11111' ),
array( '01110', '10001', '00001', '00110', '00001', '10001', '01110' ),
array( '10001', '10001', '10001', '11111', '00001', '00001', '00001' ),
array( '11111', '10000', '10000', '11110', '00001', '10001', '01110' ),
array( '00111', '01000', '10000', '11110', '10001', '10001', '01110' ),
array( '11111', '00001', '00001', '00010', '00100', '01000', '10000' ),
array( '01110', '10001', '10001', '01110', '10001', '10001', '01110' ),
array( '01110', '10001', '10001', '01111', '00001', '00010', '01100' )
);
$fontWidth = sizeof( $font );
$fontHeight = sizeof( $font[0] );
// definícia toho čo majú jednotlivé políčka obsahovať a ako majú vyzerať
$cell = array( ' ', 'X' );
$style = array( 'background: white;', 'background: black;' );
// číslo si rozstrelíme na pole po znaku
// kvôli jednoduchšiemu prechádzaniu poľom (viď. nižšie)
$randomNumber = str_split( $randomNumber );
$length = sizeof( $randomNumber );
// do tejto premennej naplníme výsledok a na konci ju vrátime
$code = '';
// prejdeme font po riadkoch, pre každé číslo vygenerujeme príslušnú časť
$code .= '<table>';
for ( $line = 0; $line < $fontHeight; $line++ ) {
$code .= '<tr>';
for ( $character = 0; $character < $length; $character++ ) {
$dots = str_split( $font[ $randomNumber[ $character ] ][ $line ] );
for( $dot = 0; $dot < $fontWidth; $dot++ ) {
$code .= '<td style="' . $style[ $dots[ $dot ] ] . '">' . $cell[ $dots[ $dot ] ] . '</td>';
}
}
$code .= '</tr>';
}
$code .= '</table>';
// nakoniec vrátime celý kus HTML kódu s tabuľkou
return $code;
}
CSS
Tabuľku stačí naformátovať niekoľkými jednoduchými riadkami CSS. Obsah buniek tabuľky treba zminimalizovať a bunkám nastaviť jednotný rozmer (inak by "pixely" v matici mohli škaredo lietať):
.captcha table { border-collapse: collapse; font-size: 1px; line-height: 0; width: auto; }
.captcha td { padding: 0; width: 2px; height: 2px; }
HTML
Ako už vidno z ukážky CSS kódu, výslednú tabuľku stačí strčiť do nejakého kontajneru a je to:
<div class="captcha"><?= dotmatrixCaptcha( 12345 ) ?></div>
Výhody
Roboti obvykle Captchu obchádzajú tým, že rozoznajú text na obrázku. Takto vygenerovaný kód sa užívateľovi javí ako normálne čísla, v skutočnosti je to však pre robotov iba obyčajná tabuľka. Nemajú žiadny obrázok, ktorý by mohli scanovať.
Zaujímavé tiež je, že keď sa čierne bunky vyplnia nejakým znakom (v tejto ukážke je to X), je takýto kód čitateľný aj v textových browseroch. Síce to zaberie na obrazovke oveľa viac miesta, ale číslo poskladané z veľkých X je krásne čitateľné. Schválne, skúste si na chvíľu vypnúť štýly.
Nevýhody
Táto metóda ťaží hlavne z toho že zatiaľ nie je vôbec rozšírená. Ak by sa začala nasadzovať masívne, bude len otázka času kedy sa crackerom oplatí vyvinúť snahu a urobiť mechanizmus ktorý zlomí aj tento systém. Keď sa to tak vezme, jeho rozparsovanie by bolo určite oveľa jednoduchšie než rozoznanie zdeformovaného písma na psychodelickom podklade.