autocomplete
特定のinput
(またはform field
)の主要なブラウザでどのように無効にしますか?
autocomplete
特定のinput
(またはform field
)の主要なブラウザでどのように無効にしますか?
回答:
Firefox 30はautocomplete="off"
パスワードを無視し、パスワードをクライアントに保存するかどうかの代わりにユーザーにプロンプトを表示することを選択します。2014年5月5日の次の解説に注意してください。
- パスワードマネージャは、パスワードを保存するかどうかを常に確認します。ユーザーの許可なくパスワードを保存することはありません。
- 私たちは、IEとChromeに次いで、この変更を実装する3番目のブラウザーです。
Mozilla Developer Networkのドキュメントによると、ブールフォーム要素属性はautocomplete
、フォームデータが古いブラウザにキャッシュされるのを防ぎます。
<input type="text" name="foo" autocomplete="off" />
に加えてautocomplete=off
、ページを生成するコードによってフォームフィールド名をランダム化することもできます。名前の末尾にセッション固有の文字列を追加することもできます。
フォームが送信されたら、サーバー側で処理する前にその部分を取り除くことができます。これにより、Webブラウザーがフィールドのコンテキストを見つけることができなくなり、フォーム送信のフィールド名を攻撃者が推測できないため、XSRF攻撃を防ぐのに役立つ場合があります。
$_SESSION['codefield_name'] = md5(uniqid('auth', true));
主要なブラウザーとパスワードマネージャー(正しくは、私見)のほとんどがを無視しautocomplete=off
ます。
どうして?多くの銀行やその他の「高セキュリティ」のWebサイトがautocomplete=off
「セキュリティ目的で」ログインページに追加されていますが、オートコンプリートにより、これらの高セキュリティサイトのパスワードを覚えやすく(そしてクラック)変更するため、実際にはセキュリティが低下します。壊れた。
ずっと前に、ほとんどのパスワードマネージャーはを無視し始めましたがautocomplete=off
、今ではブラウザーはユーザー名/パスワードの入力に対してのみ同じことを実行し始めています。
残念ながら、オートコンプリートの実装のバグにより、ユーザー名やパスワードの情報が不適切なフォームフィールドに挿入され、フォーム検証エラーが発生します。さらに、ユーザーが意図的に空白のままにしたフィールドにユーザー名を誤って挿入してしまうこともあります。
Web開発者は何をすべきですか?
Chrome 34は、残念ながら、パスワードフィールドを検出すると、フィールドにuser / passを自動入力しようとします。これはかなり悪いバグで、うまくいけば、Safariの動作が変更されるでしょう。ただし、これをフォームの上部に追加すると、パスワードの自動入力が無効になるようです。
<input type="text" style="display:none">
<input type="password" style="display:none">
私はまだIEやFirefoxを徹底的に調査していませんが、コメントに他の情報があれば、喜んで回答を更新します。
type='password'
1つのページに2つのフィールドを作成すると、ブラウザの「パスワードを保存」のオートコンプリートが無視され、ログインフォームでパスワードを1回要求するだけで、登録フォームでパスワードを2回要求する傾向があるため、これは大きな意味を持ちます。
時にはでもオートコンプリートオフ=でしょう埋めるために防ぐことはできません、ユーザーやニックネームフィールド間違ったフィールドに資格証明書ではなく。
この回避策は、ブラウザの動作に関する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
が削除されるとすぐに、その後フィールドを選択すると、オートコンプリートが返されます。
<form name="form1" id="form1" method="post"
autocomplete="off" action="http://www.example.com/form.cgi">
これはInternet ExplorerとMozilla FireFoxで機能しますが、欠点はXHTML標準ではないことです。
input type="password"
。他のブラウザがこの機能を削除することを選択しないことを願っています。
autocomplete="off"
には、form
クロームのために働いていた唯一のものです。
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
変更が有効になることを確認してください。ブラウザがページをキャッシュに何度も保存します。これは機能しないという悪い印象を与えましたが、ブラウザは実際には変更をもたらしませんでした。
他の人が言ったように、答えは autocomplete="off"
ただし、これに対するいくつかの回答と重複する質問から、これをオフにしない方がよいことが示唆されているため、特定のケースでこれを使用するのがなぜ良いのかを述べる価値があると思います。
クレジットカード番号を保存しているブラウザを停止することは、ユーザーに任せるべきではありません。多くのユーザーは、それが問題であることにさえ気付かないでしょう。
クレジットカードのセキュリティコードのフィールドではオフにすることが特に重要です。同様に、このページの状態:
「セキュリティコードは決して保存しないでください。その価値は、コードを提供する唯一の方法が物理的なクレジットカードから読み取ることであり、コードを提供した人が実際にカードを持っていることを証明するという仮定に依存しています。」
問題は、それが公共のコンピューター(サイバーカフェ、図書館など)である場合、他のユーザーがカードの詳細を盗むのが簡単であり、自分のマシンでさえ、悪意のあるWebサイトが オートコンプリートデータを盗むです。
ランダムな文字を使用して、Google Chromeとの無限の戦いを解決しました。常にランダムな文字列でオートコンプリートをレンダリングすると、何も覚えられません。
<input name="name" type="text" autocomplete="rutjfkde">
それが他の人々に役立つことを願っています。
autocompleteoff
クラスを目的の入力フィールドに追加できます。
オートコンプリートを無効にすることを避けるために言うそれらの答えとは異なることを頼む必要があります。
最初に取り上げるのは、ログインフォームフィールドでオートコンプリートが明示的に無効にされていないことがPCI-DSSの失敗であることです。さらに、ユーザーのローカルマシンが危険にさらされている場合、オートコンプリートデータは平文で保存されているため、攻撃者が簡単に取得できます。
使いやすさについては確かに議論がありますが、どのフォームフィールドでオートコンプリートを無効にするべきか、そうでないべきかに関しては、非常に微妙なバランスがあります。
3つのオプション:最初:
<input type='text' autocomplete='off' />
第二:
<form action='' autocomplete='off'>
3番目(JavaScriptコード):
$('input').attr('autocomplete', 'off');
関連または実際には、完全に反対のノート-
「前述のフォームのユーザーがオートコンプリート機能を再度有効にしたい場合は、このブックマークレットページから「パスワードを記憶」ブックマークレットを使用
autocomplete="off"
してください。ページ上のすべてのフォームからすべての属性が削除されます。頑張って戦いましょう! 」
実際にsasbを使用しました、1つのサイトでのアイデアを。診療所を運営する医療ソフトのウェブアプリでした。ただし、クライアントの多くは外科医で、セミパブリックターミナルなど、さまざまなワークステーションを使用していました。そのため、自動保存されたパスワードの意味を理解していない、または注意を払っていない医師が、誤って自分のログイン情報に簡単にアクセスできる状態にしないようにしたいと考えていました。もちろん、これはIE8やFF3.1などで取り上げられるプライベートブラウジングの発想の前でした。それでも、多くの医師は病院で古いITブラウザーを使用せざるを得ず、ITは変わりません。
そのため、その投稿でのみ機能するランダムなフィールド名をログインページで生成しました。はい、それはあまり便利ではありませんが、公共の端末にログイン情報を保存しないことについてユーザーを頭にぶつけるだけです。
この会話では、解決策のどれも私にとってうまくいきませんでした。
Javascriptを必要としない純粋なHTMLソリューションをついに見つけました、最新のブラウザー(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>
私は無限の解決策を試みてきました、そして私はこれを見つけました:
autocomplete="off"
単に使用する代わりにautocomplete="false"
とてもシンプルで、Google Chromeでも同様に機能します。
これでうまくいきます。
<input name="pass" type="password" autocomplete="new-password" />
この戦略は、テキスト、選択などの他のコントロールでも使用できます。
autocomplete=off
HTML 5でサポートされていると思います。
ただし、なぜこれを実行するのかを自問してみてください。状況によってはそれが理にかなっている可能性がありますが、それを実行するためだけに実行しないでください。
ユーザーにとっては不便であり、OS Xのセキュリティの問題(以下のSorenが言及)でさえありません。ユーザーがリモートでパスワードを盗まれるのを心配している場合-アプリが使用していても、キーストロークロガーはそれを実行できますautcomplete=off
。
ブラウザに私の情報の(ほとんど)を記憶させることを選択したユーザーは、サイトが私の情報を覚えていなかったとしても不快だと思います。
に加えて
autocomplete="off"
使用する
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');" >
お役に立てれば。
$(document).on('focus', 'input:password[readonly="readonly"]', function () { $(this).prop('readonly', false).blur().focus(); });
onfocusout="this.setAttribute('readonly', 'readonly');"
最適なソリューション:
オートコンプリートのユーザー名(または電子メール)とパスワードを禁止する:
<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
autocomplete
属性の文字列値を設定しようとしましたが、それでも入力の下にオートコンプリート候補として以前のエントリが表示されます。
autocomplete
した値は関係ありませんが、以前に入力した値に基づいて提案ドロップダウンが表示されます。デスクトップでは問題ありませんが、Androidクロムでは問題ありません。
追加しautocomplete="off"
てもカットされません。
入力タイプ属性をに変更しますtype="search"
。
Googleは、検索タイプの入力に自動入力を適用しません。
フィールドには非標準の名前とIDを使用してください。「名前」ではなく「名前_」を使用してください。その場合、ブラウザはそれを名前フィールドとして認識しません。それの最も良い部分は、これをすべてではなく一部のフィールドに対して行うことができ、一部ではなくすべてのフィールドをオートコンプリートすることです。
無効なXHTMLを回避するために、JavaScriptを使用してこの属性を設定できます。jQueryの使用例:
<input type="text" class="noAutoComplete" ... />
$(function() {
$('.noAutoComplete').attr('autocomplete', 'off');
});
問題は、JavaScriptを使用していないユーザーがオートコンプリート機能を利用できることです。
報告されてからしばらく経っても、これがまだ問題であるとは思えません。要素が表示されなかったり、画面外に表示されなかったりしたときにSafariが認識していたため、上記の解決策は機能しませんでしたが、次の機能は機能しました。
<div style="height:0px; overflow:hidden; ">
Username <input type="text" name="fake_safari_username" >
Password <input type="password" name="fake_safari_password">
</div>
それが誰かに役立つことを願っています!
だからここにあります:
function turnOnPasswordStyle() {
$('#inputpassword').attr('type', "password");
}
<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">
これは現在ブラウザが無視しているセキュリティ問題です。開発者が機密情報であり、保存すべきではないと考えている開発者であっても、ブラウザーは入力名を使用してコンテンツを識別および保存します。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>
次に、サーバーは次のようにpost変数を処理します。
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']);
また、ブラウザは以前のリクエストや以前のユーザーからの情報を提案することはできません。
ブラウザが更新されても、オートコンプリートを無視したいかどうかにかかわらず、すべてが魅力のように機能します。それが私にとって問題を修正する最良の方法でした。
ここで述べたハックはどれも私にとってChromeでは機能しませんでした。ここで問題の議論があります:https : //code.google.com/p/chromium/issues/detail?id=468153#c41
これを<form>
作品の中に追加します(少なくとも今のところ):
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>
maxlength="0"
すると、Firefoxがフィールドに自動入力するのを防ぐことができます。