간단한 비밀번호 강도 검사기를 구축하십시오

대부분의 보안 전문가가 말할 수 있듯이 사용자는 항상 가장 약한 링크입니다. 가장 안전한 시스템조차도 사용자가 매우 악의가없는 비밀번호를 선택할 때 취약합니다. 이를 염두에두고, 최근의 추세는 비밀번호의 강점에 대해 사용자에게 빠른 피드백을 제공하여 사용자가 비밀번호를 확장하거나 수정하여보다 안전하게 만들 수 있습니다. 오늘날 우리는 jQuery 라이브러리, 정규 표현식, 기본 비밀번호 검사기를 만들기 위해 매우 간단한 알고리즘을 만들 것입니다. 관심 있는? 바로 시작합시다! 오늘날 우리가 구축하려는 것의 데모는 다음과 같습니다.

디자인 목표 이 특정 기능에 대한 설계 목표는 비교적 작습니다. 비밀번호의 강점에 대한 시각적 피드백은 피드백을 제공합니다. 이것은 강도를 테스트하기 위해 버튼을 클릭하지 않음을 의미합니다.

트리거 이벤트는 키보드 이벤트가 될 수 있습니다. 입력 상자의 keyup > 이벤트를 선택했습니다.

이벤트 핸들러가 입력을 확인하지만 다른 모든 것을 개별 도우미 방법으로 위임하십시오.

헬퍼 방법은 입력을 구문 분석하고 결과를 계산하고 인쇄하는 것이 헬퍼 핸들러가 더 크지는 않습니다. 예상되는 최소값은 유효하지 않은 항목에서 CPU 사이클을 낭비하지 않습니다.
다른 모든 일이 필요한 경우 이벤트 핸들러로의 반환 제어.
알고리즘
• 이 글을 쓰고 간결하고 접근하기 위해 매우 기본적인 알고리즘을 사용하기로 결정했습니다. 알고리즘은 문자열을 분석하여 여분의 길이에 대한 보너스를 제공하고 숫자, 기호 및 대문자를 사용하고 문자 또는 숫자 전용 입력에 대한 처벌을 제공합니다. 우리는 기사의 범위를 벗어나기 때문에 사전에 대한 입력을 확인하는 것을 보지 않을 것입니다.
먼저, 입력 문자열의 길이를 확인합니다. 최소 길이보다 큰 경우 기본 점수 50을 제공하십시오. 그렇지 않으면 0을 만들어냅니다. 다음으로, 문자열의 각 문자를 반복하고 기호, 숫자 또는 대문자인지 확인하십시오. 그렇다면, 그것을 기록하십시오.
• 그런 다음 문자열이 권장되는 최소값에 몇 개의 추가 문자 수를 확인하고 각 문자에 대해 보너스를 부여하십시오. 또한 문자열에 대문자, 숫자 및 기호 또는 세 가지 모두의 조합이 포함 된 경우 보너스를 부여하십시오. 문자열에 소문자 나 숫자가 포함되어 있는지 확인하고, 그렇다면,

  에 대해서만 숫자를 추가하고 그에 따라 비밀번호의 강도를 결정하고 그에 따라 비밀번호의 강도를 결정하십시오. 이는 알고리즘의 길고 부족한 것입니다. 매우 복잡하지는 않지만 많은 나쁜 암호를 포착 할 것입니다. 코드에서 볼 수 있으면 이것을 더 잘 이해할 수 있습니다.

  코어 마크 업

  데모 페이지의 HTML 마크 업은 다음과 같습니다. div id의 ID가있는 ID가있는 id 는

  클래스의 ID가있는 요소가있는 요소를 보았습니다. 필요한 기능을 코딩하기 시작하십시오. 우리는 jQuery를 광범위하게 사용합니다. 필요한 경우 Google의 CDN에 자유롭게 연결하십시오.

  변수 및 이벤트 처리

  많은 숫자 저글링이 계속되므로 값을 유지하려면 많은 변수가 필요합니다. 이것은 프로덕션 코드가 아닌 데모이기 때문에 변수를 글로벌로 선언하고 내부적으로 선언 한 다음 기능으로 전달하는 대신 헬퍼 방법을 통해 액세스하기로 결정했습니다.

  우리는 세 가지 상수를 가지고 있습니다. 입력

  요소와 num

  <div id="container"><br><br>  <h1>A simple password strength checker</h1><br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p><br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p><br><br>  <div class="block"><br>    <input id="password" /><br>    <div id="complexity" class="default">Enter a random value</div><br>  </div><br><br>  <div class="block"><br>    <div id="results" class="default">Breakdown of points</div><br>    <div id="details"></div><br>    <p class="message"></p><br>  </div><br><br></div><br>

  로그인 후 복사

  로그인 후 복사

  로그인 후 복사

  라는 첫 번째는 추가 문자, 대문자 문자, 숫자 및 기호의 수를 보유합니다. 우리는 NUM

  객체라고하는 두 번째 객체에 대해 동일한 작업을 수행하는 반면, checkval 함수는 암호 요소가있을 때마다 checkVal 함수가 호출됩니다. 이벤트 핸들러 이벤트 핸들러 콜백 함수의 코드를 작성하여 시작하겠습니다. 먼저 사용자가 입력 한 비밀번호를 얻은 다음 outputresult () 함수 내에서 변수 초기화를 수행하여 계산 된 계산을 이해합니다. 나중에 어떻게 작동하는지 알게 될 것입니다.

  입력 분석

  .default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

  로그인 후 복사

  로그인 후 복사

  이제 Match () 메소드를 정의하면 정규 표현식과 문자열을 일치시킬 수 있습니다. 정규 표현식을 처음 사용하는 경우 꼭 알아야 할 정규 표현식에 대한 Vasili의 위대한 기사를 읽는 것이 좋습니다.

  다음은 입력 문자열의 길이와 지정된 최소 비밀번호 길이의 차이를 결정해야합니다. 이것은 우리에게 과도한 수의 캐릭터를 제공합니다.

  그런 다음 문자열에 대문자, 숫자 및 기호가 있는지 확인합니다. 그렇다면 보너스를 부여하십시오. 또한 두 가지 조합이 있는지 확인하고 그렇다면 더 작은 보너스를 부여합니다.

  마지막으로, 우리는 문자열이 평평한 지 여부를 확인합니다 : 소문자 만 포함되어 있는지 또는 숫자 만 포함되어 있는지 확인합니다. 우리는 이것을 정규 표현으로 확인하고, 그렇다면,이 관행의 비밀번호를 불평합니다.

  복잡성을 계산하는 것은 복잡성을 계산하는 것이 우리가 변수에 할당 한 값을 간단하게 추가하고 곱해야하기 때문에 비교적 쉽습니다. 초과 캐릭터 수와 승수의 제품에 기본 점수를 추가합니다. 우리는 대문자, 숫자 및 기호에 대해서도 동일합니다. 그런 다음 조합에 대한 보너스를 추가하고, 현이 평평한 경우 페널티를 추가합니다.

  UI

  업데이트 모든 계산이 우리 뒤에 있기 때문에 UI를 업데이트하여 변경 사항을 반영 할 수 있습니다. 각 상태는 다음과 같습니다.

  여기서는 두 가지 함수를 정의 할 것입니다. div 라는 주요 함수, 제거 할 클래스 및 클래스가 추가 될 클래스. Default

  클래스라는 헬퍼 함수는 배경색을 원래 검은 색으로 변경합니다.

  <div id="container"><br><br>  <h1>A simple password strength checker</h1><br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p><br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p><br><br>  <div class="block"><br>    <input id="password" /><br>    <div id="complexity" class="default">Enter a random value</div><br>  </div><br><br>  <div class="block"><br>    <div id="results" class="default">Breakdown of points</div><br>    <div id="details"></div><br>    <p class="message"></p><br>  </div><br><br></div><br>

  로그인 후 복사

  로그인 후 복사

  로그인 후 복사

  지정된 최소 길이보다 낮 으면 그에 따라 텍스트를 변경하고 약한

  . 각 등급의 기준 점수를 자유롭게 변경하십시오. 나는 데모를 얻기 위해 비과학적인 값을 넣었습니다.

  세부적인 고장

  메인 결과가 업데이트 된 상태에서 지금 통계를 업데이트 할 수 있습니다.

  이 부분은 외관만큼 혼란스럽지 않습니다. 자세한 결과에 대한 개별 값을 업데이트하는 대신 컨테이너의 완전한 HTML 값을 업데이트하는 데 의지했습니다. 이 상자의 수가 추가 될 때 느려질 것임을 알고 있지만 각 요소에 개별적으로 액세스 한 다음 작은 데모의 값을 업데이트하는 것이 다소 비생산적인 것처럼 보입니다. 이것은 세부 사항을 즉시 업데이트 할 수 있도록 몇 가지 변수를 내부에 배치 한 것을 제외하고는 일반 HTML을 요소에 주입하는 것과 같습니다. 각 값은 초기 값 할당에만 유용하지 않습니다. 실제로 모든 Analyzestring () 함수 후에 점수 및 페널티 값을 재설정하는 데 도움이되며, 당신은 갈 수 있습니다. .

  <div id="container"><br><br>  <h1>A simple password strength checker</h1><br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p><br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p><br><br>  <div class="block"><br>    <input id="password" /><br>    <div id="complexity" class="default">Enter a random value</div><br>  </div><br><br>  <div class="block"><br>    <div id="results" class="default">Breakdown of points</div><br>    <div id="details"></div><br>    <p class="message"></p><br>  </div><br><br></div><br>

  로그인 후 복사

  로그인 후 복사

  로그인 후 복사

  여기서 무슨 일이 일어나고 있는지 보자. 우리는 전체 암호를 소문자로 변환하는 것으로 시작합니다. 그 후, 우리는 그것을 크기

  속성으로 변환하여 고유 한 문자의 수를 얻습니다. 고유 한 문자의 수가 3보다 작거나 같으면 Analyzestring () 함수의 값을 반복 패턴을 확인합니다. 이것은 REGEX에 의존하고 3 개 이상의 영숫자 문자 시퀀스가 ​​암호에서 반복되는지 확인합니다. checkRepetition () 함수 하단에 다음 코드를 추가 할 것입니다. 문자.

  위의 이미지에서는 캐릭터 시퀀스를 반복하는 문제를 성공적으로 다루었다는 것을 알 수 있습니다. 그러나 비밀번호 강도 검사기의 또 다른 한계의 예를 제시했습니다.  당신은

  pa $$ w0rd $ 가 보안 비밀번호로 나타나는 반면 실제로는 곧 깨질 것임을 알 수 있습니다. 이것은 여기에서 알고리즘의 단순성 때문입니다. 우리는 캐릭터 교체 또는 그 문제에 대한 일반적인 비밀번호 또는 패턴을 확인하지 않습니다. 그러한 일을하는 것은이 튜토리얼의 어려움을 증가시키면서 접근성을 줄이는 동시에이 특정 쓰기를 원하지 않았습니다.

  .default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

  로그인 후 복사

  로그인 후 복사

  사전에 대한 입력을 찾는 것은 실제로이 기사의 범위를 벗어나거나 클라이언트쪽에 다운로드하거나 서버 측 시스템에 연결해야합니다. 다시 말하지만, 이번에는 모두 두 가지를 피하고 싶었습니다.

  결론 test() 그리고 당신은 다음과 같습니다. 사용자 친화적 인 기능을 추가하는 방법, 방금 입력 한 비밀번호의 강점을 프로젝트에 알리는 능력. 바라건대이 튜토리얼이 흥미 로웠기를 바랍니다. 이것은 당신에게 유용했습니다. 프로젝트의 다른 곳 에서이 코드를 재사용하십시오!

  

  이 게시물은 Monty Shokeen의 기여로 업데이트되었습니다. Monty는 튜토리얼을 작성하고 새로운 JavaScript 라이브러리에 대해 배우는 것을 좋아하는 풀 스택 개발자입니다.