html - Chrome は autocomplete="off" を無視します

Question

タグボックスドロップダウンを使用する Web アプリケーションを作成しました。これは、Chrome ブラウザー (バージョン 21.0.1180.89) を除くすべてのブラウザーでうまく機能します。

フィールドと属性を持つinputフィールドの両方にもかかわらず、Chrome はフィールドの以前のエントリのドロップダウン履歴を表示することを主張し、タグボックスリストを消去します。formautocomplete="off"

score 402 · Accepted Answer

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

<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"変更できます。offnope

フィールドのオートコンプリートを無効にするためのその他の「解決策」 (正しい方法ではありませんが、機能します):

1.

HTML:

<input type="password" id="some_id" autocomplete="new-password">

JS (オンロード):

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

またはjQueryを使用：

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

2.

HTML:

<form id="form"></form>

JS (オンロード):

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

またはjQueryを使用：

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

jQuery を使用して複数のフィールドを追加するには:

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>

作品:

クローム: 49+
Firefox: 44+

score 104 · Accepted Answer

現代的なアプローチ

単純に入力readonlyを行い、フォーカスを合わせて削除します。これは非常に単純なアプローチであり、ブラウザーはreadonly入力を取り込みません。したがって、このメソッドは受け入れられ、将来のブラウザーの更新によって上書きされることはありません。

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

次の部分はオプションです。入力のように見えないように、それに応じて入力をスタイルしますreadonly。

input[readonly] {
     cursor: text;
     background-color: #fff;
}

実施例

score 57 · Accepted Answer

さて、パーティーに少し遅れましたが、どのように機能するべきか、またどのように機能autocompleteすべきでないかについて、少し誤解があるようです。HTML 仕様によると、ユーザーエージェント (この場合は Chrome) は以下をオーバーライドできますautocomplete。

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

ユーザーエージェントは、ユーザーが要素の autofill フィールド名をオーバーライドできるようにすることができます。たとえば、「オフ」から「オン」に変更して、ページ作成者の反対にもかかわらず、値を記憶して事前入力できるようにするか、常に「オフ」にして記憶しないようにすることができます。値。ただし、サイトの設定に関係なく、すべての値が常に記憶されている場合、ユーザーにとって重大なセキュリティ上の影響があるため、ユーザーエージェントは、ユーザーが自動入力フィールド名を「オフ」から「オン」またはその他の値に簡単に上書きできるようにするべきではありません。

したがって、Chrome の場合、開発者は基本的に、「これはユーザーの好みに任せて、autocomplete作業するかどうかを決定します。必要ない場合は、ブラウザーで有効にしないでください」と述べています。 .

しかし、これは私の好みでは少し熱心すぎるように見えますが、それはその通りです。仕様では、このような移動の潜在的なセキュリティへの影響についても説明しています。

「off」キーワードは、コントロールの入力データが特に機密であることを示します (たとえば、核兵器のアクティベーションコード)。または、再利用されることのない値 (たとえば、銀行ログイン用のワンタイムキー) であるため、ユーザーは事前入力を UA に依存するのではなく、毎回明示的にデータを入力する必要があります。彼にとっての価値; または、ドキュメントが独自のオートコンプリートメカニズムを提供し、ユーザーエージェントがオートコンプリート値を提供することを望まない場合。

他のみんなと同じフラストレーションを経験した後、私は自分に合った解決策を見つけました. それはautocomplete="false"答えに似ています。

Mozilla の記事は、まさにこの問題について語っています。

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

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

したがって、次のコードが機能するはずです。

autocomplete="nope"

また、次のそれぞれについても同様です。

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

私が見ている問題は、ブラウザエージェントが属性を学習し、autocomplete次にフォームが表示されたときにそれを適用するのに十分なほどスマートである可能性があることです。これを行う場合、問題を回避する唯一の方法はautocomplete、ページの生成時に属性値を動的に変更することです。

言及する価値のあるポイントの 1 つは、多くのブラウザーがautocompleteログインフィールド (ユーザー名とパスワード) の設定を無視することです。Mozilla の記事には次のように記載されています。

このため、最新のブラウザの多くは、ログインフィールドの autocomplete="off" をサポートしていません。

サイトがフォームに autocomplete="off" を設定し、フォームにユーザー名とパスワードの入力フィールドが含まれている場合、ブラウザーは引き続きこのログインを記憶することを提案し、ユーザーが同意すると、ブラウザーは次回のログイン時にこれらのフィールドを自動入力します。ユーザーがこのページにアクセスします。

サイトでユーザー名とパスワードの入力フィールドに autocomplete="off" が設定されている場合、ブラウザーは引き続きこのログイン情報を記憶することを提案し、ユーザーが同意すると、次回ユーザーがこのページにアクセスしたときにブラウザーがこれらのフィールドに自動入力します。

これは、Firefox (バージョン 38 以降)、Google Chrome (34 以降)、および Internet Explorer (バージョン 11 以降) での動作です。

form最後に、属性が要素または要素のどちらに属しているかについて少し説明しますinput。仕様にも答えがあります。

autocomplete 属性が省略された場合、要素のフォーム所有者の autocomplete 属性の状態に対応するデフォルト値が代わりに使用されます (「on」または「off」)。フォーム所有者がいない場合は、値「on」が使用されます。

そう。フォームに配置すると、すべての入力フィールドに適用されます。個々の要素に配置すると、その要素だけに適用されます (フォームに要素がない場合でも)。autocompleteがまったく設定されていない場合は、デフォルトでになりonます。

概要

autocompleteフォーム全体で無効にするには:

<form autocomplete="off" ...>

または、動的に実行する必要がある場合:

<form autocomplete="random-string" ...>

autocomplete個々の要素を無効にするには (フォーム設定が存在するかどうかに関係なく)

<input autocomplete="off" ...>

または、動的に実行する必要がある場合:

<input autocomplete="random-string" ...>

また、特定のユーザーエージェントは、最も苦労して無効化しようとしても上書きできることを覚えておいてくださいautocomplete。

score 48 · Accepted Answer

TL;DR:これが新しいパスワード入力であり、オートコンプリートの候補として古いパスワードを提供しないことを Chrome に伝えます。

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

autocomplete="off"設計上の決定により機能しません。多くの調査によると、ユーザーがパスワードをブラウザーまたはパスワードマネージャーに保存できる場合、パスワードをハッキングするのははるかに長く、より困難になります。

の仕様autocomplete が変更され、ログインフォームのオートコンプリートを容易にするさまざまな値がサポートされるようになりました。

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

これらを提供しない場合でも、Chrome は推測を試みますが、推測した場合は無視しautocomplete="off"ます。

解決策は、autocompleteパスワードリセットフォームにも値が存在することです。

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

このautocomplete="new-password"フラグを使用して、このサイト用にパスワードが保存されている場合でも、Chrome にパスワードを推測しないように指示できます。

Chrome では、 credentials APIを使用してサイトのパスワードを直接管理することもできます。これは標準であり、最終的にはユニバーサルサポートされる予定です。

score 33 · Accepted Answer

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

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

それが他の人々に役立つことを願っています。

score 27 · Accepted Answer

ブラウザは autocomplete=off auto を気にしませんか、資格情報を間違ったテキストフィールドに入力しますか?

ユーザーがパスワードフィールドをクリックするか、このフィールドにタブキーを使用すると、パスワードフィールドを読み取り専用に設定してアクティブにすることで修正しました。

ブラウザーの自動入力を修正: readonly と set writeble on focus (マウスのクリックとフィールドのタブ移動)

 <input type="password" readonly  
     onfocus="$(this).removeAttr('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 フィールドにユーザー名を自動入力します (観察による推測です)。ブラウザは最後のインスタンスであり、それを制御することはできないため、autocomplete=off でさえ間違ったフィールドへの資格情報の入力を防止できない場合がありますが、ユーザーまたはニックネームフィールドは防止できません。

score 26 · Accepted Answer

Chrome バージョン 34 はを無視するようになりました。これautocomplete=offを参照してください。

これが良いことなのか悪いことなのかについて多くの議論がありますか? あなたの見解は？

score 11 · Accepted Answer

この回答を投稿して、この問題に対する最新のソリューションを提供します。私は現在Chrome 49を使用していますが、これに対する回答はありません。また、他のブラウザや以前のバージョンで動作するソリューションも探しています。

このコードをフォームの先頭に配置します

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

次に、実際のパスワードフィールドに、次を使用します。

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

これが機能しなくなった場合、または別のブラウザーまたはバージョンで問題が発生した場合は、この回答にコメントしてください。

承認日:

クローム : 49
ファイアフォックス : 44, 45
エッジ : 25
インターネットエクスプローラー：11

score 11 · Accepted Answer

クロムがを無視するのを見autocomplete="off"て、「本物の」入力ではなく、「偽の入力」を使用してクロムをだましてそれを埋めるという愚かな方法で解決します。

例：

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chrome は「偽の入力」を入力し、送信時にサーバーは「実際の入力」の値を取得します。

score 9 · Accepted Answer

これに対する解決策を探している人にとって、私はついにそれを理解します。

Chromeautocomplete="off"は、ページが HTML5 ページ (私は XHTML を使用していた) の場合にのみ従います。

ページを HTML5 に変換したところ、問題はなくなりました (facepalm)。

score 6 · Accepted Answer

先週まで、以下の 2 つのソリューションは Chrome、IE、および Firefox で機能しているように見えました。しかし、Chrome バージョン 48 (およびまだ 49) のリリースにより、それらは機能しなくなりました。

フォームの上部にある次の内容:

<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

パスワード入力要素の次のとおりです。

autocomplete="オフ"

したがって、これをすばやく修正するために、最初にパスワード入力要素を無効に設定するという主要なハックを使用してから、ドキュメント準備機能で setTimeout を使用して再度有効にしようとしました。

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

しかし、これは非常にクレイジーに思えたので、さらに検索を行ったところ、Disabling Chrome Autofill で @tibalts の回答が見つかりました。彼の答えは、パスワード入力で autocomplete="new-password" を使用することであり、これはすべてのブラウザーで機能するようです (この段階では上記の修正番号 1 を保持しています)。

Google Chrome デベロッパーディスカッションのリンクは次のとおりです: https://code.google.com/p/chromium/issues/detail?id=370363#c7

score 5 · Accepted Answer

Chrome 48+ では、次のソリューションを使用します。

偽のフィールドを実際のフィールドの前に置く:

<form autocomplete="off">
  <input name="fake_email"    class="visually-hidden" type="text">
  <input name="fake_password" class="visually-hidden" type="password">

  <input autocomplete="off" name="email"    type="text">
  <input autocomplete="off" name="password" type="password">
</form>

偽のフィールドを非表示:

.visually-hidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

できたね！

また、これは古いバージョンでも機能します。

score 4 · Accepted Answer

chrome v.34以降、タグでの設定autocomplete="off"が効かない<form>

この厄介な動作を回避するために変更を加えました。

パスワード入力のnameとを削除しますid
クラスを入力に入れます (例: passwordInput)

(これまでのところ、Chrome は保存されたパスワードを入力に入れませんが、フォームは壊れています)

最後に、フォームを機能させるには、ユーザーが送信ボタンをクリックしたとき、またはフォームの送信をトリガーするたびに、このコードを実行するようにします。

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

私の場合、id="password" name="password"以前はパスワードを入力していたので、送信をトリガーする前に元に戻しました。

score 4 · Accepted Answer

入力フィールドが名前または電子メールのいずれかを取るという同様の問題がありました。autocomplete="off" を設定しましたが、Chrome は引き続き提案を強制しました。プレースホルダーテキストに「名前」と「メール」という単語が含まれていたためでした。

例えば

<input type="text" placeholder="name or email" autocomplete="off" />

プレースホルダーの単語に幅ゼロのスペースを入れることで回避しました。Chrome のオートコンプリートはもうありません。

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />

score 3 · Accepted Answer

Chrome 49にアップデートしたところ、Diogo Cid のソリューションが機能しなくなりました。

ページがロードされた後、実行時にフィールドを非表示にして削除する別の回避策を作成しました。

Chrome は、資格情報を最初に表示され type="password"たフィールドとその前のフィールドに適用する元の回避策を無視するようになったので、 CSStype="text"を使用して両方のフィールドを非表示にしました visibility: hidden;

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

あまりエレガントではないように見えるかもしれませんが、機能します。

score 3 · Accepted Answer

Chrome は各バージョンでオートコンプリートを処理する方法を変更し続けています。私が思いついた方法は、フィールドを読み取り専用にし、onclick/focus を非読み取り専用にすることでした。この jQuery スニペットを試してください。

jQuery(document).ready(function($){
//======fix for autocomplete
$('input, :input').attr('readonly',true);//readonly all inputs on page load, prevent autofilling on pageload

 $('input, :input').on( 'click focus', function(){ //on input click
 $('input, :input').attr('readonly',true);//make other fields readonly
 $( this ).attr('readonly',false);//but make this field Not readonly
 });
//======./fix for autocomplete
});

score 2 · Accepted Answer

すべての解決策を試した後、フォームにパスワードフィールドがある chrome version:45 で動作しているように見えるものは次のとおりです。

 jQuery('document').ready(function(){
        //For disabling Chrome Autocomplete
        jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
 });

score 2 · Accepted Answer

autocomplete="off"今すぐ動作するので、次のことを実行できます。

<input id="firstName2" name="firstName2" autocomplete="off">

現在の Chrome 70 および Chrome 62 以降のすべてのバージョンでテスト済みです。

デモ:

上部inputにはオートコンプリートが機能しています
下部には、追加することinputでオートコンプリートが無効になっていますautocomplete="off"

score 1 · Accepted Answer

1

これで直ったようです！https://codereview.chromium.org/1473733008を参照してください

于 2016-04-04T09:47:26.687 に答える

score 1 · Accepted Answer

上記の回答を読んでもまだオートコンプリートが表示される場合は、これを試すことができます。ランダムな文字列を指定すると、オートコンプリートが削除されます。

<input autocomplete="somerandomstring" or autocomplete="disabled">

Idkは正しいかどうか、それは私にとってはうまくいきました。

score 0 · Accepted Answer

Chromeバージョン51.0.2704.106で私にとってうまくいったのは次のとおりです。<input id="user_name" type="text" name="user_name" autocomplete="off" required /> と組み合わせて<input id="user_password" type="password" name="user_password" autocomplete="new-password" required />。私の問題は、実装後new-passwordも user_name フィールドにユーザー名のドロップダウンが表示されることでした。

score 0 · Accepted Answer

次のことを試してみましたが、Chrome 53 でうまくいくようです。また、パスワードフィールドに入力するときに [パスワードを使用] ドロップダウンを無効にします。

パスワードの入力タイプをに設定し、ハンドラーを (インラインまたは jQuery/vanilla JS 経由で)text追加して、タイプをに設定するだけです。onfocuspassword

onfocus="this.setAttribute('type','password')"

またはさらに良い：

onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"

score 0 · Accepted Answer

オートコンプリートに偽のフィールドを与えることを除いて、解決策はどれも機能しませんでした。この問題に対処するために React コンポーネントを作成しました。

import React from 'react'

// Google Chrome stubbornly refuses to respect the autocomplete="off" HTML attribute so
// we have to give it a "fake" field for it to autocomplete that never gets "used".

const DontBeEvil = () => (
  <div style={{ display: 'none' }}>
    <input type="text" name="username" />
    <input type="password" name="password" />
  </div>
)

export default DontBeEvil

score -2 · Accepted Answer

autocomple="off"私は、属性を持つすべてのフィールドを照会し、その値を単一のスペースに設定し、約200ミリ秒のタイマーを設定し、値を空の文字列に戻す次のソリューションを思い付きました。

例：

// hack to prevent auto fill on chrome
var noFill = document.querySelectorAll("input[autocomplete=off]");

noFill.forEach(function(el) {
    el.setAttribute("value", " ");
    setTimeout(function() {
        el.setAttribute("value", "");
    }, 200);
});

タイマーに 200 ミリ秒を選択したのは、いくつかの実験の後、200 ミリ秒は、コンピューターでクロムがフィールドのオートコンプリートをあきらめるのにかかる時間のように思われるためです。他の人にとってより効果的であると思われる他の時間を聞くことを歓迎します.

html - Chrome は autocomplete="off" を無視します

65 に答える 65

現代的なアプローチ

Related

Reference