Jak přechytračit Captcha Resolver

Captcha ("completely automated public Turing test to tell computers and humans apart", tedy "plně automatický veřejný Turingův test k odlišení počítačů a lidí") většinou nutí uživatele opsat text z grafického obrázku. Začínal jsem s velmi jednoduchým barevným textem na pozadí, které zvořily vodoznaky. Po pár dnech jsem se stal objetí jednoho z Captcha Resolverů, který mým testem bez větších problémů prošel.

Začal jsem tedy upravovat výsledný text s cílem ztížit robotům jeho rozpoznání. Přidal jsem bílé linky, které přerušují písmenka a barevné obedélníky, které mají robota zmást.

Co na to roboti? Nemají problém.

Dále jsem zkoučel rozmazání. Co roboti? Opět v pohodě rozpoznají. Zkoušel jsem další a další věci, ale výsledkem toho byla jen obtížnější čitelnost pro člověka, ale zároveň stále příliš dobrá čitelnost pro roboty.

Neplatilo na ně:

• různá barva písmen
• vodoznaky na pozadí
• obdélníky pro zmatení
• rozmazání (ve skutečnosti je rozmazání jedním z kroků při rozpoznávání textu, takže jsem tím robotům akorát ulehčil práci)
• dělení zanků bílými linkami
• jiné barevné linky

Naopak lepší výsledky (rozuměj větší zmatení protivníka - OCR robota) dosáhneme použitím:

• jednobarevného textu
• písmenka blízko u sebe (až se překrývají)
• netradiční, nejlépe bitmapový font
• část obrázku zinvertovat

Zajímavější a úspěšnější ukázky a dokonce možnost integrovat tamější systém kontroly do vašich stránek nabízí projekt http://recaptcha.net. Vzhledem k přístupnosti není od věci i možnost nechat si text přehrát.

OCR roboti jsou den ode dne chytřejší a vygenerovat dobře čitelnou Captchu pro lidi, ale nerozpoznatelnou pro počítač je den ode dne těžší a těžsí. Zajímavou alternativou jsou pak logické otázky, od základních "kolik je pět a tři?" až po zajímavější "Kolik nohou má stonožka?".

add comment view posted comments (1)

Právě jsem přežil další pátek 13.

Nejsem nijak pověrčivý a triskaidekafobií (strach z pátku 13.) netrpím. Přesto pro mě byl uplynulý den výjimečný a nebylo to ani kvůli symbolickému doručení podepsané Lisabonské smlouvy do Říma. Spustil jsem totiž nový web. Abych byl přesný, svůj blog (právě ho čtete) jsem nasadil na nový engine a samozřejmě se také změnila grafika.

Pokud tento text vidíte, znamená to, že web pravděpodobně funguje. I když to nešlo podle představ, nakonec se, zdá se, dílo zdařilo. Kdo by řekl, že mezi verzemi MySQL a PHP, které se od mé lokální verze liší až na třetím řádu, mohou být tak propastné rozdíly a z funkčního webu udělají rázem nefunkční. Nebo hloupé defaultní nastavení direktivy magic_quotes_gpc v PHP - kdo to kdy viděl v dnešní době na verzi PHP 5.2.x?

Každopádně se teď budu modlit, aby už vše fungovalo, a přeji svému dílu pevné zdraví a dobrou čtenost.

add comment view posted comments (0)

CSS a HTML generátor boxů s oblými rohy (rounded corner box)

Dnes bych rád v rychlosti prezentoval jeden můj nástroj na podporu tvorby webu. Jedná se o generátor HTML a CSS pro boxy s oblými rohy.

Kdo dělá trochu do webdesignu ví, že vyrobit box s oblými rohy není jednoduché, má-li být jeho šířka přizpůsobena obsahu. Když se k tomu přidá stále používaný IE6, který má velké problémy s CSS atributem height: 100%, je vývoj takového boxu téměř nadlidský úkol. A co když má box mít navíc průhledné okolí rohů, aby byl box regulerně zobrazen na jakémkoliv pozadí? Tím se to ještě zesložití.

Já jsem si dal tento týden jasný úkol: Implementovat HTML a CSS tak, aby byly výše zmíněné body dodrženy. Zde jsou:

• box z libovolné bitmapy (používám PNG, které může být i průhledné)
• jeho velikost se přizpůsobuje obsahu na výšku i šířku
• korektně zobrazen ve všech prohlížečích (toto se mi nepovedlo v IE6, místo toho je v případě velikosti závislé na obsahu zobrazen klasický box s jednou barvou; pokud se zvolí fixní šířka nebo výška, je to v pořádku)
• co nejjednodušší HTML a CSS

Zjeména jsem se zaměřil na obecnost, což mělo za následek trochu dívočeší HTML definici, ale komu vadí deset tagů <b> za sebou? Mě ne.

Pro zjednodušení jsem zvolil na výběr čtyři varianty: fixní šířka, výška, obojí nebo nic (box bude v obou směrech přizpůsoben obsahu).

Když už jsem měl po několika hodinách kódování správně navrhnuté HTML a CSS, napadlo mě vytvořit jednoduchý generátor, který by rozřezal zadaný obrázek a vytvořil odpovídající definici HTML a CSS.

Generátor jsem původně chtěl užívat sám, ale nakonec jsem z něho měl takovou radost, že jsem ho dal k dispozici i dalším.

Co tedy generátor umí?

• rozřeže zadaný obrázek, který si nakreslíte v nějakém grafickém programu nebo vyberete z nabídky
• zadáte velikost okrajů na každé straně zvlášť
• zvolíte variantu rozměr: fixní šířka, výška, obojí nebo nic (box bude v obou směrech přizpůsoben obsahu)
• vygenerujete HTML a CSS

Jak vypadají výsledky se podívejte sami.

add comment view posted comments (0)

Správné přesměrovat pomocí 301 nebo 302? Plus příklad v PHP

V době dynamických webů je běžné přesměrování stránek na úrovni HTTP protokolu. Zejména vhodné je to například po vyplnění formuláře, zabrání se tak například opětovnému, nechtěnému odeslání. V jiném případě se přesměrování používá v případě změny url dokumentu nebo celé domény webové aplikace. V obou případech se jedná o situaci, kdy server pomocí HTTP protokolu prohlížeči pošle hlavičku s odkazem na nové umístění dokumentu. Prohlížeč na to konto pošle nový požadavek na novou adresu dokumentu.

Přesto bychom měli rozlišovat minimálně tyto dva zméněné případy. V případě přesměrování po odeslání formuláře se jedná o jednorázové přesměrování, často může být cílová adresa závislá na hodnotách formuláře. V tomto případě nelze s jistotou říci, kam má být při dalším odeslání uživatel přesměrován (použijeme přesměrování 302 Found). V druhém případě je ovšem přesměrování trvalé a zejména indexační roboti vyhledávačů mohou původní adresu ze své databáze odstranit a nahradit ji novou (použijeme přesměrování 301 Moved permanently).

Existují i další typy přesměrování pomocí kódu 3xx, o kterých se dozvíte na webu w3 a na wikipedii, ovšem podle všeho nemusí být všechny implementovány ve všech prohlížečích. Nicméně minimálně kódy 301 a 302 by podporovány být měly a všechny kromě 301 by měly být bez problému možné nahradit pomocí 302.

Jak provést přesměrování v PHP:

Přesměrování se v PHP provede zasláním jiné než standardní HTTP hlavičky, tedy funkcí header(). V tuto dobu zpravidla zpracování požadavku na straně serveru končí, proto je po zaslání hlavičky volána funkce exit().

// permanentni presmerovani
header("HTTP/1.1 301 Moved Permanently");
header("Location: www.seznam.cz/nova-adresa-stranky/");
exit();

// presmerovani po zaslani formulare
header("HTTP/1.1 302 Found");
header("Location: www.seznam.cz/formular-byl-odeslan/");
exit();

add comment view posted comments (0)

Webové služby - co jsou a k čemu slouží

Co jsou webové služby podle Wikipedie:

Webová služba je podle definice W3C řešení, jak spolu aplikace mohou komunikovat a vyměňovat si informace přes Internet.

Pokusím se webové služby představit trochu podrobněji. Webové služby mají blízko k tzv. RPC (Remote Procedure Call neboli vzdálené volání procedur). Lépe řečeno z něho vycházejí.

V praxi si vzdálené volání procedur (RPC) můžeme představit jako komunikaci dvou počítačů v síti - klient a server. Klient pomocí RPC volá nějakou proceduru na serveru a ten klientovi vrací výsledná data. Uvažujme příklad meteorologické stanice a počítače u nás doma, kde chceme zobrazovat aktuální teplotu. V praxi to vypadá tak, že klient serveru předá nějaké vstupní parametry (například zítřejší datum) a pošle požadavek:

GetTemperature('2008-11-05');

Na straně klienta se zpráva zabalí do HTTP požadavku a odešle se na server. Server zprávu zpracuje, zjistí, jaká bude zítra teplota a vytvoří se odpověď. Ta se opět zabalí jako HTTP zpráva a je odeslána zpět klientovi. Tomu již dojde například číslo 14 a klient už ví, že zítra bude 14°.

Na uvedeném příkladě server nabízí klientovi službu - "zjištění aktuální teploty" a protože komunikace mezi klientem a serverem probíhá přes web, jedná se o webovou službu.

V praxi je princip webových služeb velmi podobný. Na straně serveru se musí určit, jaké procedury budou k dispozici, často se také mluví o tzv. "exportu" procedur. Na straně klienta se naopak musí určit adresa a port serveru, kde se dané procedury budou ve skutečnosti provádět.

Základní protokoly, které zajišťují komunikaci jsou:

• XML-RPC - starší multiplatformní protokol, kde není nutné definovat typy (rozumnějme strukturu) přenášených dat. Naproti škála datových typů, které je možné v tomto protokolu použít, je značně omezena.
• SOAP - částečně nástupce protokolu XML-RPC, opět multiplatformní, modernější verze, která ovšem pro svou funkci vyžaduje přesné zadání struktury přenášených dat (tzv. WSDL (Web Services Description Language)). Díky tomu ale umožňuje přenášet rozmanitější datové struktury.
• UDDI

add comment view posted comments (0)

Effective Thumbnails (PHP utility)

Utilitka pro automatické generování náhledů pomocí PHP4+.

English version.

Tato utilitka pomůže zejména tomu, kdo na stránkách zobrazuje obrázky i v jiné než originální velikosti. Vytvářet pro každý obrázek ručně náhled je příliš pracné a zobrazovat je zmenšené v plném rozlišení je bezohledné zejména pro ty s pomalejším připojením.

Jak to funguje?

Místo adresy obrázku (např. images/test.gif) se do HTML tagu (nebo jinam) zadá thumb.php?src=images/test.gif&w=100&h=50&ne=1 Skript z obrázku a jeho rozměrů vygeneruje náhled (šířka 100px, výška 50px), který uloží do speciální složky s náhledy (defaultně .thumbs/). Tento náhled potom prohlížeči odešle jako obyčejný obrázek.

Při dalším zavolání skriptu se stejnými parametry (stejný obrázek a stejné rozměry) skript znovu náhled nevytváří, ale odešle mu náhled, který je již vytvořený. Tím se ušetří nemálo času a prostředků serveru.

Požadavky:

• PHP 4
• Možnost zapisovat a vytvářet adresáře v adresáři, kde se nachází obrázek.

Poznámky:

• Specifikováním parametru ne=1 zabráníte skriptu, aby zvěšoval obrázky v případě, že velikost náhledu je větší než originální obrázek.
• Skript zachovává poměr stran původního obrázku.

Stáhnout zde.

Utility for automatic generation of thumbnails using PHP4+.

Česká verze.

This utility helps you, if you display images in the unoriginal size in your website.

How does it work?

Instead of the image address (for example images/test.gif) you write thumb.php?src=images/test.gif&w=100&h=50&ne=1 in the HTML tag (or somewhere else). Script generates a thumbnail from the original image and dimensions specified (width 100px, height 50px) and stored in the special directory (default .thumbs/). Then this thumbnail is send to browser as an ordinary image.

If the script is called in the next time with the same parameters (the same image with the same dimensions), the thumbnail is not generated again, but the thumbnail already generated is send to browser. That saves much server time.

Requierement:

• PHP 4
• Script is allowed to write to the image's directory.

Comments:

• If the parametr ne=1 is specified, script will not enlarge the image, if dimensions of the thumbnail are larger than original image.
• Script keeps the aspect ratio of the original image.

Download here.

add comment view posted comments (0)