autocompleteを無効化する のバックアップの現在との差分(No.1)

• バックアップ一覧
• 差分 を表示
• ソース を表示
• バックアップ を表示
• autocompleteを無効化する へ行く。
  • 1 (2018-03-02 (金) 00:08:36)

• 追加された行はこの色です。
• 削除された行はこの色です。

[[jQueryめも]]

ドメインごとに入力したIDとパスワードをブラウザが記憶して、次回から自動的に補完してくれるautocomplete機能があります。~
これが気に入らないとクライアントから言われてautocompleteを無効化する方法を検討しました。~
IDが候補でリスト表示されるのも気に入りません。

*autocompleteをoffにする [#va0c2686]

form自体に設定

 <form method="post" action="/" autocomplete="off">
 <input type="text" name="username">
 <input type="password" name="password">
 <input type="submit">
 </form>

passwordフィールドに設定

 <form method="post" action="/">
 <input type="text" name="username">
 <input type="password" name="password" autocomplete="off">
 <input type="submit">
 </form>

言うことを聞いてくれません。~
特にChromeは頑なです。

*そもそもどうしてそんなに補完したがるのか [#k5ba3864]

参考
[[フォームのオートコンプリートを無効にするには:https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion]]

> マスターパスワードが用いられない場合でも、ブラウザのパスワード管理機能は純粋にセキュリティの向上につながります。
> パスワードをブラウザが保存すればユーザは覚えなくてもよいため、覚えなければならない場合よりも強固なパスワードをユーザが設定できるようになります。
> 
> このような理由から、モダンブラウザの多くはログインフィールドにおける autocomplete="off" をサポートしていません。

という理由だそうです。

*任意の文字列を代入する [#x1d75420]

参考サイトにあった方法を試してみます。

 <form method="post" action="/" autocomplete="nope">
 <input type="text" name="username">
 <input type="password" name="password">
 <input type="submit">
 </form>

ダメじゃん。

*nameを変えてみる [#h3cf62b3]

関係ないnameに変更したらどうなるのか。

 <form method="post" action="/" autocomplete="off">
 <input type="text" name="aaaaa">
 <input type="password" name="bbbbb">
 <input type="submit">
 </form>

ダメだ。

*どうやってフィールドを判定しているのか [#ae3190e4]

試しにtypeをpasswordからtextへ変更してみた。

 <form method="post" action="/" autocomplete="nope">
 <input type="text" name="username">
 <input type="text" name="password">
 <input type="submit">
 </form>

補完されない&smile;

typeがpasswordのフィールドをパスワード項目とし、その直近の上のフィールドをID項目と判定しているっぽい。

*forcusinでtypeをtextからpasswordへ変更 [#ta3ec6c4]

HTML描画直後はパスワードフィールドはtypeをtextで表示。~
パスワードフィールドへのforcusinでtypeをpasswordへ変更すればいんじゃね？~
てかそこまでやる必要あるのか？

jQueryではtypeは変更できなさそうなので、以下で対応。

 <form method="post" action="/" autocomplete="nope">
 <input type="text" name="username">
 <input type="text" name="password" id="password">
 <input type="submit">
 </form>
 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <script>
 $(function(){
     $('#password').focusin(function(){
         document.getElementById('password').type = 'password';
     });
 });
 </script>

**問題点 [#v0e98d3e]

IDを入力せずにパスワードフィールドに先にforcusinされると補完されちゃう。~
自身が今までそんなことをした経験が無いので良しとする。