どのようにWebフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするには?

html forms browser autocomplete


特定の input (または form field )の主要なブラウザーで autocomplete を無効にするにはどうすればよいですか?




Answer 1 nlucaroni


Firefox 30はパスワードの autocomplete="off" を無視し、パスワードをクライアントに保存するかどうかの代わりにユーザーにプロンプ​​トを表示するようにします。2014年5月5日の次の解説に注意してください。

  • パスワードマネージャ、パスワードを保存するかどうかを常に確認します。ユーザーの許可なくパスワードを保存することはありません。
  • この変更を実装するブラウザはIE、Chromeに次いで3番目です。

Mozilla Developer Networkのドキュメントによると、ブールフォーム要素属性 autocomplete は、フォームデータが古いブラウザにキャッシュされるのを防ぎます。

<input type="text" name="foo" autocomplete="off" />



Answer 2 Ben Combee


autocomplete=off に加えて、ページの生成コードによって、おそらくセッション固有の文字列を名前の末尾に追加することによって、フォームフィールド名をランダム化することもできます。

フォームが送信されたときに、サーバー側で処理する前にその部分を削除することができます。これにより、Web ブラウザがフィールドのコンテキストを見つけるのを防ぎ、攻撃者がフォーム送信時のフィールド名を推測できなくなるため、XSRF 攻撃を防ぐことができます。




Answer 3 apinstein


ほとんどの主要なブラウザーとパスワードマネージャー(正しくは、IMHO)は autocomplete=off を無視するようになりました。

どうして?多くの銀行やその他の「高セキュリティ」ウェブサイトは、「セキュリティ目的で」ログインページに autocomplete=off を追加しましたが、これらの高セキュリティサイトでパスワードを簡単に変更できるようにして(したがって、クラックするため)、実際にはセキュリティが低下します。 )オートコンプリートが壊れていたため。

ずっと前に、ほとんどのパスワードマネージャは autocomplete=off を無視し始めました、そして今、ブラウザはユーザー名/パスワード入力のためだけに同じことをし始めています。

残念ながら、オートコンプリート実装のバグにより、不適切なフォームフィールドにユーザ名やパスワード情報が挿入され、フォームの検証エラーを引き起こしたり、さらに悪いことに、ユーザが意図的に空白のままにしておいたフィールドに誤ってユーザ名が挿入されたりすることがあります。

Web開発者は何をすればいいの?

  • パスワードフィールドの存在がユーザー/パスのオートコンプリートの主なトリガーとなっているようですので、ページ上のすべてのパスワードフィールドをそれ自体で維持できるならば、それは素晴らしいスタートです。そうでなければ、以下のヒントを読んでください。
  • Safariは2つのパスワードフィールドがあることを認識し、この場合はオートコンプリートを無効にします。これは、ログインフォームではなく、パスワードの変更フォームである必要があると想定しています。したがって、許可するフォームでは必ず2つのパスワードフィールド(新規と新規の確認)を使用してください。
  • Chrome 34は、残念ながら、パスワードフィールドを検出すると、ユーザー/パスをフィールドに自動入力しようとします。これは非常に悪いバグで、うまくいけば、Safariの動作が変更されます。ただし、これをフォームの上部に追加すると、パスワードの自動入力が無効になるようです。

    <input type="text" style="display:none">
    <input type="password" style="display:none">

私はまだIEやFirefoxを徹底的に調査していませんが、他の人がコメントで情報を持っている場合は、答えを更新するために喜んでいます。




Answer 4 dsuess


時にはでもオートコンプリートオフ=でしょう埋めるために防ぐことはできません、ユーザーやニックネームフィールド間違ったフィールドに資格証明書ではなく。

この回避策は、ブラウザの挙動についてのapinsteinさんの投稿に加えています。

ブラウザーの自動入力を読み取り専用に修正し、フォーカス(書き込みとクリック)に書き込み可能に設定する

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

アップデート:Mobile Safariではフィールドにカーソルが設定されますが、バーチャルキーボードは表示されません。新しい修正では、以前のように動作しますが、仮想キーボードを扱うようになりました。

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

ライブデモhttps://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

ブラウザが資格情報を間違ったテキストフィールドに自動入力するため!?

同じフォームにパスワードフィールドがある場合、ChromeとSafariでこの奇妙な動作に気づきました。おそらく、ブラウザは保存された認証情報を挿入するためのパスワードフィールドを探します。次に、DOMのパスワードフィールドの前に表示される最も近いtextlike-inputフィールドを(観察のために推測するだけで)自動入力します。ブラウザは最後のインスタンスであり、制御できないため、

上記のreadonly-fixは私のために機能しました。




Answer 5 Geynen


Chromeの解決策は、入力タイプのパスワードに autocomplete="new-password" を追加することです。以下の例を確認してください。

Example:

<form name="myForm"" method="post">
   <input name="user" type="text" />
   <input name="pass" type="password" autocomplete="new-password" />
   <input type="submit">
</form>

Chromeは、タイプpasswordのボックスを検出した場合、常にそのデータをオートコンプリートします。これは、そのボックスの autocomplete = "new-password" を示すのに十分です。

これは私にはよく効きます。

注: F12 を使用して変更が有効になることを確認してください。多くの場合、ブラウザーはページをキャッシュに保存します。これは機能しないという悪い印象を与えましたが、ブラウザーは実際には変更をもたらしませんでした。