2018年現時点でのパスワードのautocompleteを無効化する方法

パスワードの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 のstyleを削除しています。
（おそらく、ハック対策のためにhiddenな要素にオートコンプリートを適用しないようになっているのだと思います）

また、確実にダミーを画面外に出すために position: fixed; も加えました。

おわりに

今後、ブラウザ側の対応により上記のハックも使えなくなる可能性がありますのでご注意ください。
このような面倒なことをしなくてもいい時代が来てほしいです…