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

Question

どうやって無効にするのですか autocomplete 特定の主要ブラウザで input （または form field)?

Answer 1

Firefox 30 は無視します autocomplete="off" パスワードについては、パスワードをクライアントに保存する必要があるかどうかをユーザーに尋ねる代わりに選択します。次の点に注意してください 解説 2014 年 5 月 5 日から:

• パスワードマネージャー いつも パスワードを保存するかどうかを尋ねるプロンプトが表示されます。パスワードはユーザーの許可なしに保存されません。
• この変更を実装したブラウザは、IE と Chrome に次いで 3 番目です。

による Mozilla 開発者ネットワーク ドキュメント、ブール型フォーム要素属性 autocomplete フォーム データが古いブラウザにキャッシュされるのを防ぎます。

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

Answer 2

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

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

Answer 3

主要なブラウザとパスワード マネージャー (正確には、私見ですが) のほとんどは現在、このパスワードを無視しています。 autocomplete=off.

なぜ？多くの銀行やその他の「高セキュリティ」Web サイトが追加されました autocomplete=off しかし、オートコンプリートが機能していないため、これらの高セキュリティのサイトのパスワードを覚えやすくするために (したがって解読しやすくするために) 変更することになるため、実際にはセキュリティが低下します。

ずっと前に、ほとんどのパスワード管理者は無視し始めました autocomplete=off, 、そして現在、ブラウザはユーザー名とパスワードの入力に対してのみ同じことをし始めています。

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

Web 開発者は何をするべきですか?

• ページ上のすべてのパスワード フィールドを単独で保持できれば、パスワード フィールドの存在がユーザー/パスのオートコンプリートが開始される主なトリガーであると思われるため、それは素晴らしいスタートとなります。それ以外の場合は、以下のヒントをお読みください。
• サファリ この場合、ログイン フォームではなくパスワード変更フォームである必要があると想定して、パスワード フィールドが 2 つあることに気づき、オートコンプリートを無効にします。したがって、許可するフォームでは必ず 2 つのパスワード フィールド (新規と新規確認) を使用してください。

• クロム 残念ながら、34 はパスワード フィールドを見つけるたびにフィールドにユーザー/パスを自動入力しようとします。これは非常に悪いバグなので、Safari の動作が変更されることが期待されます。ただし、これをフォームの先頭に追加すると、パスワードの自動入力が無効になるようです。

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

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

Answer 4

時々 偶数オートコンプリート=オフ するだろう 埋めるのを妨げない 資格情報が間違ったフィールドに入力されていますが、ユーザーまたはニックネームのフィールドには入力されていません。

この回避策は、ブラウザの動作に関する 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/

// 更新終了

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

Chrome と Safari でパスワード フィールドがある場合、この奇妙な動作に気づきました。 同じ形。 おそらく、ブラウザは保存された資格情報を挿入するためのパスワード フィールドを探します。次に、DOM のパスワード フィールドの前に表示される、最も近いテキストのような入力フィールドを (観察による推測にすぎませんが) 自動的に入力します。ブラウザは最後のインスタンスであり、制御することはできませんので、

上記の読み取り専用修正は私にとってはうまくいきました。

Answer 5

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

これは Internet Explorer と Mozilla FireFox で動作しますが、XHTML 標準ではないという欠点があります。

Answer 6

Chrome の解決策は次のとおりです。 autocomplete="new-password" 入力型パスワードに。

例：

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

Chrome は、次のボックスを見つけた場合、常にデータをオートコンプリートします。 パスワードをうつ, 、そのボックスを示すのに十分です autocomplete = "new-password".

これは私にとってはうまくいきます。

注記：F12 キーを押して、変更が有効になっていることを確認します。多くの場合、ブラウザーはページをキャッシュに保存します。これにより、機能しなかったのに、ブラウザーが実際に変更を反映したわけではないという悪い印象を受けました。

Answer 7

他の人も言っているように、答えは次のとおりです autocomplete="off"

ただし、言う価値はあると思う なぜ 特定のケースでは、これに対する答えとしてこれを使用することをお勧めします。 重複 質問では、オフにしないほうがよいという意見がありました。

クレジット カード番号を保存するブラウザの停止をユーザーに任せるべきではありません。あまりにも多くのユーザーはそれが問題であることにさえ気づきません。

クレジット カードのセキュリティ コードのフィールドではこれをオフにすることが特に重要です。として このページ 状態:

「セキュリティコードは絶対に保管しないでください...その価値は、それを提供する唯一の方法が物理的なクレジット カードから読み取り、提供者が実際にカードを所有していることを証明することであるという推定に依存します。」

問題は、それが公共のコンピューター (サイバー カフェ、図書館など) である場合、他のユーザーがカードの詳細を簡単に盗むことができ、さらには自分のコンピューターでも悪意のある Web サイトが存在する可能性があることです。 オートコンプリートデータを盗む.

Answer 8

オートコンプリートを無効にしないようにするという回答とは異なることを懇願しなければなりません。

最初に取り上げる必要があるのは、ログイン フォーム フィールドでオートコンプリートが明示的に無効になっていない場合は、PCI-DSS が失敗するということです。さらに、ユーザーのローカル マシンが侵害された場合、オートコンプリート データは平文で保存されているため、攻撃者によって簡単に取得される可能性があります。

使いやすさについては確かに議論がありますが、どのフォーム フィールドのオートコンプリートを無効にする必要があり、どのフォーム フィールドを無効にするべきかについては、非常に微妙なバランスが必要です。

Answer 9

3 つのオプション:初め：

<input type='text' autocomplete='off' />

2番目：

<form action='' autocomplete='off'>

3 番目 (JavaScript コード):

$('input').attr('autocomplete', 'off');

Answer 10

ランダムな文字を使用して、Google Chrome との終わりのない戦いを解決しました。常にランダムな文字列を使用してオートコンプリートをレンダリングすると、何も記憶されなくなります。

<input name="name" type="text" autocomplete="rutjfkde">

他の人にも役立つことを願っています。

Answer 11

それに関連した、あるいは実際にはまったく逆のメモですが、

「前述のフォームのユーザーであり、オートコンプリート機能を再度有効にしたい場合は、これから「パスワードを覚えておいてください」ブックマークレットを使用します。 ブックマークレットページ. 。すべてを削除します autocomplete="off" ページ上のすべてのフォームの属性。良い戦いと戦い続けなさい！」

Answer 12

私たちが実際に使用したのは、 サスブあるサイトのアイデア。それは診療所を運営するための医療ソフトウェア Web アプリでした。しかし、私たちのクライアントの多くは、半公共の端末を含むさまざまなワークステーションを使用する外科医でした。そこで彼らは、自動保存されたパスワードの意味を理解していない医師や注意を払っていない医師が、誤って自分のログイン情報を簡単にアクセスできる状態にしておくことがないようにしたいと考えました。もちろん、これは IE8 や FF3.1 などで機能し始めているプラ​​イベート ブラウジングという考え方が登場する前の話です。それでも、IT が変化しない病院では、多くの医師が旧式のブラウザを使用せざるを得ません。

そこで、ログイン ページに、その投稿でのみ機能するランダムなフィールド名を生成させました。確かに利便性は劣りますが、公共の端末にログイン情報を保存しないということはユーザーの頭を悩ませるだけです。

Answer 13

設定するだけ autocomplete="off". 。これには十分な理由があります。独自のオートコンプリート機能を提供したいと考えています。

Answer 14

私は無限の解決策を試してきましたが、次のことを見つけました。

の代わりに autocomplete="off" ただ単に使うだけ autocomplete="false"

とてもシンプルで、Google Chrome でも魅力的に機能します。

Answer 15

私は思う autocomplete=off HTML 5 でサポートされています。

ただし、なぜこれを行う必要があるのか​​を自問してください。状況によっては意味があるかもしれませんが、ただ単にそれを行うためだけに実行しないでください。

これはユーザーにとって利便性が低く、OS X のセキュリティ上の問題でもありません (Soren が以下で言及しています)。リモートでパスワードが盗まれるのではないかと心配な場合は、アプリが autcomplete=off.

ブラウザーに私の情報（ほとんど）を記憶させることを選択したユーザーとして、あなたのサイトが私の情報を覚えていないとしたら、それは迷惑だと思います。

Answer 16

この会話では、どの解決策も私にとっては役に立ちませんでした。

ようやく分かりました 純粋な HTML ソリューション それは必要です JavaScriptなし, 、最新のブラウザー (IE を除く) で動作します。少なくとも 1 つのキャッチが必要でした)、フォーム全体でオートコンプリートを無効にする必要はありません。

オートコンプリートをオフにするだけです form そして、それをオンにします。 input フォーム内で機能するようにしたい場合。例えば：

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

Answer 17

これは非標準的な方法でしたが (Mozilla と Internet Explorer はまだサポートしていると思います)、ユーザーの期待を台無しにするのは悪い考えです。

ユーザーがフォームにクレジット カードの詳細を入力し、他の人がそのブラウザを使用しても、それは心配する必要はありません。:)

Answer 18

これは私にとってはうまくいきます。

<input name="pass" type="password" autocomplete="new-password" />

この戦略は、テキスト、選択などの他のコントロールでも使用できます。

Answer 19

ゲームに少し遅れました...しかし、この問題に遭遇し、いくつかの失敗を試みましたが、これは私にとってはうまくいきました。 MDN

場合によっては、オートコンプリート属性がオフに設定されていても、ブラウザはオートコンプリート値を提案し続けます。この予期せぬ動作は、開発者にとって非常に不可解になる可能性があります。非完了を強制するトリックは、ランダムな文字列を属性に割り当てることです。

autocomplete="nope"

Answer 20

最良の解決策:

ユーザー名 (または電子メール) とパスワードのオートコンプリートを禁止します。

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

フィールドのオートコンプリートを禁止します。

<input type="text" name="field" autocomplete="nope">

説明：autocomplete で作業を続けます <input>, autocomplete="off" 機能しませんが、変更できます off 次のようなランダムな文字列に nope.

使用場所:

• クロム：49、50、51、52、53、54、55、56、57、58、59、60、61、62、63、64

• Firefox:44、45、46、47、48、49、50、51、52、53、54、55、56、57、58

Answer 21

を追加すると、

autocomplete="off"

form タグを追加すると、ブラウザーのオートコンプリート (そのフィールドに以前に入力された内容) がすべて無効になります。 input その特定のフォーム内のフィールド。

テスト対象:

• Firefox 3.5、4 ベータ版
• Internet Explorer 8
• クロム

Answer 22

追加してみてください

readonly onfocus="this.removeAttribute('readonly');"

に加えて

オートコンプリート = "オフ"

フォームデータを記憶したくない入力 (username, password, 、など）を以下に示します。

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

アップデート： 以下に、このアプローチに基づいた完全な例を示します。 ドラッグドロップ, コピー, ペースト, 、など。

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

主要なブラウザの最新バージョンでテストされています。 Google Chrome, Mozilla Firefox, Microsoft Edge, 、など。そして問題なく動作しています。お役に立てれば...

Answer 23

フィールドには標準以外の名前と ID を使用するため、「name」ではなく「name_」を使用します。ブラウザでは、それが名前フィールドとして認識されなくなります。この機能の最も良い点は、これをすべてのフィールドではなく一部のフィールドに対して実行できることと、すべてのフィールドではなく一部のフィールドがオートコンプリートされることです。

Answer 24

無効な XHTML を回避するには、JavaScript を使用してこの属性を設定します。jQueryを使用した例:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

問題は、JavaScript を持たないユーザーがオートコンプリート機能を利用できることです。

Answer 25

追加 autocomplete="off" 切らないよ。

入力タイプ属性を次のように変更します type="search".
Google は、特定の種類の検索の入力に自動入力を適用しません。

Answer 26

できればこれらも試してみてください autocomplete="off" 機能しません:

autocorrect="off" autocapitalize="off" autocomplete="off"

Answer 27

報告されてからこれほど長い時間が経った今でも問題が続いていることが信じられません。safari は要素が表示されていないか画面外にあるかを認識しているようだったので、上記の解決策は私にとってはうまくいきませんでしたが、次の解決策はうまくいきました。

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

それが誰かの役に立つことを願っています!

Answer 28

これはセキュリティ上の問題であり、ブラウザーは現在無視しています。開発者が情報は機密であり保存すべきではないと考えている場合でも、ブラウザーは入力名を使用してコンテンツを識別して保存します。2 つのリクエスト間で入力名を変えると問題は解決します (ただし、ブラウザのキャッシュに保存され、ブラウザのキャッシュも増加します)。ブラウザの設定でオプションを有効または無効にするようにユーザーに求めるのは、良い解決策ではありません。この問題はバックエンドで修正できます。

これが私の修正です。私がフレームワークに実装したアプローチ。すべてのオートコンプリート要素は、次のような非表示の入力を使用して生成されます。

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

次に、サーバーは次のようにポスト変数を処理します。

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

値には通常どおりアクセスできます

var_dump($_POST['username']);

また、ブラウザーは、以前のリクエストや以前のユーザーからの情報を提案することはできません。

ブラウザが更新されても、オートコンプリートを無視してもしなくても、すべてが魅力的に機能します。それが私にとって問題を解決する最善の方法でした。

Answer 29

ここで説明したハックはどれも Chrome では機能しませんでした。この問題については次のような議論があります。 https://code.google.com/p/chromium/issues/detail?id=468153#c41

これを a 内に追加すると、 <form> (少なくとも現時点では) 動作します:

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Answer 30

これが次のとおりです。

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">