[HTML 코딩 테크닉] Input Autocomplete(Auto-fill)를 제어하는 방법

회사 플랫폼 개발 중 사용자가 로그인 되어있는 상태에서 페이지 1에 진입하여 특정한 Action을 실행할 때, 비밀번호를 한번 더 사용자로부터 입력을 받아 Confirm후 해당 작업을 진행할 수 있는 기능이 있었다.

 

사용자의 비밀번호 입력을 위해 Input 요소를 추가해주었고, type도 당연히 "password"로 설정해 주었다.

패스워드를 확인한 후 다른 페이지로 redirect 되어지게 되는데(Client side), 이 때 브라우저(Chrome)는 ID, PW를 보냈다고 판단하여 "방금 보낸 ID와 PW 정보를 저장할거야?"라고 물어보았는데 무의식적으로 "저장하겠다" 버튼을 한 번 클릭했었다.

그 후 페이지 1에 다시 들어왔는데, 아까 비밀번호 재Confirm을 위해 사용하던 Input element(password) 이전(상위)의 Input element에 Auto-fill(ID)이 적용되는 것이였다.

PW를 입력하는 Input에는 Auto-fill 되어도 합당하겠지만, 브라우저는 "input[type="password"]인 Input element이전의(Sibling 혹은 Parent->Sibling->Child) Input element가 ID를 입력하는 Input 이겠지?" 라고 추측하여 바로 이전의 Input element(ID input 역할을 하지 않는 input)에 ID를 Auto-fill하고 있었다.

 

4번째 Input 필드 위 3번째 Input 필드에 ID값이 Auto-fill 되어 있다.

 

이와같은 ID, PW를 저장하겠냐고 물어보는 건 결론적으로 막을 수 없고(현재 제가 얻은 정보에 한해, 본문 하단 참조), 대신 Auto-fill을 제어할 수 있다.

정석적인 방법은 아니고, Trick을 사용하여 막을 수 있다.

편법이긴 한데, 3번째 필드와 4번째 필드사이에 보이지 않는 Input 요소를 만든다.(inline hidden, Hidden by style 등등..)

이렇게 하면 브라우저가 해당 input에 ID값을 넣어버려 엉뚱한 3번째 필드(전화번호)에 ID 값을 Binding 하겠지만, 실제 사용자가 보는 관점에서는 보이지 않게 할 수 있어 3번째 전화번호 입력 필드를 의도에 맞게 사용할 수 있다.

 

 

 

더 나은 방법이 있을 경우 댓글 피드백 남겨주시면 감사하겠습니다!

참조

developer.mozilla.org/ko/docs/Web/HTML/Attributes/autocomplete

 

developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields