자바스크립트: 패스워드 안전도(강도; Strength) 표시하기

 

아래와 같이 입력받은 패스워드가 얼마나 안전한지 Progress Bar로 표시하는 예제입니다. 강력한 보안이 요구되는 서비스에서 패스워드가 털릴 위험이 있는지 사전 체크하는 용도로 쓰입니다.

Animated GIF - Find & Share on GIPHY

위 움짤에서 특수문자, 영문 대소문자, 숫자들을 적절히 섞어서 안전한 패스워드라면 초록색의 꽉찬 그래프로 표시하고, 덜 안전할수록 그래프 진행 상황이 낮은 상태의 빨간색 또는 주황색으로 표시됩니다. 추가적으로 패스워드 길이도 검사해서 6자 미만이거나 15자 초과인 경우에는 안전도 여부에 상관없이 그래프를 빨간색으로 표시합니다.

 

이 예제에서 사용된 패스워드 안전도의 기준은 다음과 같습니다.

  • 영문 소문자가 포함되었는가?
  • 영문 대문자가 포함되었는가?
  • 숫자가 포함되었는가?
  • 특수문자가 포함되었는가?

위 기준을 충족한 개수를 따져서 1개 이하는 위험(빨간색), 2~3개는 보통(주황색), 4개 전부 충족하면 안전한 패스워드(초록색)라고 기준을 정하겠습니다.

 

1) HTML 코드를 작성합니다.

<body>
    <form>
        <input type="password" id="password" autocomplete="off">
        <progress max="4" value="0" id="meter"></progress>
    </form>
    <div class="textbox"></div>
    ....
</body>
  • <progress>
    • HTML5에서 지원하는 프로그레스 바 요소입니다.

 

2) 프로그레스 바의 CSS를 작성합니다.

#meter {
    appearance: none;
}
#meter::-webkit-progress-bar {
    background: #f0f0f0;
    border-radius: 10px;
}
#meter::-webkit-progress-value {
    border-radius: 10px;
    background: var(--c, red);
}
#meter[value]::-webkit-progress-value {
    transition: width 0.5s;
}
  • appearance: none;
    • 기존 프로그레스바 스타일을 초기화시킵니다.
  • ::-webkit-progress-bar
    • 프로그레스 바에서 배경이 되는 부분입니다.
    • 배경색으로 회색(#f0f0f0)을 추가합니다.
    • 프로그레스 바 요소는 엔진별로 다르게 작동하기 떄문에 웹킷 엔진을 위한 접두어가 추가되었습니다.
  • ::-webkit-progress-value
    • 프로그레스 바에서 진행 바의 부부입니다.
  • var(--c, red)
    • CSS 변수를 사용하여 배경색을 지정합니다. 그 이유는 의사 클래스(pseudo-class)의 속성은 JS로 접근하기 어렵기 때문에 변수화해서 JS에서도 접근 및 변경이 가능하게 하도록 하기 위함입니다.
    • --c라는 사용자 정의 이름을 사용하고, 기본값으로 빨간색(red)를 지정합니다.
    • JS에서 element.style.setProperty("--c", "green") 로 해당 CSS 변수를 변경할 수 있습니다.
  • #meter[value]::-webkit-progress-value
    • 프로그레스 값의 value값의 변경에 따라 애니메이션을 추가합니다.
    • width0.5초 간격으로 움직입니다.

 

3) 자바스크립트 추가

<body> 밑부분에 자바스크립트 <script> … </script> 를 추가합니다.

const password = document.querySelector("#password")
const strengthBar = document.querySelector("#meter")
var display = document.querySelector(".textbox")

password.addEventListener("keyup", function() {
    checkPassword(password.value);
});
  • HTML 요소를 불러옵니다.
  • password 필드에서 keyup 이벤트가 발생할 때마다 checkPassword(password.value)를 호출합니다.

 

비밀번호 안전도를 검사하는 checkPassword 함수를 추가합니다.

function checkPassword(password) {

    let strength = 0
    const regexes = [
        /[a-z]+/,
        /[A-Z]+/,
        /[0-9]+/,
        /[$@#&!]+/,
    ]

    regexes.forEach((regex, index) => {
        strength += password.match(regex) ? 1 : 0
    })
    
    strengthBar.value = strength

    switch(strength) {
        case 1:
        strengthBar.style.setProperty("--c", "red")
        break
        case 2:
        case 3:
        strengthBar.style.setProperty("--c", "orange")
        break
        case 4:
        strengthBar.style.setProperty("--c", "green")
        break
    }
    
    if (password.length < 6) {
        display.textContent = "minimum number of characters is 6"
        strengthBar.style.setProperty("--c", "red")
    } else if (password.length > 15) {
        display.textContent = "maximum number of characters is 15"
        strengthBar.style.setProperty("--c", "red")
    } else {
        display.textContent = ""
    }
}
  • strength
    • 패스워드 안전도 등급으로 범위는 0~4입니다.
  • regexes
    • 정규표현식을 이용해 패스워드를 검사하며, 글 상단에 언급한 각 조건을 배열로 저장하였습니다.
  • regexes.forEach
    • regexes 배열을 순회하며 password 값이 조건을 만족한 경우 strength1을 더하고, 아니라면 0을 더합니다.
  • strengthBar.value
    • 프로그레스 바의 valuestrength를 할당합니다. 프로그레스 바의 maxValue4 로 설정되어 있으므로 진행상황이 value/4 의 비율로 프로그레스 바에 할당됩니다.
  • switch
    • strength 값을 기준으로 프로그레스 바의 색을 변경합니다.
    • strengthBar.style.setProperty("--c", "red") 를 사용하면 어느 pseudo-class에 속했는지 상관없이 CSS 변수 --c의 값을 변경할 수 있습니다.
  • if
    • 6자 미만이거나 15자 초과인 경우 경고 메시지를 표시하고, 프로그레스 바 색상을 빨간색으로 지정합니다.

 

문의 | 코멘트 또는 yoonbumtae@gmail.com


카테고리: WEB: Frontend


0개의 댓글

답글 남기기

Avatar placeholder

이메일 주소는 공개되지 않습니다.

계산결과를 입력해주세요 (스팸댓글 방지용) 64 + = 67