Autor Zpráva
PowerJesus
Profil
#1 · Zasláno: 9. 8. 2009, 12:53:19 · Upravil/a: PowerJesus
Odpovědět Citovat
Zdravím všetkých!
V prvom rade sa ospravedlňujem za ten blbý názov témy.

Pokúšam sa vytvoriť nejaký kontroler pre silu užívateľského hesla. Poznáte to, ak zadáte slabé heslo, zobrazí sa vám taká hláška a text červeným, ak je to heslo ako-tak dobré, žltá hláška a nakoniec aj zelená ...

Prezrite si, prosím, nasledujúci skript: 
<script type='text/javascript'>
  /* Declare function PowerJesus (): */
  function PowerJesus () {
    /* Set all variables: */
    var input = document.getElementById('input').value;
    var easy = new RegExp ('^[a-zA-Z]{8,12}$');
    var medium = new RegExp ('^[a-zA-Z0-9]{8,12}$');
    var hard = new RegExp ('^[a-zA-Z0-9\.\_\$\@\|\\\/]{8,12}$');
    /* Check input: */
    if (easy.test(input)) {
      /* Show message: */
      document.getElementById('message').innerHTML = 'Password easy.';
      document.getElementById('message').style = 'color: #FF0000;';
    } else if (medium.test(input)) {
      /* Show message: */
      document.getElementById('message').innerHTML = 'Password medium.';
      document.getElementById('message').style = 'color: #FFA500;';
    } else if (hard.test(input)) {
      /* Show message: */
      document.getElementById('message').innerHTML = 'Password hard.';
      document.getElementById('message').style = 'color: #008000;';
    } else {
      /* Show message: */
      document.getElementById('message').innerHTML = 'Invalid password!';
      document.getElementById('message').style = 'color: #000000;';
    }
  }

  /* Call function PowerJesus (): */
  window.setInterval ('PowerJesus ()', 100);
</script>


Ako môžete vidieť, použité sú 3 reg. výrazy. Najslabšie heslo sa kontroluje podľa malých a veľkých znakov abecedy, stredne silné heslo podobne, pridávajú sa čísla a najsilnejšie heslo by malo obsahovať aj nejaké špeciálne znaky.

V čom je ale problém ... je tam síce minimálny limit dĺžky hesla 8 znakov, ale akonáhle zadám 8 napr. malých písmen a hneď za tým bodku, tak mi to označí ako najsilnejšie heslo. Lenže to heslo neobsahuje veľké písmená a čísla. Ja potrebujem taký výraz, ktorý by kontroloval malé, veľké písmená, čísla aj špeciálne znaky, aby v tom hesle z každého aspoň jeden znak bol.

Za každú radu či nápad budem veľmi vďačný.



Tak nakoniec som sa k tomu dopracoval, stačilo len trošku logicky pouvažovať.
Dve podmienky regulárneho výrazu som síce nespojil, ale využil som množinu podmienok:

Obsah súboru PowerJesus.js: 

/* Declare function PowerJesus (): */
function PowerJesus () {

  /* Set all variables: */
  var string = document.getElementById('input').value;
  var length = new RegExp ('(.{8,12})'); // specify password length (8-12 characters)
  var weak = new RegExp ('([a-zA-Z]{1,})');
  var medium = new RegExp ('([0-9]{1,})');
  var strong = new RegExp ('([\.\$\@\§\#\*\<\>]{1,})'); // specify all allowed special characters

  /* Check, if string matches length specified for password: */
  if (length.test(string)) {

    /* Check, if string matches conditions for weak password: */
    if (weak.test(string)) {

      /* Check, if string matches conditions for medium-strong password: */
      if (medium.test(string)) {

        /* Check, if string matches conditions for strong password: */
        if (strong.test(string)) {

          /* Show message: */
          document.getElementById('message').innerHTML = 'Password is strong.';
          document.getElementById('message').style = 'color: #008000;'; // green

        } else {

          /* Show message: */
          document.getElementById('message').innerHTML = 'Password is medium-strong.';
          document.getElementById('message').style = 'color: #FFA500;'; // orange

        }

      } else {

        /* Show message: */
        document.getElementById('message').innerHTML = 'Password is weak.';
        document.getElementById('message').style = 'color: #FF0000;'; // red

      }

    }

  } else {

    /* Show message: */
    document.getElementById('message').innerHTML = 'Password is very short!';
    document.getElementById('message').style = 'color: #000000;'; // black

  }

}


Do zdrojového kódu stránky treba ešte dopísať, aby sa tam tento súbor vložil a zavolať funkciu tak, aby neustále kontrolovala pole pre heslo: 

<script type='text/javascript' src='PowerJesus.js'></script>

<script type='text/javascript'>

  /* Call function PowerJesus (): */
  window.setInterval ('PowerJesus ()', 100); // specify function refresh time (in ms)

</script>


Funkcia funguje relatívne spoľahlivo. Má nedostatky, ktoré možno časom doriešim.



Tak zase som sa s tým pohral a vyplodil niečo nové. Opäť je to len veľká množina podmienok, ale funguje to perfektne. 

/* Declare function PowerJesus (): */
function PowerJesus () {

  /* Set all variables: */
  var string = document.getElementById('input').value;
  var length = new RegExp ('(.{10,16})'); // specify password length (10-16 characters)
  var letters = new RegExp ('([a-zA-Z]{1,})');
  var numbers = new RegExp ('([0-9]{1,})');
  var specials = new RegExp ('([\.\_\\\/\+\$\@\§\#\*\<\>]{1,})'); // specify allowed special characters

  /* Check, if string matches length of password: */
  if (!length.test(string)) {
  
    /* Show message: */
    document.getElementById('message').innerHTML = 'Password is very short!';
    document.getElementById('message').style.color = '#000000'; // black
    
  } else {

    /* Check, if string matches conditions for STRONG password (letters + numbers + special characters): */
    if (letters.test(string) && numbers.test(string) && specials.test(string)) {

      /* Show message: */
      document.getElementById('message').innerHTML = 'Password is strong.';
      document.getElementById('message').style.color = '#008000'; // green

    /* Check, if string matches conditions for MEDIUM-STRONG password (letters + numbers): */
    } else if (letters.test(string) && numbers.test(string)) {

      /* Show message: */
      document.getElementById('message').innerHTML = 'Password is medium-strong.';
      document.getElementById('message').style.color = '#FFA500'; // orange

    /* Check, if string matches conditions for MEDIUM-STRONG password (letters + special characters): */
    } else if (letters.test(string) && specials.test(string)) {

      /* Show message: */
      document.getElementById('message').innerHTML = 'Password is medium-strong.';
      document.getElementById('message').style.color = '#FFA500';

    /* Check, if string matches conditions for MEDIUM-STRONG password (numbers + special characters): */
    } else if (numbers.test(string) && specials.test(string)) {

      /* Show message: */
      document.getElementById('message').innerHTML = 'Password is medium-strong.';
      document.getElementById('message').style.color = '#FFA500';

    /* Check, if string matches conditions for WEAK password (letters): */
    } else if (letters.test(string)) {

      /* Show message: */
      document.getElementById('message').innerHTML = 'Password is weak.';
      document.getElementById('message').style.color = '#FF0000';

    /* Check, if string matches conditions for WEAK password (numbers): */
    } else if (numbers.test(string)) {

      /* Show message: */
      document.getElementById('message').innerHTML = 'Password is weak.';
      document.getElementById('message').style.color = '#FF0000';

    /* Check, if string matches conditions for WEAK password (special characters): */
    } else if (specials.test(string)) {

      /* Show message: */
      document.getElementById('message').innerHTML = 'Password is weak.';
      document.getElementById('message').style.color = '#FF0000';

    }
    
  }

}


Prikladám HTML kód, s ktorým tento skript spolupracuje: 

<script type='text/javascript' src='PowerJesus.js'></script>

<script type='text/javascript'>

  /* Call function PowerJesus (): */
  window.setInterval ('PowerJesus ()', 100); // specify function refresh interval

</script>


<span>Enter password:</span>
  
<input id='input' type='text' value='' maxlength='16' />
  
<p><strong>WARNING:</strong> <span id='message' style='color: #999999;'></span></p>


Nechal som to tu pre tých, čo raz možno budú potrebovať to, čo som potreboval teraz ja.
peta
Profil
#2 · Zasláno: 11. 8. 2009, 15:01:18 · Upravil/a: peta
Odpovědět Citovat
Pokud nam chces odkazat na zdrojovy kod, udelej to. Pokud ne, nepokladej otazku, protoze jeji reseni muze byt nemozne bez zkouseni se stejnym kodem, i radkove.

var msg = document.getElementById('message')

a cele toto
document.getElementById('message').innerHTML = 'Password is weak.';
document.getElementById('message').style.color = '#FF0000';

se krasne prepise na
msg.innerHTML = 'Password is weak.';
msg.style.color = '#FF0000';

---
var easy = new RegExp ('^[a-zA-Z]{8,12}$');
var medium = new RegExp ('^[a-zA-Z0-9]{8,12}$');
var hard = new RegExp ('^[a-zA-Z0-9\.\_\$\@\|\\\/]{8,12}$');
tyto 3 vyrazy rikaji, ze tam ma byt vycet znaku, jedno kterych, ze skupiny.
---
var length = new RegExp ('(.{8,12})');
var weak = new RegExp ('([a-zA-Z]{1,})');
var medium = new RegExp ('([0-9]{1,})');
var strong = new RegExp ('([\.\$\@\§\#\*\<\>]{1,})'); // specify all allowed special characters
Tohle zase kontrolu sleduje 1 kterykoliv znak ze skupiny neomezena delka. Proti predchozimu nevidim rozdil, az na to, ze jsi podminky dal kazkadne do sebe a kazdou kontrolujes zvlast pokud nastane predchozi, coz je spravne reseni.
---
To treti je v podstate totez.

var reg1 = new RegExp ('([a-zA-Z])','g');
var reg2 = new RegExp ('([0-9])','g');
var reg3 = new RegExp ('[\.\$\@\§\#\*\<\>]','g');
psw=0;
if (str.lenght>7 && str.lenght<13)
{
psw = 1;
if (reg1.test(str)) {psw++}
if (reg2.test(str)) {psw++}
if (reg3.test(str)) {psw++}
}
switch (psw)
{
case 0: col = '#000000'; text='very bad';
case 1: col = '#008000;'; text='weak';
case 2: col = '#FFA500'; text='strong';
case 3: col = '#FF0000'; text='very strong';
}
document.getElementById('message').innerHTML = text;
document.getElementById('message').style.color = col;

Vyhoda je, ze ti obtiznost naskace pouzitim znaku.
Tve reseni ma tu vadu, ze pokud uzivatel nepouzije cislici, ale pouzije hvezdicku, pak mu oznacis heslo za weak.
Soucasne diky pouzitym reg vyrazum nutis uzivatele pouzit tve znaky. Takze uz nemuze pouzit treba cestinu. mozna by bylo lepsi zmenit to na
('\w','g') //slovotvorne
('\d','g') //cisla
('[\W\D]','g') //negace prvnich dvou
Ale nemam overeno
AM_
Profil
#3 · Zasláno: 11. 8. 2009, 17:50:56
Odpovědět Citovat
1) nepatlal bych vše přes reguláry, obzvlášť délku řetězce:
„if (length.test(string))“
leda pokud se snažíš zbytečně vytěžovat browser klienta. Navíc nechápu, proč délku hesla omezuješ shora na 12 znaků? Omezení zdola chápu, ale shora ne.

2) heslo by se mělo hodnotit při své změně, ne po vteřině - tohle je snížení komfortu a plýtvání výkonem

3) pokud nemáš dotaz, ale jen pocit, že tvůj kód někomu pomůže, bylo by lepší napsat Yuhůovi a nechat to dát rovnou mezi příklady na jakpsatweb, kam taková věc patří, ne do diskuse.
Časová prodleva: 9 dní
PowerJesus
Profil
#4 · Zasláno: 20. 8. 2009, 11:26:13 · Upravil/a: PowerJesus
Odpovědět Citovat
Môj predošlý a jediný príspevok bol niekoľkokrát po sebe upravovaný. Na začiatku som žiadal o pomoc, neskôr som sa k riešeniu dopracoval sám, čo má v praxi ešte väčší význam. Z viacerých fór venovaných podpore webových stránok som sa naučil, že ak človek žiada pomoc a neskôr si to sám dorieši, mal by kódy uvoľniť pre tých, ktorým sa to možno raz zíde. Mne tu nejde o to, aby som robil machra. Navyše, s tým mojím kódom hore by som to ani neskúšal. Obvykle kódim v mojom obľúbenom PHP. S JavaScript-om som doposiaľ pracoval len málokedy a preto som si dal nejaký "challenge" - niečo užitočné zostrojiť, aby som sa novému naučil. Ak nemusím, tak JavaScript nepoužívam. Ale nie je zlé sa niečomu novému priučiť.

peta: Skripty sa dajú stále ďalej a ďalej zjednodušovať. Jo som to proste nechal v pôvodnom stave. Podmienkam porozumie snáď každý, zložitejšie skripty už môžu byť najmä pre úplných začiatočníkov ťažšie na pochopenie.

AM_: V JavaScript-ových funkciách som sa fakt nehrabal. Teda snažil som sa "vyžiť" z toho, s čím som sa doposiaľ stretol. Obmedzenie znakov na určitý maximálny počet tam je asi pre srandu králikov. Je jasné, že čím dlhšie je heslo, tým ťažšie (dlhšie) sa láme. Po pravde, tie hranice si môže každý zvoliť ľubovoľne. Niekde sa priam vyžaduje obmedzenie hesla zhora, niekde nie. Opäť zopakujem, aj pre peta, v JavaScript-ových funkciách som sa nehrabal. Poznám základné onclick, onmouseover a podobné formulárové prkotiny. Neskúšal som, možno existuje aj onchange - to by sadlo ako uliate. A k tretiemu bodu som sa vyjadril v úvode.

Btw, prekvapilo ma, že vôbec niekto zareagoval. A vďaka za pomoc.

S funkciami sa dá krásne pohrať. Neskôr som svoj kód previedol do jednej funkcie, ktorá sa vykonávala v každej podmienke a o dosť to uľahčovalo život.
Časová prodleva: 15 let

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0