Kontroller adgangskodestyrke med JavaScript og regulære udtryk

Kontroller adgangskodestyrke med JavaScript og regulære udtryk

Jeg undersøgte at finde et godt eksempel på en adgangskodestyringskontrol, der bruger JavaScript og Regelmæssige udtryk (Regex). I applikationen på mit arbejde sender vi et indlæg tilbage for at bekræfte adgangskodestyrken, og det er ret ubelejligt for vores brugere.

Hvad er Regex?

Et regulært udtryk er en sekvens af tegn, der definerer et søgemønster. Normalt bruges sådanne mønstre af strengesøgningsalgoritmer til find or find og udskift operationer på strenge eller til validering af input. 

Denne artikel er bestemt ikke for at lære dig regelmæssige udtryk. Bare ved, at evnen til at bruge Regular Expressions absolut vil forenkle din udvikling, når du søger efter mønstre i tekst. Det er også vigtigt at bemærke, at de fleste udviklingssprog har optimeret brugen af ​​regelmæssigt udtryk ... så i stedet for at analysere og søge strenge trin for trin er Regex typisk meget hurtigere både server og klientside.

Jeg søgte ganske lidt på nettet, inden jeg fandt det et eksempel af nogle gode regulære udtryk, der ser efter en kombination af længde, tegn og symboler. Koden var dog lidt overdreven efter min smag og skræddersyet til .NET. Så jeg forenklede koden og lagde den i JavaScript. Dette gør det til at validere adgangskodestyrken i realtid i klientens browser, før den sendes tilbage ... og giver feedback til brugeren om adgangskodens styrke.

Skriv et kodeord

For hvert slag på tastaturet testes adgangskoden mod det regulære udtryk, og der gives feedback til brugeren i et interval under det.




Indtast adgangskode

Her er koden

Regelmæssige udtryk gør et fantastisk stykke arbejde med at minimere længden af ​​koden:

  • Flere tegn - Hvis længden er under 8 tegn.
  • Svag - Hvis længden er mindre end 10 tegn og ikke indeholder en kombination af symboler, store bogstaver, tekst.
  • Medium - Hvis længden er 10 tegn eller mere og har en kombination af symboler, store bogstaver, tekst.
  • Stærk - Hvis længden er 14 tegn eller mere og har en kombination af symboler, store bogstaver, 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>

Hærdning af din adgangskodeanmodning

Det er vigtigt, at du ikke bare validerer adgangskodekonstruktionen i dit Javascript. Dette vil gøre det muligt for alle med browserudviklingsværktøjer at omgå scriptet og bruge den adgangskode, de ønsker. Du skal ALTID bruge en kontrol på serversiden til at validere adgangskodestyrken, før du gemmer den på din platform.

34 Kommentarer

  1. 1
  2. 2

    TAK SKAL DU HAVE! TAK SKAL DU HAVE! TAK SKAL DU HAVE! Jeg har narre i 2 uger med en forbandet adgangskodestyrke kode fra andre hjemmesider og trukket mit hår ud. Din er kort, fungerer ligesom jeg vil og bedst af alt, let for en javascript-novice at ændre! Jeg ønskede at fange styrkedommen og ikke lade formularen poste for faktisk at opdatere brugerens adgangskode, medmindre den opfyldte styrketesten. Andres kode var for kompliceret eller fungerede ikke rigtigt eller noget andet. Jeg elsker dig! XXXXX

  3. 4

    gudskelov for folk, der faktisk kan skrive et stykke kode ordentligt.
    Havde den samme erfaring som Janis.

    Dette fungerer lige ud af kassen, hvilket er perfekt til folk som mig, der ikke kan kode javascript!

  4. 5
  5. 6

    Hej, først og fremmest tak for din indsats, jeg prøvede at bruge dette med Asp.net, men fungerede ikke, jeg bruger det

    i stedet for tag, og det virkede ikke, nogen forslag ?!

  6. 7

    Til Nisreen: koden i det fremhævede felt fungerer ikke med en cut'n'paste. Det eneste tilbud er ødelagt. Demonstrationslinkets kode er dog fint.

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

    “P @ s $ w0rD” vises ved stærk, selvom det ville blive revnet ret hurtigt med et ordbogsangreb ...
    For at implementere en sådan funktion på en professionel løsning, mener jeg, det er vigtigt at kombinere denne algoritme med en ordbogscheck.

  11. 12
  12. 13

    Tak for denne lille kode, jeg kan nu bruge den til at teste min adgangskodestyrke, når mine besøgende. Indtaster deres adgangskoder,

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

    kan nogen fortælle, hvorfor det ikke fungerede mit ..

    Jeg kopierede al koden og indsatte den i notesblok ++, men den virker slet ikke?
    Vær venlig at hjælpe mig..

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

    Denne type "styrketjekker" fører folk ned ad en meget farlig sti. Det værdsætter karakterdiversitet over adgangssætlængde, hvilket får den til at bedømme kortere, mere forskellige adgangskoder som stærkere end længere, mindre forskellige adgangskoder. Det er en fejlslutning, der får dine brugere i problemer, hvis de nogensinde står over for en alvorlig hackingtrussel.

    • 25

      Jeg er ikke uenig, Jordan! Eksemplet blev simpelthen sat ud som et eksempel på manuskriptet. Min anbefaling til folk er at bruge et adgangskodestyringsværktøj til at oprette uafhængige adgangssætninger til ethvert websted, der er unikt for det. Tak!

  24. 26
  25. 27
  26. 28

    jeg sætter stor pris på, at du er søgt dette mange gange, men til sidst fik jeg dit indlæg og er virkelig forbløffet. TAK SKAL DU HAVE

  27. 29
  28. 31
  29. 33

    Du er en live sparer! Jeg analyserede strenge til højre og i midten og troede, at der er en bedre måde, og fandt dit stykke kode ved hjælp af Regex. Var i stand til at rode med det til min side ... Du har ingen idé om, hvor meget dette hjalp. Tak så meget Douglas !!

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.