2018년 현재 비밀번호 자동완성을 사용 중지하는 방법

비밀번호 autocomplete를 사용하지 않으려면 약간의 해킹이 필요합니다.
단순히 <form autocomplete="off">로 Chrome이나 FireFox 등으로는 사용할 수 없습니다.

이는 개발자의 의도보다 사용자 편의성을 선호하기 때문입니다.
하지만 개발자들도 여러가지 궁리를 갖고 이 문제에 맞서고 있는 것 같고, 검색하면 다양한 해킹을 보게 됩니다.

하지만 브라우저 벤더도 그것에 대항하고 있어 지금은 작동하지 않는 해킹도 존재합니다.

이 기사에서는 2018년 5월 현재 유효한 해킹을 소개합니다.

전제

다음 버전에서 확인하고 있습니다.

Chrome 65

FireFox 59

추가

Chrome에서 <form autocomplete="new-password">로 설정하면 autocomplete를 비활성화 할 수 있습니다.
그러나, 2018년 12월 현재, FireFox에서는 이 사양이 구현되어 있지 않으므로 주의해 주십시오.

autocomplete 속성 및 로그인 필드 | MDN

양 브라우저에서 대응을 실시하는 경우는, 이후의 내용을 봐 주세요.

autocomplete 비활성화(잘못된 예)

우선 비교적 새로운(2016년) 아래의 기사를 참고로 구현해 보았습니다.
autocomplete를 둘러싼 Chrome과의 인의없는 싸움 - Qiita

기사중에서는 이하와 같이 소개되고 있습니다.

인용

<form action="/login" method="post">
  <input type="password" name="dummypass" style="visibility: hidden; top: -100px; left: -100px;" />
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" />
</form>

더미의 password 입력란을 추가해, 보이지 않는 위치에 배치하는 해킹입니다.
이것에 의해 더미의 입력란이 오토 완성의 대상이 되어, 본래의 입력란의 오토 컴플리트를 무효화하는 목적입니다.

그러나이 해킹은 FireFox에서 잘 작동하지만 현재 Chrome에서는 사용하지 않았습니다.

autocomplete 무효화(잘 된 예)

위의 예에 약간의 손을 추가하여 Chrome에서도 작동시킬 수있었습니다.

수정 예

<form action="/login" method="post">
+  <input type="password" name="dummypass" style="top: -100px; left: -100px;　position: fixed;" />
-  <input type="password" name="dummypass" style="visibility: hidden; top: -100px; left: -100px;" />
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" />
</form>

visibility: hidden 스타일을 삭제하는 중입니다.
(아마도 해킹 대책을 위해 hidden 요소에 자동 완성을 적용하지 않을 것이라고 생각합니다)

또한 더미를 화면 밖으로 확실하게 내기 위해 position: fixed;도 추가했습니다.

결론

향후 브라우저 측의 대응에 의해 상기의 해킹도 사용할 수 없게 될 가능성이 있으므로 주의해 주십시오.
이런 번거로운 일을 하지 않아도 좋은 시대가 와 주었으면 합니다…