Controleer de wachtwoordsterkte met JavaScript en reguliere expressies

Controleer de wachtwoordsterkte met JavaScript en reguliere expressies
Leestijd: 2 minuten

Ik deed wat onderzoek naar het vinden van een goed voorbeeld van een wachtwoordsterkte-checker die gebruikmaakt van JavaScript en Normale uitdrukkingen (Regex). In de applicatie op mijn werk doen we een bericht terug om de wachtwoordsterkte te verifiëren en het is behoorlijk onhandig voor onze gebruikers.

Wat is Regex?

Een reguliere expressie is een reeks tekens die een zoekpatroon definiëren. Meestal worden dergelijke patronen gebruikt door algoritmen voor het zoeken naar tekenreeksen vinden or zoek en vervang bewerkingen op strings, of voor invoervalidatie. 

Dit artikel is zeker niet bedoeld om je reguliere uitdrukkingen te leren. Weet gewoon dat de mogelijkheid om reguliere expressies te gebruiken uw ontwikkeling absoluut zal vereenvoudigen bij het zoeken naar patronen in tekst. Het is ook belangrijk op te merken dat de meeste ontwikkelingstalen het gebruik van reguliere expressies hebben geoptimaliseerd ... dus in plaats van strings stap voor stap te parseren en te zoeken, is Regex doorgaans veel sneller, zowel aan de server- als aan de clientzijde.

Ik heb behoorlijk wat op internet gezocht voordat ik vond Een voorbeeld van enkele geweldige reguliere expressies die zoeken naar een combinatie van lengte, tekens en symbolen. De code was echter een beetje overdreven naar mijn smaak en afgestemd op .NET. Dus ik heb de code vereenvoudigd en in JavaScript gezet. Dit zorgt ervoor dat het de wachtwoordsterkte in real-time valideert in de browser van de klant voordat het terug wordt geplaatst… en geeft de gebruiker wat feedback over de sterkte van het wachtwoord.

Type een wachtwoord

Bij elke slag van het toetsenbord wordt het wachtwoord getoetst aan de reguliere expressie en vervolgens wordt er feedback aan de gebruiker gegeven in een reeks eronder.




Typ je wachtwoord

Hier is de code

De Normale uitdrukkingen doe fantastisch werk door de lengte van de code te minimaliseren:

  • Meer karakters - Als de lengte minder is dan 8 tekens.
  • Zwak - Als de lengte minder is dan 10 tekens en geen combinatie van symbolen, hoofdletters en tekst bevat.
  • Medium - Als de lengte 10 tekens of meer is en een combinatie van symbolen, hoofdletters en tekst bevat.
  • Sterk - Als de lengte 14 tekens of meer is en een combinatie van symbolen, hoofdletters en tekst bevat.

<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>

Uw wachtwoordverzoek versterken

Het is essentieel dat u niet alleen de wachtwoordconstructie binnen uw Javascript valideert. Dit zou iedereen met browserontwikkelingstools in staat stellen om het script te omzeilen en het gewenste wachtwoord te gebruiken. U moet ALTIJD een servercontrole gebruiken om de wachtwoordsterkte te valideren voordat u deze op uw platform opslaat.

29 Reacties

  1. 1
  2. 2

    DANK JE! DANK JE! DANK JE! Ik heb 2 weken voor de gek gehouden met verdomde wachtwoordsterkte-code van andere websites en mijn haar uitgetrokken. De jouwe is kort, werkt precies zoals ik wil en het beste van alles, gemakkelijk voor een javascript-beginner om aan te passen! Ik wilde het oordeel over de sterkte vastleggen en het formulier niet laten plaatsen om het wachtwoord van de gebruiker daadwerkelijk bij te werken, tenzij het aan de sterktetest voldeed. De code van andere mensen was te ingewikkeld of werkte niet goed of iets anders. Ik hou van jou! XXXXX

  3. 4

    godzijdank voor mensen die daadwerkelijk een stukje code goed kunnen schrijven.
    Had dezelfde ervaring als Janis.

    Dit werkt direct uit de doos, wat perfect is voor mensen zoals ik die javascript niet kunnen coderen!

  4. 5
  5. 6

    Hallo, allereerst heel erg bedankt voor je inspanningen, ik heb geprobeerd dit te gebruiken met Asp.net maar werkte niet, ik gebruik

    in plaats van tag, en het werkte niet, suggesties ?!

  6. 7

    Voor Nisreen: de code in het gemarkeerde vak werkt niet met een cut'n'paste. Het enkele citaat is in de war. De code van de demonstratielink is echter prima.

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

    "P @ s $ w0rD" shows op sterk, hoewel het vrij snel zou worden gekraakt met een dictatuuraanval ...
    Om een ​​dergelijke functie op een professionele oplossing in te zetten, vind ik het belangrijk om dit algoritme te combineren met een woordenboekcontrole.

  11. 12
  12. 13

    Bedankt voor deze kleine code, ik kan het nu gebruiken om mijn wachtwoordsterkte te testen wanneer mijn bezoekers hun wachtwoord invoeren,

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

    kan iemand vertellen, waarom het niet de mijne werkte ...

    ik heb alle code gekopieerd en in notepad ++ geplakt, maar het werkt helemaal niet?
    Help me alstublieft..

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

    Dit type "krachtchecker" leidt mensen op een zeer gevaarlijk pad. Het waardeert karakterdiversiteit boven de lengte van de wachtwoordzin, waardoor het kortere, meer diverse wachtwoorden als sterker beoordeelt dan langere, minder diverse wachtwoorden. Dat is een misvatting die uw gebruikers in de problemen brengt als ze ooit met een serieuze hackdreiging worden geconfronteerd.

    • 25

      Ik ben het niet oneens, Jordan! Het voorbeeld werd gewoon naar voren gebracht als een voorbeeld van het script. Mijn aanbeveling voor mensen is om een ​​hulpprogramma voor wachtwoordbeheer te gebruiken om onafhankelijke wachtwoordzinnen te maken voor elke site die er uniek voor is. Bedankt!

  24. 26
  25. 27
  26. 28
  27. 29

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.