主要なブラウザーで特定の入力 (またはフォーム フィールド) のオートコンプリートを無効にするにはどうすればよいですか?
93 に答える
Firefox 30 はパスワードを無視autocomplete="off"
し、代わりにパスワードをクライアントに保存するかどうかをユーザーに確認することを選択します。2014 年 5 月 5 日の次のコメントに注意してください。
- パスワード マネージャーは、パスワードを保存するかどうかを常に確認します。ユーザーの許可なくパスワードを保存することはありません。
- IE と Chrome に続いて、この変更を実装した 3 番目のブラウザーです。
Mozilla Developer Networkのドキュメントによると、Boolean フォーム要素属性autocomplete
により、フォーム データが古いブラウザにキャッシュされなくなります。
<input type="text" name="foo" autocomplete="off" />
の設定autocomplete=off
に加えて、おそらく名前の末尾にセッション固有の文字列を追加することで、ページを生成するコードによってフォーム フィールド名をランダム化することもできます。
フォームが送信されると、サーバー側で処理する前にその部分を取り除くことができます。これにより、Web ブラウザーがフィールドのコンテキストを見つけることができなくなり、攻撃者がフォーム送信のフィールド名を推測できないため、XSRF 攻撃を防ぐのにも役立つ可能性があります。
場合によっては、autocomplete=off でさえ、認証情報を間違ったフィールドに入力することは防げませんが、ユーザーまたはニックネーム フィールドには防げません。
この回避策は、ブラウザーの動作に関する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 フィールドを自動入力します (観察による推測のみ)。ブラウザは最後のインスタンスであり、制御することはできません。
上記の読み取り専用の修正は私にとってはうまくいきました。
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>
タイプ passwordのボックスが見つかった場合、Chrome は常にデータをオートコンプリートします。そのボックスを示すのに十分なだけautocomplete = "new-password"
です。
これは私にとってはうまくいきます。
注:F12変更が反映されていることを確認してください。多くの場合、ブラウザーはページをキャッシュに保存します。これにより、ページが機能しないという悪い印象を受けましたが、ブラウザーは実際には変更を反映しませんでした。
<form name="form1" id="form1" method="post"
autocomplete="off" action="http://www.example.com/form.cgi">
これは、InternetExplorerとMozillaFirefoxで機能します。欠点は、XHTML標準ではないことです。
他の人が言ったように、答えはautocomplete="off"
です。
ただし、これに対するいくつかの回答と重複した質問は、オフにしないほうがよいことを示唆しているため、特定の場合にこれを使用することをお勧めする理由を述べる価値があると思います。
クレジット カード番号を保存するブラウザーの停止は、ユーザーに任せるべきではありません。あまりにも多くのユーザーが、それが問題であることさえ認識していません。
クレジット カード セキュリティ コードのフィールドでオフにすることは特に重要です。このページには次のように記載されています。
「セキュリティコードを決して保存しないでください...その価値は、それを提供する唯一の方法は物理的なクレジットカードから読み取ることであり、それを提供した人が実際にカードを持っていることを証明することであるという仮定に依存します。」
問題は、それが公共のコンピューター (サイバー カフェ、図書館など) である場合、他のユーザーがカードの詳細を盗むのは簡単であり、自分のマシンでも悪意のある Web サイトがオートコンプリート データを盗む可能性があることです。
Google Chrome との果てしない戦いを、ランダムな文字を使用して解決しました。常にランダムな文字列でオートコンプリートをレンダリングすると、何も記憶されません。
<input name="name" type="text" autocomplete="rutjfkde">
それが他の人々に役立つことを願っています。
オートコンプリートを無効にしないようにするという回答とは違うように頼まなければなりません。
最初に取り上げるべきことは、ログインフォームフィールドでオートコンプリートが明示的に無効にされていないことは、PCI-DSS の失敗です。さらに、ユーザーのローカル マシンが侵害された場合、オートコンプリート データは平文で保存されているため、攻撃者によって簡単に取得される可能性があります。
使いやすさについては確かに議論がありますが、オートコンプリートを無効にする必要があるフォーム フィールドとそうでないフォーム フィールドについては、非常に微妙なバランスが取れています。
3 つのオプション:
初め:
<input type='text' autocomplete='off' />
2番:
<form action='' autocomplete='off'>
3 番目 (JavaScript コード):
$('input').attr('autocomplete', 'off');
関連して、または実際には、まったく反対のメモで -
「前述のフォームのユーザーで、オートコンプリート機能を再度有効にしたい場合は、このブックマークレット ページの「パスワードを記憶する」ブックマークレットを使用してください。ページ上のすべてのフォームからすべての属性が削除
autocomplete="off"
されます。頑張って戦い続けてください! "
設定するだけですautocomplete="off"
。これを行うのには非常に理由があります。独自のオートコンプリート機能を提供したいのです。
この会話では、どの解決策もうまくいきませんでした。
私は最終的に、JavaScriptを必要とせず、最新のブラウザー (Internet Explorer を除く。少なくとも 1 つのキャッチが必要でしたね?) で動作し、フォーム全体のオートコンプリートを無効にする必要がない純粋な HTML ソリューションを見つけました。 .
でオートコンプリートをオフにしてから、フォーム内で機能させたいものに対して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 でも魅力的に機能します!
sasbのアイデアを 1 つのサイトで実際に使用しました。
医院を運営するための医療ソフトWebアプリでした。しかし、私たちのクライアントの多くは外科医で、半公共の端末を含むさまざまなワークステーションを使用していました。そのため、自動保存されたパスワードの意味を理解していない、または注意を払っていない医師が、誤ってログイン情報を簡単にアクセスできる状態にしておかないようにする必要がありました。
もちろん、これは、Internet Explorer 8 や Firefox 3.1 などで機能し始めているプライベート ブラウジングのアイデアが登場する前のことです。それでも、多くの医師は、IT を備えた病院で古い学校のブラウザーを使用することを余儀なくされており、それは今後も変わりません。
そのため、ログインページで、その投稿でのみ機能するランダムなフィールド名を生成しました。はい、不便ですが、公共の端末にログイン情報を保存しないことについて、ユーザーの頭を悩ませているだけです。
autocomplete=off
HTML5でサポートされていると思います。
ただし、なぜこれを行う必要があるのかを自問してください。状況によっては理にかなっている場合もありますが、単に実行するためだけに実行しないでください。
ユーザーにとって不便であり、OS X のセキュリティの問題でさえありません (下記の Soren が言及しています)。リモートでパスワードが盗まれることを心配している場合は、アプリでautcomplete=off
.
ブラウザーに私の情報 (大部分) を記憶させることを選択したユーザーとして、あなたのサイトが私の情報を記憶していなかったら、私はうっとうしいと思います。
私はちょうどこの問題に遭遇し、いくつかの失敗を試みましたが、これは私にとってはうまくいきます( MDNにあります):
場合によっては、オートコンプリート属性がオフに設定されていても、ブラウザーはオートコンプリート値を提案し続けます。この予期しない動作は、開発者にとって非常に困惑する可能性があります。非補完を実際に強制する秘訣は、次のように属性にランダムな文字列を割り当てることです。
autocomplete="nope"
フィールドには非標準の名前とIDを使用するため、「name」ではなく「name_」を使用します。その場合、ブラウザはそれを名前フィールドとして認識しません。
それについての最もよい部分は、すべてではないがいくつかのフィールドにこれを行うことができ、すべてではないがいくつかのフィールドをオートコンプリートすることです。
追加しても減りautocomplete="off"
ません。
input
type 属性を に変更しますtype="search"
。
Google は、検索タイプの入力にオートフィルを適用しません。
追加する
autocomplete="off"
input
フォームタグに追加すると、その特定のフォーム内のすべてのフィールドからブラウザのオートコンプリート(以前にそのフィールドに入力されたもの)が無効になります。
テスト済み:
- Firefox 3.5、4ベータ版
- Internet Explorer 8
- クロム
無効な XHTML を回避するために、JavaScript を使用してこの属性を設定できます。jQuery を使用した例:
<input type="text" class="noAutoComplete" ... />
$(function() {
$('.noAutoComplete').attr('autocomplete', 'off');
});
問題は、JavaScript を使用しないユーザーがオートコンプリート機能を利用できることです。
これは、ブラウザが現在無視しているセキュリティ上の問題です。ブラウザーは、開発者がその情報を機密情報であり、保存すべきではないと考えている場合でも、入力名を使用してコンテンツを識別して保存します。
2 つのリクエスト間で異なる入力名を作成すると、問題は解決します (ただし、ブラウザのキャッシュに保存され、ブラウザのキャッシュも増加します)。
ブラウザの設定でオプションを有効または無効にするようにユーザーに依頼することは、適切な解決策ではありません。この問題はバックエンドで修正できます。
これが修正です。すべてのオートコンプリート要素は、次のような非表示の入力で生成されます。
<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method="POST" action="./">
<input type="text" name="<?php echo $r; ?>" />
<input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" />
<input type="submit" name="submit" value="submit" />
</form>
次に、サーバーは投稿変数を次のように処理します: ( Demo )
foreach ($_POST as $key => $val) {
$newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
if ($count) {
$_POST[$val] = $_POST[$newKey];
unset($_POST[$key], $_POST[$newKey]);
}
}
値には通常どおりアクセスできます
echo $_POST['username'];
また、ブラウザは、以前のリクエストまたは以前のユーザーからの情報を提案できなくなります。
これは、ブラウザーがオートコンプリート属性を無視/尊重するように技術を更新した場合でも引き続き機能します。
autocomplete="off"
うまくいかない場合は、これらも試してください。
autocorrect="off" autocapitalize="off" autocomplete="off"
で使用できますinput
。
例えば;
<input type=text name="test" autocomplete="off" />
最近のブラウザの多くは、ログイン フィールドの autocomplete="off" をサポートしていません。
autocomplete="new-password"
代わりに wokring です。詳細はMDN ドキュメント
タグを削除すると、オートコンプリートを無効にできますform
。
同じことが私の銀行によって行われました。タグを削除した後、ブラウザーによって既に記憶されている値も削除されます。
Chrome はこれをサポートする予定です。
今のところ、ほとんどオートコンプリートされない入力タイプを使用することをお勧めします。
<input type='search' name="whatever" />
Firefox と互換性を持たせるには、通常の autocomplete='off' を使用します
<input type='search' name="whatever" autocomplete='off' />
パスワード フィールドがオートコンプリートされているという問題がある場合は、これが役立つ場合があります...
この問題は、ビジネスがユーザーにユーザー名とパスワードを再クエリしたいサイトのいくつかの領域で発生し、特に契約上の理由でパスワードの自動入力が機能することを望んでいませんでした. これを行う最も簡単な方法は、ブラウザが見つけて入力できるように偽のパスワード フィールドを配置し、実際のパスワード フィールドは変更しないことです。
<!-- This is a fake password input to defeat the browser's autofill behavior -->
<input type="password" id="txtPassword" style="display:none;" />
<!-- This is the real password input -->
<input type="password" id="txtThisIsTheRealPassword" />
Firefox と IE では、実際のパスワードの前に任意のタイプのパスワードを入力するだけで十分でしたが、Chrome はそれを見抜いて、偽のパスワード入力に実際に名前を付けるように強制しました (明白なパスワード ID を与えることによって)。 "一口"。埋め込みスタイルを使用する代わりにクラスを使用してスタイルを実装したので、何らかの理由で上記が機能しない場合は試してください。
これは、テキストボックスのオートコンプリートと呼ばれるものです。
Textbox のオートコンプリートを無効にするには、次の 2 つの方法があります。
ブラウザのラベル別
コード別
ブラウザで無効にするには、設定に移動します
詳細設定に移動し、チェックボックスをオフにしてから復元します。
コーディングラベルで無効にしたい場合は、次のようにすることができます -
使用AutoCompleteType="Disabled"
:
<asp:TextBox runat="server" ID="txt_userid" AutoCompleteType="Disabled"></asp:TextBox>
フォームを設定することによりautocomplete="off"
:
<asp:TextBox runat="server" ID="txt_userid" autocomplete="off"></asp:TextBox>
フォームを設定することによりautocomplete="off"
:
<form id="form1" runat="server" autocomplete="off">
// Your content
</form>
.cs ページでコードを使用する方法:
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
txt_userid.Attributes.Add("autocomplete", "off");
}
}
jQueryを使用して
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txt_userid').attr('autocomplete', 'off');
});
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
try {
$("input[type='text']").each(
function(){
$(this).attr("autocomplete", "off");
});
}
catch (e) {
}
});
</script>
私の問題は主に Chrome での自動入力でしたが、これはおそらく自動補完よりも問題があると思います。
トリック: タイマーを使用してフォームをリセットし、パスワード フィールドを空白に設定します。100 ミリ秒の持続時間は、動作するための最小値のようです。
$(document).ready(function() {
setTimeout(function() {
var $form = $('#formId');
$form[0].reset();
$form.find('INPUT[type=password]').val('');
}, 100);
});
アイデアは、元のフィールドの前に同じ名前の非表示フィールドを作成することです。これにより、ブラウザは非表示フィールドに自動入力されます。
次の jQuery スニペットを使用します。
// Prevent input autocomplete
$.fn.preventAutocomplete = function() {
this.each(function () {
var $el = $(this);
$el
.clone(false, false) // Make a copy (except events)
.insertBefore($el) // Place it before original field
.prop('id', '') // Prevent ID duplicates
.hide() // Make it invisible for user
;
});
};
そして、ちょうど$('#login-form input').preventAutocomplete();
残念ながら、このオプションはほとんどのブラウザで削除されているため、パスワード ヒントを無効にすることはできません。
今日まで、この問題を回避するための適切な解決策が見つかりませんでした。私たちが今残しているのは、いつの日かこのオプションが戻ってくることを願うことです.
入力コントロールで autocomplete = off を使用して、オートコンプリートを回避できます
例えば:
<input type=text name="test" autocomplete="off" />
上記のコードが機能しない場合は、それらの属性も追加してみてください
autocapitalize="off" autocomplete="off"
また
入力タイプ属性を に変更しますtype="search"
。Google は、検索タイプの入力にオートフィルを適用しません。
自動入力機能は、フィールドを選択せずに値を変更します。これを状態管理で使用して、select イベントの前に状態の変化を無視することができます。
Reactの例:
import React, {Component} from 'react';
class NoAutoFillInput extends Component{
constructor() {
super();
this.state = {
locked: true
}
}
onChange(event){
if (!this.state.locked){
this.props.onChange(event.target.value);
}
}
render() {
let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () => this.setState({locked: false})}};
return <input {...props}/>;
}
}
export default NoAutoFillInput;
ブラウザーがフィールドに入力しようとしても、要素はロックされたままで、状態は影響を受けません。入力フィールドを NoAutoFillInput コンポーネントに置き換えるだけで、オートフィルを防ぐことができます。
<div className="form-group row">
<div className="col-sm-2">
<NoAutoFillInput type="text" name="myUserName" className="form-control" placeholder="Username" value={this.state.userName} onChange={value => this.setState({userName: value})}/>
</div>
<div className="col-sm-2">
<NoAutoFillInput type="password" name="myPassword" className="form-control" placeholder="Password" value={this.state.password} onChange={value => this.setState({password: value})}/>
</div>
</div>
もちろん、このアイデアは他の JavaScript フレームワークでも使用できます。
私は同じ問題を経験しました。今日、2019年9月10日、私が見つけた唯一の解決策はこれでした
form タグに autocomplete="off" を追加します。
フォームタグを開いた後に1つの偽の入力を置きます。
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
ただし、パスワードタイプフィールドでは機能しません。試してください
<input type="text" oninput="turnOnPasswordStyle()" placeholder="Enter Password" name="password" id="password" required>
スクリプト上
function turnOnPasswordStyle() {
$('#password').attr('type', "password");
}
これは、Chrome-78、IE-44、Firefox-69 でテストされています。
私の解決策は、angular js ディレクティブを使用してテキスト入力タイプを動的に変更することであり、魅力的に機能します
最初に 2 つの隠しテキスト フィールドを追加します
このような角度ディレクティブを追加するだけです
(function () {
'use strict';
appname.directive('changePasswordType', directive);
directive.$inject = ['$timeout', '$rootScope', '$cookies'];
function directive($timeout, $rootScope, $cookies) {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope,element) {
var process = function () {
var elem =element[0];
elem.value.length > 0 ? element[0].setAttribute("type", "password") :
element[0].setAttribute("type", "text");
}
element.bind('input', function () {
process();
});
element.bind('keyup', function () {
process();
});
}
}
})()
次に、オートコンプリートを防ぐ必要があるテキストフィールドで使用します
<input type="text" style="display:none">\\can avoid this 2 lines
<input type="password" style="display:none">
<input type="text" autocomplete="new-password" change-password-type>
注意: jquery を含めることを忘れずに、type ="text"
最初に設定してください
Internet Explorer 11 に関しては、オートコンプリートをブロックするために使用できるセキュリティ機能が実装されています。
それはこのように動作します:
ユーザーがすでに入力した後に JavaScript で変更されたフォーム入力値は、オートコンプリートの対象外としてフラグが立てられます。
この機能は通常、パスワードを入力した後などにパスワードを変更しようとする悪意のある Web サイトからユーザーを保護するために使用されます。
ただし、パスワード文字列の先頭に 1 つの特殊文字を挿入して、オートコンプリートをブロックすることができます。この特殊文字は、パイプラインの後半で検出され、削除される可能性があります。
ページの読み込み後にこのコードを配置することを解決しました:
<script>
var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
$('input[type=text]').attr('autocomplete',randomicAtomic);
</script>
<input type="text" name="attendees" id="autocomplete-custom-append">
<script>
/* AUTOCOMPLETE */
function init_autocomplete() {
if (typeof ($.fn.autocomplete) === 'undefined') {
return;
}
// console.log('init_autocomplete');
var attendees = {
1: "Shedrack Godson",
2: "Hellen Thobias Mgeni",
3: "Gerald Sanga",
4: "Tabitha Godson",
5: "Neema Oscar Mracha"
};
var countriesArray = $.map(countries, function (value, key) {
return {
value: value,
data: key
};
});
// initialize autocomplete with custom appendTo
$('#autocomplete-custom-append').autocomplete({
lookup: countriesArray
});
};
</script>
私はすでにこれに対する解決策をここに投稿しました: Disable Chrome Autofill creditcard
回避策は、オートコンプリート属性を「cc-csc」として設定することです。その値はクレジット カードのCSCであり、それを保存することは許可されていません。(今のところ...)
autocomplete="cc-csc"
私がテストしたすべてのブラウザーで、提供された回答はどれも機能しませんでした。すでに提供された回答に基づいて、これがChrome 61、Microsoft Edge 40 (EdgeHTML 15)、IE 11、Firefox 57、Opera 49、およびSafari 5.1で(テストされた)最終的なものです。多くの試行錯誤の結果、奇抜です。しかし、それは私にとってはうまくいきます。
<form autocomplete="off">
...
<input type="password" readonly autocomplete="off" id="Password" name="Password" onblur="this.setAttribute('readonly');" onfocus="this.removeAttribute('readonly');" onfocusin="this.removeAttribute('readonly');" onfocusout="this.setAttribute('readonly');" />
...
</form>
<script type="text/javascript">
$(function () {
$('input#Password').val('');
$('input#Password').on('focus', function () {
if (!$(this).val() || $(this).val().length < 2) {
$(this).attr('type', 'text');
}
else {
$(this).attr('type', 'password');
}
});
$('input#Password').on('keyup', function () {
if (!$(this).val() || $(this).val().length < 2) {
$(this).attr('type', 'text');
}
else {
$(this).attr('type', 'password');
}
});
$('input#Password').on('keydown', function () {
if (!$(this).val() || $(this).val().length < 2) {
$(this).attr('type', 'text');
}
else {
$(this).attr('type', 'password');
}
});
</script>
入力タイプに値「オフ」のオートコンプリート属性を入れてみてください。
<input type="password" autocomplete="off" name="password" id="password" />
Chrome はオートコンプリートを強制しようとし続けます。そのため、いくつかの作業を行う必要があります。
入力フィールドの属性id
でname
あり、認識できない必要があります。したがって、名前、電話番号、住所などの値はありません。
隣接するラベルまたは div も認識できない必要があります。しかし、ユーザーはどのようにしてそれを知るのでしょうか? ::after
を使ってできるちょっとした楽しいトリックがありますcontent
。文字に設定できます。
<label>Ph<span class='o'></span>ne</label>
<input id='phnbr' name='phnbr' type='text'>
<style>
span.o {
content: 'o';
}
</style>