크롬 자동완성 기능 제거하기

크롬 자동완성기능(autocomplete) 끄기

회원가입, 로그인 폼에는 꼭 패스워드와 아이디, 이름, 주소, 카드번호, 카드 비밀번호 등등 다양한 개인정보를 작성해야하는 페이지가 존재합니다. 구글 크롬은 같은 정보를 여러 사이트에서 쉽게 입력할 수 있도록 자동완성기능(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">

참고

관련 문제에 대한 스택오버플로 질문글

wilt

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

부탁드립니다