JavaScript 및 정규식으로 암호 강도 확인

JavaScript 및 정규식으로 암호 강도 확인

저는 다음을 사용하는 암호 강도 검사기의 좋은 예를 찾기 위해 조사를하고있었습니다. 자바 스크립트정규 표현식 (정규식). 제 직장의 응용 프로그램에서 암호 강도를 확인하기 위해 게시물을 다시 작성하고 사용자에게 매우 불편합니다.

Regex 란 무엇입니까?

정규식은 검색 패턴을 정의하는 일련의 문자입니다. 일반적으로 이러한 패턴은 문자열 검색 알고리즘에서 발견 or 찾아 교체 문자열에 대한 작업 또는 입력 유효성 검사. 

이 기사는 정규 표현식을 가르치는 것이 아닙니다. 정규식을 사용하는 기능은 텍스트에서 패턴을 검색 할 때 개발을 절대적으로 단순화합니다. 또한 대부분의 개발 언어는 정규 표현식 사용을 최적화했습니다. 따라서 문자열을 단계별로 구문 분석하고 검색하는 대신 Regex는 일반적으로 서버와 클라이언트 측에서 훨씬 더 빠릅니다.

나는 내가 찾기 전에 꽤 많이 웹을 검색했습니다. 예를 들어 길이, 문자 및 기호의 조합을 찾는 훌륭한 정규식의 일부입니다. 그러나 코드는 내 취향에 비해 약간 과도하고 .NET에 맞게 조정되었습니다. 그래서 코드를 단순화하고 JavaScript에 넣었습니다. 이를 통해 다시 게시하기 전에 클라이언트 브라우저에서 실시간으로 암호 강도를 확인하고 암호 강도에 대한 피드백을 사용자에게 제공합니다.

비밀번호를 입력하세요

키보드를 누를 때마다 암호가 정규식에 대해 테스트되고 그 아래의 범위에서 사용자에게 피드백이 제공됩니다.




암호 입력

코드는 다음과 같습니다.

그리고, 정규 표현식 코드 길이를 최소화하는 환상적인 작업을 수행하십시오.

  • 더 많은 캐릭터 – 길이가 8 자 미만인 경우.
  • 약한 – 길이가 10 자 미만이고 기호, 대문자, 텍스트의 조합을 포함하지 않는 경우.
  • 중급 – 길이가 10 자 이상이고 기호, 대문자, 텍스트가 조합 된 경우.
  • 강한 - 길이가 14 자 이상이고 기호, 대문자, 텍스트의 조합이있는 경우.

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

비밀번호 요청 강화

Javascript 내에서 암호 구성을 확인하지 않는 것이 중요합니다. 이렇게하면 브라우저 개발 도구를 사용하는 모든 사람이 스크립트를 우회하고 원하는 암호를 사용할 수 있습니다. 플랫폼에 암호를 저장하기 전에 항상 서버 측 검사를 사용하여 암호 강도를 확인해야합니다.

댓글 34

  1. 1
  2. 2

    감사합니다! 감사합니다! 감사합니다! 나는 다른 웹 사이트의 망할 암호 강도 코드로 2 주 동안 속이고 머리를 뽑았다. 당신은 짧고 내가 원하는대로 작동하며 무엇보다도 자바 스크립트 초보자가 쉽게 수정할 수 있습니다! 강도 판정을 캡처하고 강도 테스트를 충족하지 않는 한 양식 게시에서 사용자의 비밀번호를 실제로 업데이트하지 않도록하고 싶었습니다. 다른 사람들의 코드가 너무 복잡하거나 제대로 작동하지 않거나 다른 것입니다. 사랑해! XXXXX

  3. 4

    실제로 코드를 제대로 작성할 수있는 사람들에게 감사합니다.
    Janis와 같은 경험을 가졌습니다.

    이것은 자바 스크립트를 코딩 할 수없는 저와 같은 사람들에게 완벽한 상자에서 바로 작동합니다!

  4. 5
  5. 6

    안녕하세요, 먼저 노력에 감사드립니다. Asp.net에서 이것을 사용하려고 시도했지만 작동하지 않았습니다.

    태그 대신 작동하지 않았습니다. 제안 사항이 있습니까?!

  6. 7

    Nisreen에게 : 강조 표시된 상자의 코드는 잘라 내기 및 붙여 넣기와 함께 작동하지 않습니다. 작은 따옴표가 엉망입니다. 데모 링크의 코드는 괜찮습니다.

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

    "P @ s $ w0rD"는 강력하게 표시되지만 사전 공격으로 상당히 빠르게 크랙됩니다.
    이러한 기능을 전문 솔루션에 배포하려면이 알고리즘을 사전 검사와 결합하는 것이 중요하다고 생각합니다.

  11. 12
  12. 13

    이 작은 코드를 사용해 주셔서 감사합니다. 이제 방문자가 비밀번호를 입력 할 때 비밀번호 강도를 테스트하는 데 사용할 수 있습니다.

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

    누군가 내 말을 듣지 못한 이유를 알 수 있습니다.

    모든 코드를 복사하여 notepad ++에 붙여 넣었지만 전혀 작동하지 않습니까?
    도와주세요 ..

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

    이러한 유형의 "강도 검사기"는 사람들을 매우 위험한 길로 인도합니다. 암호문 길이에 비해 문자 다양성을 중요시하므로 더 짧고 다양한 암호가 길고 덜 다양한 암호보다 강력합니다. 이는 사용자가 심각한 해킹 위협에 직면 할 경우 문제에 빠질 수있는 오류입니다.

    • 25

      동의하지 않아요, 조던! 예제는 단순히 스크립트의 예제로 제시되었습니다. 사람들에게 권장하는 것은 암호 관리 도구를 사용하여 고유 한 모든 사이트에 대해 독립적 인 암호를 만드는 것입니다. 감사!

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

    공유해 주셔서 감사합니다! 우리 웹 사이트에서 암호 강도를 강화하기 위해 노력해 왔으며 이것은 내가 원하는 방식으로 작동했습니다. 정말 고맙습니다!

  29. 33

    당신은 라이브 세이버입니다! 문자열을 왼쪽 오른쪽과 가운데로 구문 분석하고 더 나은 방법이 있다고 생각하고 Regex를 사용하여 코드 조각을 찾았습니다. 내 사이트를 위해 그것을 땜질 할 수 있었다… 당신은 이것이 얼마나 도움이되었는지 전혀 모른다. 더글라스 감사합니다 !!

당신은 어떻게 생각하십니까?

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.