회원가입, 로그인 폼에는 꼭 패스워드와 아이디, 이름, 주소, 카드번호, 카드 비밀번호 등등 다양한 개인정보를 작성해야하는 페이지가 존재합니다. 구글 크롬은 같은 정보를 여러 사이트에서 쉽게 입력할 수 있도록 자동완성기능(autocomplete)이란것을 지원합니다. 문제는 이 자동완성기능이 사이트에서 필요로 하지 않는 정보까지 포함하고 있기때문에 보안 문제가 많다고 하네요.크롬의 자동완성기능의 보안 문제와 해결법-영문그래서 저는 개인적으로 이 기능을 off 하고 사용하고 있지만 저희 고객분들은 그런 기능을 잘 모르는 분들이 많겠죠!! 그렇다고 일일이 고객분들께 사용하지 말아달라고 부탁할 수도 없는 노릇이고… 하니 사이트에서 자체적으로 이 기능을 block 해버리는 방법을 찾아보게 되었습니다.
방법 1 (X)
input 과 form에 autocomplete="off"라는 속성값을 부여합니다.
<input type="text" id="..." name="..." autocomplete="off">
인터넷 익스플로러에서는 이 방법이 먹히지만 크롬과 같은 최신 브라우저에서는 통하지 않습니다. 몇년전에 사용하던 방법이었는데 크롬에서 막아버렸다고 하죠. 사유는 뭐 개발자들이 무분별하게 사용해서 이를 방지하는 차원이라는데… 그냥 없애달라고 ㅠㅠㅠ
방법 2 (X)
방법 1이 안된다면, autocomplete="false" 등으로 바꿔보는 방법도 있습니다.
방법 3 (X)
방법 2도 안된다면… 비밀번호 입력칸에 autocomplete="new-password"라고 입력해서 항상 새로운 비밀번호를 입력받는다는 꼼수를 부릴 수도 있습니다.
방법 4
이쯤 와서 정말 화가나기 시작했습니다. 다른일 해야하는데 이거때문에 시간 질질끌리고…. 몇번 더 구글링한 결과 다른 방법을 찾았습니다!!!
먼저 자동완성 기능이 활성화 되는 시점은 form 이나 전체 페이지에서 처음으로 오는 <input type="password"> 요소를 찾아서 바로 앞에 위치하는 input과 자동완성 기능을 띄워주는 방식입니다. 이를 활용하면, 더미 입력폼을 만들어서 해결할 수 있습니다.
<!--remove autocomplete-->
<input style="display:none" aria-hidden="true">
<input type="password" style="display:none" aria-hidden="true">
<!--remove autocomplete end-->
<!--real input start-->
<input type="text" autocomplete="false" required>
<input type="password" name="password" autocomplete="new-password">
<!--real input end-->
실제로 저는 이렇게 해서 효과를 봤습니다. 완벽하게는 아니지만 password 전에 위치한 인풋창에는 자동완성 기능이 뜨지 않습니다(제 원래 목표). 여전히 password인풋에는 자동완성 창이 뜨네요… ㅠㅠ
번외 - 모바일 인풋 대문자 입력 방지
모바일(특히 iOS)에서는 인풋에서 입력을 시작하면 첫 글자가 대문자로 입력이 됩니다. 하지만 아이디나 이메일 입력창에서 첫 글자가 대문자인 경우는 드물기 때문에 아래 코드릴 입력하시면 좋습니다. 은근히 UX를 개선하는 방법중 하나랄까..
<input type="email" autocapitalize="off">