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

Posted Oct 19, 2022

By ayaysir

7 min read

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

http://www.giphy.com/gifs/u5vGjo2NTGOhol54FF

위 움짤에서 특수문자, 영문 대소문자, 숫자들을 적절히 섞어서 안전한 패스워드라면 초록색의 꽉찬 그래프로 표시하고, 덜 안전할수록 그래프 진행 상황이 낮은 상태의 빨간색 또는 주황색으로 표시됩니다. 추가적으로 패스워드 길이도 검사해서 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값의 변경에 따라 애니메이션을 추가합니다.
- width를 0.5초 간격으로 움직입니다.

3) 자바스크립트 추가

밑부분에 자바스크립트 를 추가합니다. ``` 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` 값이 조건을 만족한 경우 `strength`에 `1`을 더하고, 아니라면 `0`을 더합니다. - `strengthBar.value` - 프로그레스 바의 `value`에 `strength`를 할당합니다. 프로그레스 바의 `maxValue`는 `4` 로 설정되어 있으므로 진행상황이 `value/4` 의 비율로 프로그레스 바에 할당됩니다. - `switch`문 - `strength` 값을 기준으로 프로그레스 바의 색을 변경합니다. - `strengthBar.style.setProperty("--c", "red")` 를 사용하면 어느 `pseudo-class`에 속했는지 상관없이 `CSS` 변수 `--c`의 값을 변경할 수 있습니다. - `if`문 - 6자 미만이거나 15자 초과인 경우 경고 메시지를 표시하고, 프로그레스 바 색상을 빨간색으로 지정합니다.

DevLog, JavaScript

This post is licensed under CC BY 4.0 by the author.