Sjekk passordstyrke med JavaScript og regulære uttrykk

Sjekk passordstyrke med JavaScript og regulære uttrykk

Jeg forsket på å finne et godt eksempel på en passordstyrkekontroll som bruker Javascript og Vanlig uttrykk (Regex). I applikasjonen på jobben min gjør vi et innlegg tilbake for å bekrefte passordstyrken, og det er ganske upraktisk for brukerne våre.

Hva er Regex?

Et vanlig uttrykk er en sekvens av tegn som definerer et søkemønster. Vanligvis brukes slike mønstre av strengesøkealgoritmer for finne or Finn og erstatt operasjoner på strenger, eller for validering av inndata. 

Denne artikkelen skal definitivt ikke lære deg vanlige uttrykk. Bare vet at muligheten til å bruke Regular Expressions vil absolutt forenkle utviklingen din når du søker etter mønstre i tekst. Det er også viktig å merke seg at de fleste utviklingsspråk har optimalisert bruk av vanlig uttrykk ... så i stedet for å analysere og søke i strenger trinnvis, er Regex vanligvis mye raskere både server og klientside.

Jeg søkte ganske mye på nettet før jeg fant det et eksempel av noen gode regulære uttrykk som ser etter en kombinasjon av lengde, tegn og symboler. Koden var imidlertid litt overdreven for min smak og skreddersydd for .NET. Så jeg forenklet koden og la den i JavaScript. Dette gjør at den validerer passordstyrken i sanntid i klientens nettleser før den sendes tilbake ... og gir tilbakemelding til brukeren om passordets styrke.

Skriv et passord

For hvert tastetrykk testes passordet mot det vanlige uttrykket, og tilbakemelding blir gitt til brukeren i et spenn under det.




Skriv inn passord

Her er koden

De Vanlig uttrykk gjør en fantastisk jobb med å minimere kodenes lengde:

  • Flere tegn - Hvis lengden er under 8 tegn.
  • Svak - Hvis lengden er mindre enn 10 tegn og ikke inneholder en kombinasjon av symboler, store bokstaver, tekst.
  • Medium - Hvis lengden er 10 tegn eller mer, og har en kombinasjon av symboler, store bokstaver, tekst.
  • Sterk - Hvis lengden er 14 tegn eller mer, og har en kombinasjon av symboler, store bokstaver, tekst.

<script language="javascript">
    function passwordChanged() {
        var strength = document.getElementById('strength');
        var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{8,}).*", "g");
        var pwd = document.getElementById("password");
        if (pwd.value.length == 0) {
            strength.innerHTML = 'Type Password';
        } else if (false == enoughRegex.test(pwd.value)) {
            strength.innerHTML = 'More Characters';
        } else if (strongRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:green">Strong!</span>';
        } else if (mediumRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:orange">Medium!</span>';
        } else {
            strength.innerHTML = '<span style="color:red">Weak!</span>';
        }
    }
</script>
<input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
<span id="strength">Type Password</span>

Forherde passordforespørselen

Det er viktig at du ikke bare validerer passordkonstruksjonen i Javascript. Dette vil gjøre det mulig for alle med nettleserutviklingsverktøy å omgå skriptet og bruke det passordet de ønsker. Du bør ALLTID bruke en sjekk på serversiden for å validere passordstyrken før du lagrer den på plattformen.

34 Kommentarer

  1. 1
  2. 2

    TAKK SKAL DU HA! TAKK SKAL DU HA! TAKK SKAL DU HA! Jeg har tullet rundt i 2 uker med en jævla passordstyrkekode fra andre nettsider og trukket ut håret. Din er kort, fungerer akkurat som jeg vil, og best av alt, lett for en javascript-nybegynner å endre! Jeg ønsket å fange styrkedommen og ikke la skjemaet legge ut for å faktisk oppdatere brukerens passord med mindre det oppfylte styrketesten. Andres kode var for komplisert eller fungerte ikke riktig eller noe annet. Jeg elsker deg! XXXXX

  3. 4

    takk gud for folk som faktisk kan skrive et stykke kode ordentlig.
    Hadde samme erfaring som Janis.

    Dette fungerer rett ut av esken som er perfekt for folk som meg som ikke kan kode javascript!

  4. 5
  5. 6

    Hei, først og fremst tusen takk for innsatsen, jeg prøvde å bruke dette med Asp.net men fungerte ikke, jeg bruker

    i stedet for tag, og det fungerte ikke, noen forslag?!

  6. 7

    Til Nisreen: koden i den uthevede boksen fungerer ikke med en cut'n'paste. Enkeltsitatet er rotete. Koden til demonstrasjonslenken er imidlertid fin.

  7. 8
  8. 9
  9. 10
  10. 11

    "P@s$w0rD" viser sterkt, selv om det ville bli knekt ganske raskt med et ordbokangrep...
    For å distribuere en slik funksjon på en profesjonell løsning, tror jeg det er viktig å kombinere denne algoritmen med en ordboksjekk.

  11. 12
  12. 13

    Takk for denne lille koden, jeg kan nå bruke den til å teste passordstyrken min når de besøkende skriver inn passordene sine,

  13. 14
  14. 15
  15. 16
  16. 17
  17. 18
  18. 19

    kan noen fortelle hvorfor det ikke fungerte mitt..

    jeg kopierte all koden og limte den inn i notepad++, men det fungerer ikke i det hele tatt?
    vennligst hjelp meg ..

  19. 20
  20. 21
  21. 22
  22. 23
  23. 24

    Denne typen "styrkesjekker" fører folk ned på en veldig farlig vei. Den verdsetter karaktermangfold over passordfraselengden, noe som fører til at den vurderer kortere, mer varierte passord som sterkere enn lengre, mindre forskjellige passord. Det er en feilslutning som vil få brukerne dine i problemer hvis de noen gang står overfor en alvorlig hacking-trussel.

    • 25

      Jeg er ikke uenig, Jordan! Eksemplet ble ganske enkelt lagt ut som et eksempel på manuset. Min anbefaling til folk er å bruke et passordadministrasjonsverktøy for å lage uavhengige passordfraser for ethvert nettsted som er unikt for det. Takk!

  24. 26
  25. 27
  26. 28

    Jeg setter veldig pris på at du har søkt etter dette mange ganger, men til slutt fikk jeg innlegget ditt og er virkelig overrasket. TAKK SKAL DU HA

  27. 29
  28. 31
  29. 33

    Du er en livesparer! Jeg analyserte strenger til venstre til høyre og i midten og tenkte at det er en bedre måte og fant kodebiten din ved å bruke Regex. Var i stand til å tinkle med det for nettstedet mitt ... Du aner ikke hvor mye dette hjalp. Tusen takk Douglas!!

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.