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 søknaden på mitt arbeid sender 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 er definitivt ikke for å lære deg vanlige uttrykk. Bare vet at muligheten til å bruke Regular Expressions absolutt vil 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 flotte 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 noen tilbakemeldinger 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 hvilket passord de ønsker. Du bør ALLTID bruke en sjekk på serversiden for å validere passordstyrken før du lagrer den på plattformen din.

34 Kommentarer

  1. 1
  2. 2

    TAKK SKAL DU HA! TAKK SKAL DU HA! TAKK SKAL DU HA! Jeg har tullet i to uker med forbannet passordstyrkekode fra andre nettsteder og trukket håret ut. 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 poste for å faktisk oppdatere brukerens passord med mindre det oppfyllte 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, noe som er perfekt for folk som meg som ikke kan kode javascript!

  4. 5
  5. 6

    Hei, først og fremst takk mye for din innsats, 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. Enkelt sitatet er ødelagt. Demonstrasjonskoblingens kode er skjønt bra.

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

    “P @ s $ w0rD” viser seg sterkt, selv om det ville bli sprukket ganske raskt med et ordboksangrep ...
    For å distribuere en slik funksjon på en profesjonell løsning, tror jeg det er viktig å kombinere denne algoritmen med en ordbokskontroll.

  11. 12
  12. 13

    Takk for denne lille koden. Jeg kan nå bruke den til å teste passordets styrke når de besøkende legger 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 notisblokk ++, men den fungerer ikke i det hele tatt?
    vennligst hjelp meg ..

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

    Denne typen "styrkekontroll" fører folk ned på en veldig farlig vei. Den verdsetter karakterdiversitet over passfraser, noe som fører til at den vurderer kortere, mer forskjellige passord som sterkere enn lengre, mindre forskjellige passord. Det er en feilslutning som vil få brukerne dine i trøbbel hvis de noen gang møter en alvorlig hackingtrussel.

    • 25

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

  24. 26
  25. 27
  26. 28

    jeg setter stor pris på at det er søkt etter dette mange ganger, men til slutt fikk jeg innlegget ditt og er veldig forbauset. TAKK SKAL DU HA

  27. 29
  28. 31
  29. 33

    Du er en livsparer! Jeg analyserte strengene til høyre og midt og tenkte at det er en bedre måte og fant koden din ved hjelp av Regex. Klarte å fikle 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.