본문 바로가기
카테고리 없음

input 태그 자동완성 끄기 (autocomplete 옵션)

by eatyourKimchi 2025. 6. 10.
728x90

 

input 자동완성 막는 방법

 

 input 태그를 사용해서 텍스트를 입력받는 화면에서 자동완성이 켜져 있으면 개인정보 유출되거나 불편함을 가져올 수 있습니다. 이럴 땐 auto complete 옵션을 추가하여 자동 완성이 안되도록 설정할 수 있습니다. 그래서 이번 포스트에서는 입력 자동 완성을 막는 방법을 소개해 보겠습니다.

 

 

[ 자동 완성 예시 ]

input 태그 자동완성 끄기
input 태그 자동완성 끄기

 

 

네이버 로그인 창 소스코드를 예로 보면 아래와 같이 자동 완성 기능이 화성화되어 있습니다.

활성화가 된 경우는 두 가지인데, 하나는 input 태그에 autocomplete 옵션을 생략하거나 autocomplete="on" 으로 선언한 경우입니다.

 

네이버 로그인 자동 완성 관련 소스
네이버 로그인 자동 완성 관련 소스

 

 

정리하자면 autocomplete 옵션이 없거나 on 인 경우 자동 완성됩니다.

 

1
2
<input type="text" id="acc" value="" />
<input type="text" id="pass" value="" autocomplete="on" />
cs

 

 

이때 autocomplete="off" 를 설정해주면 자동입력 되지 않기에 보안이 좀 더 강화되겠죠?

다만 설정이 안 먹히는 경우가 있는데, 이땐 autocomplete="new-password"로 바꿔주면 됩니다.

 

1
2
<input type="text" id="acc" value="" autocomplete="off" />
<input type="text" id="pass" value="" autocomplete="new-password" />
cs

 

 

 

 

다만 자동입력에 대한 정부의 보안 가이드는 없는 것 같아서 관리자의 판단에 의해 결정하면 될 것 같습니다.

또한 아래와 같이 계정과 비밀번호 리스트가 뜨는 경우는 브라우저 옵션(크롬)이라 위 설정으로는 차단되지 않습니다.

 

네이버 자동 로그인 창
네이버 자동 로그인 창

 

728x90