서론
form 태그 내의 input에다가 값을 넣어 한번 제출하게 되면,
구글은 자연스럽게 그 값을 저장하고 나중에 그 저장한 값으로 사용자에게 자동완성을 제안하게 됩니다.
이런 자동완성기능은 사용자들에게 편리함을 주지만, 모든 것을 기억하고 자동 완성하게 하도록 하는 데에는 무리가 있습니다.
예를 들면 일부 사용자들에겐 비밀번호를 저장하는 건 찝찝한 기억을 남길 수도 있고,
아니면 일회성 비밀번호나 인증번호 같은 건 나중에 자동완성 해봤자 오히려 방해가 되는 경우가 많죠.
이 때문에 자동완성을 조정하는 속성이 존재하는데, 그게 바로 autocomplete 입니다.
autocomplete 속성은 form 태그 혹은 input 태그에 들어갑니다.
만약 각각의 input 태그에 지정해주지 않으면 input을 감싸고 있는 form 태그의 autocomplete 속성을 쫓아가게 됩니다.
본론
autocomplete에는 기본적으로 on, off 값을 넣습니다.
(1) autocomplete="on"
- 브라우저의 자동완성을 허용합니다. 아무런 안내 정보도 제공하지 않으므로, 브라우저가 스스로의 판단 하에 값을 결정합니다.
(2) autocomplete="off"
- 브라우저가 이 필드에 값을 자동으로 넣는 것을 금지합니다. 문서나 애플리케이션이 자신만의 자동완성 기능을 구현하거나, 보안상 문제로 자동완성을 사용하지 않아야 할 경우 지정할 수 있습니다.
허나 여기에 맹점이 존재합니다.
※ 대부분의 최신 브라우저에서는 autocomplete을 off로 지정하더라도 브라우저가 사용자에게 계정 이름과 비밀번호 저장 여부를 묻는 것을 막을 수 없으며, 저장한 값을 사용해 자동완성하는 것도 막을 수 없습니다.
off 값을 넣는다고 해서 저장과 자동완성을 하지 않는다는 보장이 없다는 뚱딴지 같은 결과에 도달하게 됩니다.
그럼 진짜 자동완성을 막으려면??
사실 autocomplete에는 on/off 값 말고도 다른 값들도 존재합니다.
다른 표준 값들은 해당 문서 링크를 참고하시면 되고, 저는 의문점에 대한 해결법만 알려드리고자 합니다.
바로 autocomplete="new-password" 혹은 autocomplete="one-time-code" 을 사용하시면 됩니다.
✅ autocomplete="new-password"
- 새로운 비밀번호. 계정을 생성할 때나 비밀번호를 변경할 때, new-password는 "새로운 비밀번호를 입력하세요" 또는 "비밀번호 확인"에 지정해야 합니다. 일반적인 비밀번호와 구분하는 이유는 브라우저가 기존 비밀번호를 자동완성으로 채우는 것을 피하기 위함이며, 안전한 무작위 비밀번호 생성을 제안할 곳을 결정할 때도 사용하기 때문입니다.
✅ autocomplete="one-time-code"
- 사용자를 인증할 때 사용하는 1회성 코드.
해당 해결책으로 많이 제시되어 있는 건 new-password였고, 저의 경우에는 one-time-code로 해결하였습니다. 따라서 되는 쪽으로 사용하시면 될 것 같습니다.
👓 참고문헌
