<프론트와 백의 첫 만남? 최종 비밀번호에 대한 답.>

강민수·2021년 12월 27일
0

진실의 방

목록 보기
20/26

3탄 포스팅에서 비밀번호가 인풋 창에서 한글 설정에 대한 의문이 남았었다.

그래서 이 부분을 위코드 커뮤니티에 올려 봤다. 그래서 이번 포스팅은 그 질문에 대한 내용과 답변으로 어떤 건설적인 내용들이 오고 갔는 지에 대해 한 번 적어보고자 한다.

#🙋1.QUESTION

1)사건의 발단

이번에는 제가 기존에 만든 로그인 화면의 프론트 단을 백엔드의 로그인 서버와 연결시켜 데이터 연동까지 완료하는 과정에서 한 가지 의문이 발생하여 질문을 올립니다.

기존 과정에서 대부분의 에러는 다 제어를 했고, 예상된 범위 값 안에 오차가 없었습니다.

그런데 제가 db에서 한글과 숫자가 포함된 비밀번호를 가진 아이디로 로그인 하던 중 문제가 발생했습니다. 제 예상대로라면, 이건 정상적으로 로그인 되어야 하는 부분인데, 이상하게도 비밀번호 불일치로 에러가 잡힙니다.

아이디: hiphop1@wecode.com 비번:힙매23


그런데 또, 포스트 맨에서는 이게 로그인이 한글로 하면 됩니다…

2) 사건의 원인

그래서 바로 백엔드 서버 코드를 열어봤습니다.


역시 예상한 대로 409에러로 pw불일치 에러가 뜹니다.

혹시 싶어 다른 영문+숫자 조합의 비번의 아이디로 로그인하면

문제 없이 성공합니다.

그래서 이건 100% pw문제라고 생각이 들어 해당 부분을 콘솔로그로 찍어 디버깅해 봤습니다.

보시는 바와 같이 원래 기존의 pw가 분명히 한글로 입력했으나, 영어로 출력되면서 기존 복호화된 암호와 불일치한 결과가 도출된 것을 볼 수 있습니다.

3) 해결법 서칭

그래서 제가 찾아본 서칭 결과.

원래 비밀번호는 디폴트 값이 영어와 숫자로만 이루어져 있어, 한글 인식 지원을 중단하게 되었다. 따라서 한글로 입력해서 애초에 가입시키지 말아라.
→ 그런데 이는 말이 안 된다고 생각합니다.

정규표현식을 인풋 쪽에 넣어주면 된다.
→ 이 방법으로 하면 된다는 분들도 있었는데, 사실 제가 생각해도 될 것은 같으나, 정확히 모르겠습니다.

스타일 태그로 적용하는 것도 가능하다.
http://m.egloos.zum.com/leekuns/v/3509220
이 방식도 있었습니다.

4) 질문 내용

그래서 제가 드리고 싶은 질문은 다음과 같습니다.

  1. 포스트맨에서는 저렇게 로그인이 되고, 프론트 단에서는 저렇게 안 되는 원인은 무엇인가? 원인에 따른 해결방법은?(밑에서 해결책은 후술하셔도 됩니다.)
  2. 현업에서는 저렇게 해결법 중에서 어떻게 로그인 혹은 회원가입 시 사용자의 패스워드를 제한시키는 가?
    한글 포함한 비밀번호는 정말 지원이 끊긴 것이 맞는가?
  3. 정규 표현식과 스타일 태그를 이용한 방법 중 어느 것이 현업에서 주로 쓰이는가? 아니면 정말 추천하는 방식이 있다면?
    이상입니다. 계속 찾아보면서 고민해 봤지만, 아직 명확한 기준이 없어 현직자의 답변을 받아보고 싶어 질문 올립니다.
    날 추운데 감기와 코로나 조심하시기 바랍니다~ :blush:

#2.ANSWER

01)

안녕하세요. 민수님~ 한가지 물어보고 싶은것이 있어서 그런데

해결법 서칭 - 1번이 왜 말이 안 된다고 생각하시나요?

-> 답변: 아 그게 제가 야후 페이지에 가입 시도를 해 봤는데 거기는 한글+ 숫자로도 지원하는 것 같아서 잘은 모르지만, 지원을 하는 것 같아서 그렇게 생각을 했습니다.

02)

넵 알겠습니다.
질문에 대한 답을 드리자면

포스트맨, 프론트 차이가 나는 이유는?
A) 포스트맨은 해당 데이터(한글)를 그대로 보내지만 input type이 password인 경우에는 운영체제에 따라 혹은 브라우저에 따라 데이터를 영문자로만 보내게 됩니다. 한글 입력을 지원할거라면 type을 text로 바꾸면 됩니다. 다만, 비밀번호 입력창에 한영키 입력 상태 보기 부분을 넣어줘야 ux가 개선될 것입니다. (비밀번호는 ****들로만 보이니깐요)

현업에서 어떻게 하나?
A) 검색한것과 같이 정규 표현식을 대부분 사용합니다. validation이라고 부르고 유효성 검증이라고도 부르는데 대부분이 정규 표현식을 이용해서 구현합니다.

정규 표현식과 스타일 태그를 이용한 방법 중 어느것?
A) 해당 링크 통해서 확인해보니 스타일 태그는 한글 입력 우선순위를 올려주는 옵션일 뿐입니다.(혹시 pattern 부분 말하시는 거면 이것 또한 정규표현식입니다.)

결국, 문제는 패스워드에 한글 입력을 허용할거냐 말거냐로 귀결될 것 같은데 민수님은 어떻게 생각하시나요?

03)

네 맞습니다. 저도 원칙적으로 한글 입력을 허용할 것이냐 말거냐로 귀결되는 것 같습니다. 그러면 마지막으로 한 가지만 여쭙겠습니다. 보통 비밀번호에서 한글 허용하는 경우가 많이 있나요? 물론 회사의 방침이나 팀마다 다른 경우이긴 하겠지만, 좀 궁금해서요 ㅎㅎ

04) 해당 부분은 그냥 회사마다 정책이 다릅니다.

정말 많은 사례가 인용될 수 있을 것 같은데 만약 서비스가 해외에서도 출시해야 한다라고 가정한다면

국가마다 검증 정책이 다르면 그에 따른 비용(기획, 설계, 구현, 테스트)들이 늘어나니깐 관리해야할 리소스가 늘어납니다.

그게 아니라 한글을 비밀번호로 사용하고 싶다면 순수 string을 받을 수 있는 입력 폼을 구현하시고 진행해야하기 때문에 프론트 개발자가 할일이 많아질 것입니다.

그럼에도 불구하고 한글을 허용한다면 가능한 경우의 수가 늘어나니 보안상으로는 상대적으로 뛰어난 상태가 되겠지요.

전세계 공통적으로 사용할 수 있는 영문자, 숫자, 특수문자로 비밀번호로 구성하시는 것을 추천드립니다.

지금은 프로젝트 기간이니 한글로 진행하셔도 무방합니다.

#3. 🤔느낀 점.

결국 이번 오류를 통해 패스워드의 속성과 그것이 어떻게 현업에서 적용되고 있는 지에 대해 보다 심층적으로 알 수 있었다.

그래서 향후, 현업에 가서도 이런 비밀번호에 대한 고민은 끝없이 해야할 것 같다. 또, 그 고민을 토대로 보다 안전하고 편리한 방식으로 코드를 구현해 보면서 실제 몸소 체득하는 것이 확 와 닿을 것 같다.

앞으로 향후 프로젝트에서도 이런 고민 하나 하나가 쌓여가면서 성장의 밑거름이 될 것이라고 본다.

profile
개발도 예능처럼 재미지게~

0개의 댓글