TL;DR

  • Vanguard의 비밀번호 재설정 양식에 설정된 maxlength="20" 때문에 20자를 넘는 비밀번호가 잘려 저장되고, 로그인할 때 입력한 전체 비밀번호와 달라져 로그인에 실패함.
  • 지난 1년 동안 비밀번호를 세 차례가량 재설정했지만 웹 로그인이 되지 않아, 원인을 찾기 전까지는 오류로 여기고 Vanguard 앱의 QR 코드 로그인을 사용함.
  • 비밀번호 재설정 양식의 <input type="password"> 필드에는 최대 길이 20자가 설정되어 있음.
  • 길이가 26자인 예시 비밀번호 abcdefghijklmnopqrstuvwxyz는 재설정 필드에서 abcdefghijklmnopqrst로 잘려 입력되지만, 로그인 필드에는 26자 전체가 입력됨.
  • 비밀번호 길이는 maxlength 속성 대신 자바스크립트(JavaScript)나 백엔드에서 검증하는 편이 사용자가 실제로 전송한 문자열을 정확히 처리함.

웹 로그인 문제와 원인

  • 오랫동안 Vanguard 계정에 웹으로 로그인하지 못했으며, 지난 1년 동안 비밀번호를 세 차례가량 재설정했지만 문제가 계속됨.
  • 문제를 더 살펴볼 시간이 없어 일시적인 오류라고 생각했고, Vanguard 앱으로 QR 코드를 스캔해 로그인함.
  • 이후 원인을 확인한 결과, 비밀번호 재설정 양식의 maxlength="20"이 문제의 원인임.

비밀번호 재설정 과정에서 발생한 잘림

  • Vanguard의 비밀번호 재설정 양식은 <input type="password"> 필드에 최대 길이 20자를 설정함.
  • 보안 수준을 높여 사용하는 1password에서 생성한 비밀번호는 20자보다 길었으며, 이를 복사해 비밀번호 입력란에 붙여넣음.
  • 예시 비밀번호 abcdefghijklmnopqrstuvwxyz는 26자이며, 20자 제한이 적용되면 입력되는 문자열은 abcdefghijklmnopqrst임.
  • 이 문자열을 비밀번호 필드와 확인 필드에 각각 붙여넣고 제출하면 비밀번호 재설정이 성공함.

로그인 실패와 비밀번호 길이 검증

  • 로그인 페이지의 비밀번호 필드에는 20자 제한이 설정되어 있지 않아, 붙여넣은 비밀번호 전체인 abcdefghijklmnopqrstuvwxyz가 입력됨.
  • Vanguard는 비밀번호가 틀렸다고 알리고, 방금 비밀번호를 재설정한 상황에서 로그인에 실패하게 됨.
  • 이 사례는 비밀번호 필드에 maxlength 속성을 사용하지 말아야 하는 이유를 보여줌.
  • 길이 검증은 자바스크립트나 백엔드에서 수행하는 편이 더 적절함. 이렇게 하면 의도치 않게 잘린 문자열이 아니라 사용자가 실제로 전송한 텍스트를 처리함.