[JS] 자판 배열에 따른 가입 조건문 구현하기

회원가입 조건문을 만들 때 비밀번호 보안을 위해 키보드 배열에 따른

3개의 연속된 문자를 사용하지 못하는 조건문이 필요했고, JS로 구현해 보았습니다.  

 

 

위 이미지와 같이, 사용자가 가장 많이 사용하는 문자 조합인 123, qwe, asd ,zxc 등 간단한 조합을 방지하는 기능을 구현해 보았습니다.

 

코드

const pwChk = (value) => {
    // 키보드 배열 조건
    const keyboard = ["1234567890", "qwertyuiop", "asdfghjkl", "zxcvbnm"];
	
    for (let i = 0; i < value.length-2; i++) {
        const sliceValue = value.substring(i, i + 3);
		
        // 모든 조건을 한번씩 순회
        if (keyboard.some((code) => code.includes(sliceValue))) {
            return true;
        }
    }
	
    // 모든 조건을 넘겼을 때
    return false;
}

일단 간단한 조건인 특수문자를 포함하지 않고 오로지 영어, 숫자로만 비교하는 코드를 구현해보았습니다.

 

먼저 키보드 배열 조건을 문자열로 묶어 지정해 주고 입력된 비밀번호 값을 앞에서 부터 3개씩 잘라 지정한 모든 조건문에 해당 3조합의 문자가 포함되어있는지 판단합니다.

 

저는 asd, qwe, 123과 같은 단순한 조합을 방지하기 위해서 3개씩 잘랐지만, 약간의 수정을 통해 2, 4, 5의 조합도 가능합니다.

대문자 포함

const pwChk = (value) => {
    // 대문자로 바뀔 수 있는 문자
    const word = ["qwertyuiop", "asdfghjkl", "zxcvbnm"];
	
    // 숫자를 제외한 문자 대문자로
    const keyboard = ["1234567890", ...word, ...word.map(v => v.toUpperCase())];

    for (let i = 0; i < value.length-2; i++) {
        const sliceValue = value.substring(i, i + 3);

        if (keyboard.some(code => code.includes(sliceValue))) {
            return true;
        }
    }

    return false;
}

3개의 조합의 문자로 쪼개 조건문을 비교하는 부분은 윗 부분과 똑같습니다.

 

다른 부분은 조건문을 만드는 부분에서 숫자를 따로 빼고, 대문자로 바뀔 수 있는 영문자만 따로 배열에 담아주고toUpperCase 메서드를 통해 대문자로 만들어줍니다.

 

역순의 키 배열 포함

const pwChk = (value) => {
    // 대문자로 바뀔 수 있는 문자 따로 구분
    const word = ["qwertyuiop", "asdfghjkl", "zxcvbnm"];
	
    // 숫자를 제외한 모든 문자 대문자로
    const wordAll = ["1234567890", ...word, ...word.map(v => v.toUpperCase())];
	
    // 해당 문자 배열을 역순으로 조건 생성
    const reverseWord = [...wordAll.map(v => [...v].reverse().join(""))];
	
    // 생성한 조건을 합치기
    const keyboard = [...wordAll, ...reverseWord];

    for (let i = 0; i < value.length-2; i++) {
        const sliceValue = value.substring(i, i + 3);

        if (keyboard.some(code => code.includes(sliceValue))) {
            return true;
        }
    }

    return false;
}

123, qwe, asd, zxc 같은 조합대신에 한번 꼬아서, 단순한 역순 조합인 321, ewq, dsa, cxz 같은 조합 또한 보안에 취약합니다. 그러므로 키보드 배열의 역순 조건 또한 추가해주었습니다.

 

reverseWord 변수에 대문자까지 생성한 조건을 모두 반대로 돌려 추가해주었습니다.

다양한 조건 추가하기

const pwChk = (value) => {
    // 대문자로 바뀔 수 있는 문자 따로 구분
    const word = ["qwertyuiop", "asdfghjkl", "zxcvbnm"];
    
    // 특수한 조건 추가
    const specialWord = ["!@#$%^&*()"];
	
    // 숫자와 추가 조건을 제외한 모든 문자 대문자로
    const wordAll = ["1234567890", ...specialWord, ...word, ...word.map(v => v.toUpperCase())];
	
    // 해당 문자 배열을 역순으로 조건 생성
    const reverseWord = [...wordAll.map(v => [...v].reverse().join(""))];
	
    // 생성한 조건을 합치기
    const keyboard = [...wordAll, ...reverseWord];

    for (let i = 0; i < value.length-2; i++) {
        const sliceValue = value.substring(i, i + 3);

        if (keyboard.some(code => code.includes(sliceValue))) {
            return true;
        }
    }

    return false;
}

해당 코드에서는 이제 wordAll 변수에 조건을 추가하는 것으로 다양한 방식의 조합을 방지할 수 있습니다.

간단한 예로 숫자키로 입력할 수 있는 간단한 조합인 특수문자 [ !@#$%^&*() ] 를 추가하여 방지할 수도 있습니다.

 

사용한 메서드

https://gurtn.tistory.com/76

[JS] a부터 z까지 출력하기

 

https://gurtn.tistory.com/92

[JS] 배열 특정 값 포함 여부, 중복체크 (includes, indexOf, some, every)

 

https://gurtn.tistory.com/105

[JS] 대문자, 소문자로 변환하기