[HTML] input, textarea에서의 자동 완성 속성 (비밀번호 자동 완성 막기)

부제목

[HTML] input password 자동 완성 막기

---

Chrome에서 자동완성된 모습.

 

HTML에서 회원가입 화면, 로그인 화면, 정보 수정 화면을 만들고 테스트를 하다보면 회원가입이나 로그인에서 입력한 계정 정보(비밀번호 등)가 브라우저 또는 사용자가 직접 저장해서 자동 완성되어 버리는 일이 있다.

 

이를 방지하기 위해 자동 완성 속성(autocomplete)을 파헤쳐보려고 한다.

---

 

먼저 아래와 같은 코드로 autocomplete 속성을 추가하면 된다.

<input type="password" name="user_password" id="user_password" autocomplete="값">

<textarea name="memo" id="memo" autocomplete="값"></textarea>

 

autocomplete 속성은 입력 필드에 대해 브라우저에게 어떤 항목이 자동완성 될 수 있는지 알려주고,

브라우저가 기억하고 있는 단어 중 이름이면 이름만, 비밀번호면 비밀번호만 자동완성 할 수 있도록 지정해준다.

 

그리고 autocomplete 속성이 주어지지 않은 경우 부모 <form>에 지정된 autocomplete 속성을 상속받으며(따라가며),

<form>에도 autocomplete가 주어지지 않은 경우엔 브라우저가 결정한다. (보통 on이 기본값)

---

이제 "값"에 어떤 값이 들어갈 수 있는지 간단하게 설명하려 한다.

 

자동완성을 금지하는 값

 

off

자동완성을 금지한다.

* 단, 크롬이나 사파리 등에서 나타나는 [구글/애플/삼성 계정에 이 계정 저장하기]를 통해 저장된 정보는 금지되지 않는다. 이 또한 금지시키려면 아래에 나오는 new-password 값을 사용하면 된다.

 

new-password

새로운 비밀번호를 입력하는 영역으로 자동완성을 금지한다.

off와 동일한 기능을 하지만 새로운 비밀번호를 입력하는 영역으로 완전한 자동완성을 금지할 수 있고, 크롬 등에서 안전한 무작위 비밀번호 추천을 요청할 수도 있게 된다.

 

one-time-code

OTP. 즉 인증번호(인증코드)와 같이 1회용 비밀번호를 입력하는 곳으로 new-password와 마찬가지로 자동완성을 금지할 수 있다.

 

 

자동완성을 허용하는 값

 

on

자동완성을 허용한다.

단순히 어떤 필드인지 구분하지 않고 오직 브라우저가 입력필드에 지정된 속성 중 "name"의 값을 보고 자동완성된다.

 

 

그리고 자동완성을 허용하는데, 어떤 입력이 오길 바라는지 기술하는 값들

 

이름과 관련이 있는 값들

name : 전체 이름

honorific-prefix : 호칭(Mrs. Miss. 등)

family-name : 성

given-name : 이름

additional-name : 가운데 이름

honorific-suffix : 경칭(Jr. 등)

nickname : 별칭(별명, 닉네임)

 

계정과 관련이 있는 값들

username : 사용자 계정 이름(아이디)

email : 이메일 주소

current-password : 현재 비밀번호

 

비즈니스와 관련이 있는 값들

organization : 조직 이름

organization-title : 직위

 

주소와 관련이 있는 값들

country : 국가코드

country-name : 국가이름

postal-code : 우편번호

address-level1~4 : 주소를 상세하게 나누는 경우 (address-level1, address-level2, address-level3, address-level4)

street-address : 도로명 주소 (전체 주소가 아닌 도로명 이하만)

address-line1~3 : 도로명 주소를 상세하게 나누는 경우 (address-line1, address-line2, address-line3)

 

개인과 관련이 있는 값들

bday : 생년월일

bday-year : 생년

bday-month : 생월

bday-day : 생일의 일자

sex : 성별

tel : 전체 전화번호 (82-2-1234-5678)

tel-country-code : 전화번호 중 국가코드 (82)

tel-national : 전화번호중 국가코드를 제외한 전화번호 (02-1234-5678)

tel-area-code : 전화번호를 구성하는 지역번호 (02)

tel-local : 전화번호중 지역번호까지 제외한 전화번호 (1234-5678)

tel-local-prefix : tel-local에서 나눌때 앞자리 (1234)

tel-local-suffix : tel-local에서 나눌때 뒷자리 (5678)

tel-extension : 내선번호

 

기타

url : URL, 주소

photo : 이미지 URL 등

 

 

 

더 자세히 알아보려면 아래 레퍼런스를 보면 된다!

developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

The HTML autocomplete attribute - HTML: HyperText Markup Language | MDN