Eszköztár

98 Kezdőlap - Webszerkesztés - JavaScript - Jelszó extrákkal

Mintapélda

Ahogyan azt már az Űrlap-elemek című oldalról is tudhatjuk, webes felületen jelszót bekérni az

<input type='password'>

HTML kóddal lehetséges.

Ám egy jelszó bekérése ennél a legegyszerűbb alapváltozatnál több egyéb kiegészítést is tartalmazhat. Ilyen extrák lehetnek például az alábbiak:

1. Láthatóság be-, és kikapcsolása

A beírt jelszó ellenőrizhetősége kedvéért megadhatjuk a felhasználónak a lehetőséget, hogy megnézze, valóban azt gépelte-e, amit szeretett volna. Ez a funkció jellemzően egy sematikus szemet ábrázoló ikonnal érhető el.

******

2. Véletlen jelszó generálása

A véletlenszerűen előállított jelszó nemcsak arra lehet jó, hogy az erre igényt tartó felhasználók helyett jelszót állítsunk elő, hanem arra is, hogy demonstrálhassuk a felhasználónk felé, hogyan is néz ki egy erős jelszó.

3. Jelszóerősség mérése

A jelszó erőssége azt jelenti, hogy egy a feltörés céljából készített program számára a választott karakter-sorozat mennyire okoz komoly akadályt. A visszajelzést egy szimpla mérőszám helyett érdemes látványosabb vizuális élményként elkészíteni.

4. Dupla bekérés összehasonlítással

Az, hogy egy regisztráció, vagy jelszó-módosítás során az új jelszót kétszer kell bekérni az ellenőrzés céljából, valószínűleg nem szorul magyarázatra. A két jelszó összehasonlítása szükségszerűen az adatfeldolgozás során szokott megvalósulni, ám annak semmi akadálya, hogy az egyezést, vagy az eltérést már azonnal a begépelés alkalmával jelezzük egy egyszerű, pici ikon formájában.

5. CapsLock ellenőrzés

Gyakori kellemetlenség, hogy a felhasználó a jelszavát a CapsLock bekapcsolt állapota mellett írja be - emiatt jó eséllyel helytelenül. Éppen ezért elegáns dolog lehet ebben az esetben a gomb státuszára felhívni a figyelmet.

A fenti öt szempont figyelembe vételével pl. az alábbi, kipróbálható jelszó-bekérő felület készíthető:

De hogyan kell mindezt elkészíteni?

Az iménti felületet megvalósító forráskód a lentebbi kis képre kattintva tekinthető meg.

A forráskódban az egyes feladatokhoz tartozóan az alábbi függvények fedezhetőek fel:

1. jelszomutat()

A függvény minden meghívás alkalmával átkapcsolja a jelszó láthatóságát. Ennek keretében alapvetően két dolgot tesz:

• megváltoztatja a beíró mező jellegét: password-ről text típusúra, és fordítva;
• cserélgeti a kétféle "szem"-ikon két változatát.

2. jelszoerosseg(), skala()

Az erősséget vizsgáló függvény egyrészt azt ellenőrzi, hogy milyen hosszú a beírt jelszó. Másrészt azt is figyeli, hogy mennyire változatosak a benne szereplő karakterek - konkrétabban fogalmazva szerepel-e benne kisbetű, nagybetű, számjegy, illetve egyéb karakter. Minden ilyen előfordulást plusz ponttal jutalmaz.
Az így kiszámolt erősséget a skala() függvény alakítja vizuális élménnyé.

Annak eldöntésére, hogy mely karakter számít kisbetűnek, nagybetűnek, számjegynek, vagy éppen egyéb karakternek, az ASCII kódtábla jelent számunkra segítséget. Ebben a szabványos kódtáblában található meg ugyanis, hogy az egyes karakterek milyen számértékű kóddal azonosíthatóak. A mi függvényünk is ezt használja. Ha nem hiszi, hasonlítsa össze a függvényben szereplő számokat az ASCII kódtábla tartalmával!

3. egyezes()

Ez a függvény, miután összehasonlította a két bekért jelszót, a második bekérő mező jobb szélén látható kicsi képet állítja be a megfelelőre. Mindezek előtt azonban arról is gondoskodik, hogy ha a két jelszóbeíró mező valamelyike még üres, akkor a "nem-egyező" ikont csupán halványszürke színnel jelenítse meg.

4. randomjelszo()

A véletlenszerűen generált jelszót létrehozó függvényben érdemes észrevenni, hogy a lehetséges karakterkészletből hiányzik a kis l betű, és a nagy I betű. Ennek pontosan az az oka, mint ami az előző mondatban is érzékelhető: a nagy L kicsi változata, és kis i nagybetűs változata jó néhány karakterkészlet esetén nem különböztethető meg egymástól, vagyis értelmes szövegkörnyezet hiányában a szerepeltetésük minden alkalommal 50% eséllyel hordozná magában a tévedés lehetőségét. Ezért inkább a random jelszóban elkerüljük a használatukat.
Az pedig, hogy a speciális karakterek közül melyeket vesszük be az alapkészletbe, illetve melyeket hagyjuk ki, természetesen erősen szubjektív érvelésre adhat okot. E tekintetben nehéz volna megkérdőjelezhetetlen felsorolást készíteni - az itt található sem az, sokkal inkább demonstratív jellegű csupán.

5. CapsLock()

A függvényben szereplő getModifierState metódus gyakorlatilag meg is oljda a programozási feladatunkat, csupán azzal érdemes róla tudni, hogy csak egy eseményhez, praktikusan billentyű leütéséhez (onkeydown), vagy felengedéséhez (onkeyup) kapcsolódóan hívható meg. Ezért kellett bemenő paramétert adnunk az általunk megírt CapsLock() nevű saját függvényünknek.

További megfontolások a jelszó erősségéről

Bár a mi jelszoerosseg() függvényünk a hossza okán teljesen biztonságosnak ítél meg minden jelszót, ami legalább 11 karakterből áll, ez nyilvánvalóan nem helyes, hiszen abban az esetben, ha ezek a karakterek azonosak, pláne ha pl. a 0, 1, vagy a karakterekből lettek képezve, akkor ez erősen félrevezető információ.
Ezen észrevétel alapján az is könnyen belátható, hogy a különösen gyakran használt jelszavak sem lesznek olyan erősségűek, mint amilyennek a függvényünk mondani fogja őket.

De vajon mik a különösen gyakran használt jelszavak?

Ezzel a kérdéssel számtalan weboldal, és kutatás foglalkozik, éppen ezért rákeresve az interneten a témára rengeteg találatot, statisztikát, felsorolást kaphatunk - attól is függően, hogy az milyen földrajzi, illetve nyelvi területen, valamint milyen populáció vizsgálata alapján történt. Általánosságban azért ezek az eredmények, a világ összessége vonatkozásában tekintve a kérdést, kellően nagy átfedést mutató eredményt adnak. Egy ilyen lista található a jobb oldali panelen is.
Esetleg Ön is használta már ezeknek a jelszavaknak valamelyikét? Nem biztos, hogy jól tette.

---

Előretekintés

Amikor egy valós regisztráció során majd csakugyan le is kell tárolnunk egy jelszót adatbázisba, akkor adatbiztonsági és adatvédelmi okokból nem tehetjük meg azt, hogy a jelszót eredeti formájában mentjük el. Az elmentés előtt a jelszót szükséges lesz valamilyen módon kódolni - precízebben fogalmazva hashelni -, melyre többféle lehetőség is kínálkozik. Ezek közül az egyik gyakran alkalmazott módszer az úgynevezett MD5 kódolás, melyre a szerveroldali programozási nyelvek (mint pl. a PHP is) jellemzően az md5() nevű függvénnyel biztosítják ezt a lehetőséget. (A JavaScript nem rendelkezik ilyen nevű függvénnyel, de ez nem is szerveroldali, hanem kliensoldali programozási nyelv.)

Az alábbi panelen Ön is kipróbálhatja, miként is néz ki egy-egy jelszó hashelése md5 módszerrel. Látható módon bármilyen megadott jelszó hashelt eredménye egy 32 számjegyből álló hexadecimális szám lesz.

---

Új hozzászólás:
E-mail cím:	Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.
Név:	Ez a név fog megjelenni az Ön hozzászólásai mellett.
Mennyi tizenkettő + kettő? Számjegyekkel írja be!	Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.

© infojegyzet.hu, 2023. február