크롬 브라우저 비밀번호 자동완성 방지 (autocomplete 불가 시)

결론부터

크롬에서는 autocomplete 어트리뷰트 대신, 임의의 <input type="password"/> 을 넣어주자.

개요

보통 회원정보에서 내 정보 수정을 할 때는 비밀번호 변경만 따로 있는 경우가 많다. 근데 이번 경우는 같은 폼에 있어서, 비번을 입력하지 않을 경우 수정되지 않는 폼이었다.(비번 재입력 받는 부분도 없음)

어쨌든 별도 입력을 안했는데 비번이 바뀌었다고 해서 확인해보니, 브라우저 자동완성이 문제였다.

사용자 행동

1. 크롬은 사이트에 로그인을 하면 비번을 저장할 것인지 묻는다.
2. 사용자가 여기서 '예'를 선택하여 인증정보를 저장했다.
3. 내 정보 수정 화면에 접속
4. 비밀번호 란에 자동완성 된 비밀번호가 입력되어 있음
5. '저장'하면 인코딩이 바뀌어 엉뚱한 비번이 들어감
6. 로그인 못함...

해결책

비밀번호 자동완성 방지를 위해 input password의 autocomplete 속성을 찾아 보았으나, 크롬에서는 안된다. 임의의 input을 만들어 앞에 넣어주면 된다.

주의: display:none 이나 visibility:hidden 하면 해당 input을 무시하니 크기를 0으로 주자.

<!-- 크롬 비번 자동완성 방지를 위한 input -->
<input type="password" style="display: block; width:0px; height:0px; border: 0;" @focus="$refs.pwdInput.focus()">
<input type="password" class="form-control m-b-5" placeholder="패스워드" v-model="user.password" autocomplete="off" ref="pwdInput"/>