자바스크립트: 패스워드 안전도(강도; Strength) 표시하기
아래와 같이 입력받은 패스워드가 얼마나 안전한지 Progress Bar로 표시하는 예제입니다. 강력한 보안이 요구되는 서비스에서 패스워드가 털릴 위험이 있는지 사전 체크하는 용도로 쓰입니다.
위 움짤에서 특수문자, 영문 대소문자, 숫자들을 적절히 섞어서 안전한 패스워드라면 초록색의 꽉찬 그래프로 표시하고, 덜 안전할수록 그래프 진행 상황이 낮은 상태의 빨간색 또는 주황색으로 표시됩니다. 추가적으로 패스워드 길이도 검사해서 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) 자바스크립트 추가
<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.forEachregexes배열을 순회하며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자 초과인 경우 경고 메시지를 표시하고, 프로그레스 바 색상을 빨간색으로 지정합니다.
