posztok

kommentek
google keresőoptimalizálás
Zoli kísérleti erőlködéseinek laboratóriuma a keresőoptimalizálás és webfejlesztés fáradalmait boncolgatva

A Captcha számomra egy szóval jellemezhetó: FÁJDALOM, azonban szükségességét semmiképpen nem kérdőjelezném meg.

Gondoltam, milyen nagyszerű lenne egy olyan herkentyű, amely minden karakter begépelésekor azonnali visszajelzést küldene a form kitöltőkének, és nem csak a posztoláskor zúdulna a döbbenet.

Pár órányi szenvedést követően összeállt a rendszer, amely egy sima javascript, de szerintem és az eddigi tesztalanyok szerint is meglehetősen dögösre sikeredett.

Akkor hát következzék maga a form

<input name="seccode" type="text" id="seccode_id" size="20" onkeyup="count()" style="background-color:#FFFFFF"/>
<span id="ok"></span>

, amely majd a billentyű lenyomását követően fog értékelést kapni ettől az alábbi javascript kódtól.


<script type="text/javascript">
function count(){
var desc = document.getElementById("seccode_id").value;
var code = "<?php echo rtrim(preg_replace('/(.)/', '$1%51%', $_SESSION['secword']));?>";
var result = code.replace(/%51%/gi, "");
var length = desc.length;
if (desc.slice(0,length)==result.slice(0,length))
{document.getElementById("seccode_id").style.backgroundColor="#E2FFB1";
document.getElementById("ok").innerHTML = "";}
else
{document.getElementById("seccode_id").style.backgroundColor="#DF625B";
document.getElementById("ok").innerHTML = "the last charcter you entered is invalid";}
if (length==0){
document.getElementById("seccode_id").style.backgroundColor="#FFFFFF";
document.getElementById("ok").style.visibility="hidden";}
if (length==6 && desc.slice(0,length)==result.slice(0,length)){
new Fx.Style('secur', 'opacity', {duration:1000}).start(1,0);
document.getElementById("ok").style.visibility="hidden";}}
</script>

A javascriptnek két inputja van: a Captcha szkript által generált $_SESSION[‘secword’], valamint a humanoid szövegbevitel (input form tartalma). Az ellenőrző kód html-be történő kiíratását sajnos sehogy sem tudtam megkerülni, így annak szennyezéséről, majd megtisztításáról egy preg_replace php, majd egy replace js funkció gondoskodik, jelen szkriptben a Captcha karakterei közé egy %51% sztringet beszúrva.

A működés nagyon röviden a következő. Leütéskor a js megvizsgálja az input hosszát, majd az értéket a Captcha azonos hosszú értékével összeveti. Egyezés esetében az input háttérszíne zöldre vált, eltérés esetén piros féle árnyalatban tűndököl, valamint egy figyelmeztető szöveg is megjelenítésre kerül az ok id vel fémjelzett pozicióba, hogy azonnal felhívja a gépelő figyelmét a problémára.

Az utolsó három sor, már csak a hab a tortán. A demóban szereplő ellenőrzőkód 6 karakter hosszúságú, helyes begépelést követően a form container divje mootoolsosan beolvad a háttérbe.

További kellemes napot!

Ha tetszett, amit itt olvastál egy link elhelyezésével segíthetsz a népszerűsítésében.
Egyszerűen másold ki az alábbi kódot, majd illeszd be weblapod forráskódjába.
Így fog kinézni: Fájdalommentes Captcha jár a népnek

This thing has 23 Comments

  1. Posted 2008 June 1 at 1:52 pm | Permalink

    Szép, gratula. De a helyedben, hogy még szebb legyen átírnám unobtrusive javascript-re. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

  2. Bagi Zoltán
    Posted 2008 June 1 at 2:45 pm | Permalink

    Ez az unobstrusive javascript egy totál új dolog, köszönöm, utána fogok nézni.

  3. Zmetser
    Posted 2008 June 1 at 7:19 pm | Permalink

    Aranyos, de ez így pont a robotoktól nem véd 😉 De tényleg szép.

  4. Bagi Zoltán
    Posted 2008 June 1 at 8:25 pm | Permalink

    Örülök, hogy tetszik, már csak azt kellene megosztanod velem, hogy miért nem véd a robotoktól, ha a CAPTCHA értéke helyesen nem jelenik meg a forrásban. Kíváncsian várom válaszod 😉

  5. Posted 2008 June 2 at 9:59 am | Permalink

    Az ötlet jó, szebb megoldás viszont, ha AJAXot használva lekéred a szervertől a helyes kódot, így semmilyen formában nem jelenik meg a biztonsági kód a HTMLben. Egy másik megoldás, ahol ugyan megjelenik, de valamivel zavarosabb, ha enkriptálod valamilyen szimetrikus titkosítással, pl. DES … nem hiszem, hogy bármelyik robot is DESszel védett CAPTCHAkat keres 😀

  6. Posted 2008 June 2 at 10:45 am | Permalink

    És persze megint kirekesztik a vakokat és gyengénlátókat…
    Miért nem terjed a “felolvasós” captcha??? 🙁

  7. Bagi Zoltán
    Posted 2008 June 2 at 10:55 am | Permalink

    András, kérlek hidd el semmilyen kirekesztő szándék nem volt bennem, csak dögösíteni akartam az idegesítő captchát.

  8. Posted 2008 June 3 at 8:36 am | Permalink

    Nem rád gondoltam, hanem általában a Webmester társadalomra. A BMF-en nagyon sok gyengénlátó és vak tanul informatikát speciális képzésben, akik rendelkeznek ugyan “felolvasó” szoftverrel a gépükön, de sajnos nap mint nap látom, hogy rengeteg web oldal elérhetetlen számukra. Habár vannak kivételek, pl.: Google account regisztráció.
    Legenerálja wav-ba szerintem. Tudom, hogy nem könnyű ezt leprogramozni, én nem is lennék rá képes, de örömmel venném ha valaki ezt megoldaná és elterjedne a weben.
    Tisztelettel,
    Tóth András

  9. Bagi Zoltán
    Posted 2008 June 3 at 9:29 am | Permalink

    András, azt gondolom teljesen igazad van, de beszámolnék egy pár nappal ezelőtti tapasztalatomról. A digg.com-on küldtem be egy cikket és az érvényesítéshez természetes el kellett bánni egy captchával. Láttam mellette egy hangszóró ikont, tudtam ezzel meghallgathatom. Kattintottam, de a böngésző -ha jól emlékszem flash player hiányában- sikertelenül várt a bővítmény telepítésére. Semmilyen tapasztalatom nincsen a vakok és gyengénlátók internetezési szokásaival kapcsolatban, de nem vagyok benne biztos, hogy egy bővítmény telepítése könnyű feladat lenne számukra.

    Magyarán van ahol van, de élni vele sem egyszerű.

    A webmester társadalommal kapcsolatban pedig annyit írnék, azon túlmenve, hogy igazat adok neked abban, hogy az ilyen jellegű kirekesztés ellen tenni kell, bár ez inkább nem tudatos mulasztás, minden webmester a célcsoportjának készíti a honlapokat. Az igazán szörnyű az lenne, ha a gyengénlátóknak készült portálokon nem lenne hangos captcha, szerintem.

  10. szpet
    Posted 2008 June 6 at 1:31 pm | Permalink

    Hát ez így tényleg nem igazán véd a robotok ellen, mert a captchak-nak az lenne a lényegük hogy nem lehet a megfejtésükre programot (robotot) írni, ebben a scriptben meg ott van a megoldás a megfejtésre.

  11. Bagi Zoltán
    Posted 2008 June 6 at 6:23 pm | Permalink

    Elfogadom, amit írsz, he lekódolsz egy robotot, amelyik visszafejti a random szennyezést.
    Jó munkát! 😉

  12. Posted 2008 June 7 at 2:56 pm | Permalink

    Tegnap negyedórát szenvedtem egy ilyen vacakkal (de tényleg kb. annyit!), és nem azért mert rövidlátó vagyok, hanem mert a nyomorult nem akarta az igazságot. Meg kisnagybetűk vegyesen, amiből azt gondolnád, érzékeny rájuk, aztán csak csupakissel megy a dolog. :-/

    Vak-témához annyit, hogy tényleg jó lenne, ha mindenkinek jó lenne, de pl. a gyengénlátókat akár ki is hagyhatod (esetleg a színvakok lehetnek olykor bajban?), én olyan rosszul látok, hogy hivatalosan vaknak minősülök, de a netezésben ez még nem zavart (legfeljebb akkor, amikor nem találtam a kijelentkezés-gombot a vipmail-en, mert a majmok elrejtették egyéb gomb alá, amire bökve 2 másodpercig volt látható pár másik felirat társaságában – de ez elég extrém eset, nem is tudok hasonlót), viszont van egy olyan oldala is a dolognak, hogyha elvárod, hogy egy ember kényelméért ötszáz válllaljon kényelmetlenséget, azzal előbb-utóbb annak az egynek is rosszat teszel, mert legszívesebben megfojtanák majd (jogosan). Az érintettek a legtöbbször nagyon nem kérnek az ügyük túllihegéséből.

    Zerge

  13. Posted 2008 June 8 at 2:37 pm | Permalink

    Szia Zoli,

    El szomorítsalak:

    Üsd be kérlek FireBugba:

    var str = count.toString();
    var arr = str.split(‘\n’);
    eval( arr[2] );
    var codeARR = code.split( ‘%51%’ )
    theCode = ”;
    for( i=0;i

  14. Bagi Zoltán
    Posted 2008 June 8 at 2:46 pm | Permalink

    Kow, mindig tudtam, hogy te egy ügyes designer vagy.

  15. szpet
    Posted 2008 June 8 at 8:16 pm | Permalink

    Akkor én is mutatok egyet, ami még látványos is és nem a függvényt “belezi ki”:

    var input = document.getElementById(“seccode_id”);
    var code=””;
    for(i=0;i

  16. szpet
    Posted 2008 June 8 at 8:19 pm | Permalink

    hát a kissebb jelet ne szereti a komment megpróbálom <-vel

    var input = document.getElementById(“seccode_id”);
    var code=””;
    for(i=0;i<6;i++){
    var chr=40
    while(input.style.backgroundColor!=”rgb(226, 255, 177)” && chr<200){
    chr++
    input.value=code+String.fromCharCode(chr)
    count()
    input.value=””
    }
    code+=String.fromCharCode(chr)
    count()
    }
    input.value=code

  17. Ashtor
    Posted 2008 August 12 at 10:12 am | Permalink

    Ha egy kicsit belegondoltok, egyáltalán nincs is szükség a CAPTCHA-ra.

    Miről szól a játék? Arről, hogy a botok ne tudjanak automatikusan bejegyzéseket küldeni. Ha ezt megoldod, akkor nem kell a júzereket kínlasztani.

    Pedig erre a megoldás annyira egyszerű!

    –> Adj meg egy kanyi “action”-t a formodnak, amit javascripttel felülírsz

    var cel1=”act”
    var cel2=”ion”
    var ext=”php”
    id=”submit”+’form’
    document.getElementById(id).action=cel1+cel2+’.’+ext

    Ennyi már bőven elég, de a javascript kódot lehet az égig bonyolítani.

  18. Ashtor
    Posted 2008 August 12 at 10:15 am | Permalink

    acsudába… a blog kiszedte HTML tagokat 🙁

    Mégegyszer, hátha megmarad a lényeg is

    (FORM action=”suck_bot.php” id=”submitform”)
    (INPUT ….
    (/FORM)

    (SCRIPT)
    var cel1=”act”
    var cel2=”ion”
    var ext=”php”
    id=”submit”+”form”
    document.getElementById(id).action=cel1+cel2+”.”+ext
    (/SCRIPT)

  19. Bagi Zoltán
    Posted 2008 September 18 at 6:00 pm | Permalink

    Szia Ashtor!
    Azt hiszem te a zseni kategóriába tartozol, vagy csak nagyon jó oldalakat olvasol. Megtesztelem a módszered, remélem robot biztos 🙂
    Köszönöm

  20. Szekeres Júlia
    Posted 2009 January 11 at 8:39 pm | Permalink

    Sziasztok!

    Csak részben értem, amit írtok, ezért kicsit félve kérdezem meg: mit gondoltok a számolós captcha-ról? Úgy hiszem, azt fel tudja olvasni a vakoknak is, nem kell guvasztani hozzá a szemed sem, nincs benne semmi trükk (kisbetű/nagybetű pl.), csak beírod, hogy 2+3=? 5, és kész. Nyilván lehet rá robotot programozni – szoktak?

    Most látom, neked is ilyesmi van 🙂

  21. Posted 2009 April 12 at 12:28 am | Permalink

    A Captcha egy elég hasznos, de ezen felül is van módja hogy a látogatóinkat ne terheljük feleslegesen. Ezen felül sok mindenki nem érti mit kell csinálni.
    Használjatok javascript formot, magyarul nem lessz benne a forrás kódba a form így a robotok sem fognak mindenfélét beregelni.
    Tedd bele az egész formot scriptbe ( külön file-ba, és id vel hívd meg.
    Hatékony megoldás.

  22. GregMolnar
    Posted 2009 June 21 at 11:56 pm | Permalink

    @Julia
    a szamolos captcha-t gyerekjatek feltorni, esetleg ha kepen rakod ki a szamot akkor okoz egy kis nehezseget

  23. Holian
    Posted 2010 February 8 at 8:59 am | Permalink

    Zoltán!
    Ashtor módszerét letesztelted? Mi lett az eredménye?
    Nagy Sanyi hozzászólását egy cikkben nem tudnánk megvitatni? Érdekelenének a kacsát kiváltó / kiegészítő alternatív megoldások.