ブラウザがパスワードを保存しないようにする方法
より安全なデータを含むWebアプリケーションで作業しているため、ブラウザーがユーザー名とパスワードの値を保存しないようにする必要があります。私のクライアントはこれをするように私に頼みました。
HTMLフォームとパスワードフィールドでautocomplete="off"属性を試しました。ただし、Chrome 55、Firefox 38 +、IE 11 ...などの最新のブラウザでは動作しません。
これに最適なソリューションは何ですか？
返信してくれてありがとう。私は以下のリンクをたどった
以下に示すように、入力にautocomplete="off"のほかにreadonlyおよびonfocus="this.removeAttribute('readonly');"属性を追加するだけで問題を解決しました。
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
これは私にとってはうまく機能しています。
これは最新のブラウザでは不可能であり、正当な理由があります。最新のブラウザには、ユーザーが通常よりも強力なパスワードを使用できるようにするパスワードマネージャーが用意されています。
最新のブラウザは統合されたパスワード管理を実装しています。ユーザーがサイトのユーザー名とパスワードを入力すると、ブラウザーはユーザーのためにそれを記憶することを提案します。ユーザーがサイトに再度アクセスすると、ブラウザはログインフィールドに保存された値を自動入力します。
さらに、ブラウザでは、保存されたログイン詳細の暗号化に使用するマスターパスワードをユーザーが選択できます。
マスターパスワードがなくても、ブラウザ内でのパスワード管理は、一般的にセキュリティの純益と見なされます。ユーザーは、ブラウザが保存するパスワードを覚えておく必要がないため、他の方法よりも強力なパスワードを選択できます。
このため、最近の多くのブラウザは、ログインフィールドに対して
autocomplete="off"をサポートしていません：
サイトがフォームに
autocomplete="off"を設定し、フォームにユーザー名とパスワードの入力フィールドが含まれている場合、ブラウザーは引き続きこのログインを記憶し、ユーザーが同意すると、ブラウザーはユーザーが次にページにアクセスしたときにこれらのフィールドを自動入力します。サイトがユーザー名とパスワードの入力フィールドに
autocomplete="off"を設定する場合、ブラウザーは引き続きこのログインを記憶することを提案し、ユーザーが同意すると、ブラウザーはユーザーが次にページにアクセスしたときにこれらのフィールドを自動入力します。これは、Firefox（バージョン38以降）、Google Chrome（34以降）、およびInternet Explorer（バージョン11以降）の動作です。
作成者が、ユーザーが自分以外のユーザーの新しいパスワードを指定できるユーザー管理ページのパスワードフィールドの自動入力を禁止する場合は、
autocomplete="new-password"を指定する必要がありますが、これはまだすべてのブラウザーで実装されていません。
以下は、ChromeのHTML/CSSソリューションのバージョン65.0.3325.162（公式ビルド）（64ビット）。
入力type="text"を設定し、CSStext-security:discを使用してtype="password"を模倣します。
<input type="text" name="username">
<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;">
注：FireFoxで動作しますが、CSS
moz-text-securityは廃止/削除されました。これを修正するには、ドットのみで構成されるCSSfont-faceを作成し、font-family: 'dotsfont';を使用します。上記のソースには、CSS
moz-text-securityおよび-webkit-text-securityプロパティの回避策へのリンクが含まれています。私がテストした限り、このソリューションはChrome、FireFoxバージョン59.0（64ビット）、IEバージョン11.0.9600およびIEエミュレータie5以上。
あなたはそれを防ぐために偽の隠されたパスワードボックスを作ることができるはずです。
<form>
<div style="display:none">
<input type="password" tabindex="-1"/>
</div>
<input type="text" name="username" placeholder="username"/>
<input type="password" name="password" placeholder="password"/>
</form>
デフォルトでは、ブラウザでパスワードの保存を無効にする適切な回答はありません。しかし、幸いなことに回避方法があり、ほとんどすべてのブラウザーで機能します。
これを実現するには、autocomplete = "off"で実際の入力の直前にダミー入力を追加し、カスタムスタイルを設定して非表示にし、tabIndexを提供します。ブラウザ（Chrome）のオートコンプリートは、最初に見つかったパスワード入力とその前の入力を埋めるので、このトリックでは重要ではない不可視の入力のみを埋めます。
<div className="password-input">
<input
type="password"
id="prevent_autofill"
autoComplete="off"
style={{
opacity: '0',
position: 'absolute',
height: '0',
width: '0',
padding: '0',
margin: '0'
}}
tabIndex="-2"
/>
<input
type="password"
autoComplete="off"
className="password-input-box"
placeholder="Password"
onChange={e => this.handleChange(e, 'password')}
/>
</div>
これを試してみると、助けになるかもしれません。詳細については、 入力タイプ=パスワード、ブラウザにパスワードを記憶させないでください
function setAutoCompleteOFF(tm){
if(typeof tm =="undefined"){tm=10;}
try{
var inputs=$(".auto-complete-off,input[autocomplete=off]");
setTimeout(function(){
inputs.each(function(){
var old_value=$(this).attr("value");
var thisobj=$(this);
setTimeout(function(){
thisobj.removeClass("auto-complete-off").addClass("auto-complete-off-processed");
thisobj.val(old_value);
},tm);
});
},tm);
}catch(e){}
}
$(function(){
setAutoCompleteOFF();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="passfld" type="password" autocomplete="off" />
<input type="submit">できることの1つは、サイトのパスワードの保存を無効にするようユーザーに依頼することです。これは、ブラウザ全体またはOrigin全体で実行できます。
他にできることは、ページがロードされた後（およびブラウザーがフィールドを自動完了した後）に入力を強制的に空にすることです。このスクリプトを<body>要素の最後に配置します。
userIdInputElement.value = "";
userPasswordInputElement.value = "";
最新のブラウザでは不可能だと思います。それを行う唯一の方法は、別の隠されたパスワードフィールドを取得し、送信中に表示されたパスワードフィールドから値を取得し、表示されたパスワードフィールドにダミー文字列を入れた後、ロジックに使用します。この場合、ブラウザは実際のパスワードの代わりにダミー文字列を保存できます。
数年前、特定の状況でこれが必要でした。ネットワークパスワードを知っている2人が、法的合意に署名するために同時に同じマシンにアクセスします。パスワードの保存は法的問題であり、両方の個人の物理的および一時的な存在が必須である技術的な問題ではないため、そのような状況でパスワードを保存することは望ましくありません。さて、これはまれな状況ですが、そのような状況は存在し、Webブラウザーの組み込みのパスワードマネージャーは役に立たないことに同意します。
上記の私のtechnicalソリューションは、passwordとtextのタイプを交換し、フィールドがプレーンテキストフィールド（そのため、引き続きパスワードを非表示にします）。ブラウザは、プレーンテキストフィールドに保存されているパスワードの保存を要求しません。
jQueryプラグイン：
上記のリンクからの関連ソースコード：
(function($) {
$.fn.StopPasswordManager = function() {
return this.each(function() {
var $this = $(this);
$this.addClass('no-print');
$this.attr('data-background-color', $this.css('background-color'));
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this.attr('autocomplete', 'off');
$this.focus(function() {
$this.attr('type', 'password');
$this.css('background-color', $this.attr('data-background-color'));
});
$this.blur(function() {
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this[0].selectionStart = $this[0].selectionEnd;
});
$this.on('keydown', function(e) {
if (e.keyCode == 13)
{
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this[0].selectionStart = $this[0].selectionEnd;
}
});
});
}
}(jQuery));
デモ：
https://barebonescms.com/demos/admin_pack/admin.php
メニューの[エントリの追加]をクリックし、ページの一番下までスクロールして[モジュール：パスワードマネージャーの停止]を選択します。
上記のソリューションは非常に正確ですが、機能が絶対に必要な場合は、テキストフィールドとjavascriptを使用してカスタム入力で状況を模倣できます。
安全に使用するために、任意の暗号化技術を使用できます。このようにして、ブラウザのパスワード保存動作をバイパスします。
アイデアについて詳しく知りたい場合は、チャットで議論できます。しかし、要点は上で議論されており、あなたはアイデアを得ることができます。
< input type="password" style='pointer-event: none' onInput= (e) => handleInput(e) />
function handleInput(e) {
e.preventDefault();
e.stopPropagation();
e.target.setAttribute('readonly', true);
setTimeout(() => {
e.target.focus();
e.target.removeAttribute('readonly');
});
}
1つの方法は、ランダムな入力名を生成して操作することです。
この方法では、ブラウザには毎回newフォームが表示され、入力フィールドに事前入力することはできません。サンプルコード（jsスパアプリまたはサーバー側のレンダリングがあります）を提供していただければ、実装のお手伝いをさせていただきます。
よろしく、
私はすべての答えを読み、すでにここでいくつかの答えを見たので、私はほとんど自分でそれをしない準備ができていましたが、私は上記のすべてを要約することにしました。
HTML言語とルールに基づいた短い答えは、できないということです。しかし、これは怠け者だけが使う答えです。中級の熟練したプログラマーなら誰でも、ソフトウェアの作成が90％の時間枠を超えて考えることを知っています。
プログラミング言語は大工道具のようなもので、最終的な結果を決定するのではなく、大工がそこに着くのを助けるだけです。
この問題には、純粋なHTMLとJavascriptの2つの解決策があります。まず、ブラウザがどのタイプの入力を把握しているかを理解する必要があります。常にテキストとパスワード、メールとパスワードのペア、そしてまれに電話とパスワードのペアを探しています。
純粋なHTMLソリューションは、Gaurav Singhが答えたように、パスワードの上にダミー（非表示）入力フィールドを配置し、ブラウザーがパスワードフィールドとペアにしようとします。この種の回避策は一部のブラウザーで既に知られているため、非表示フィールドは機能しなくなりました。その場合、いくつかのCSSルールを追加して、ダミー入力を画面の外側に配置し、サイズを0ピクセルにします。
Javascriptソリューションは、ドキュメントが読み込まれた後にフィールドを生成してユーザーに提示するために使用されます。これは、ブラウザーがもはや注意を払っていない場合です。それがどのように行われるかは、実際にどれだけのセキュリティが必要か（実際に）どれだけのコードをトレースするか（JSコードが完全にトレースできないことがわかっている場合）に配置するかどうかによって異なります。
後の編集：私は言及するのを忘れました、それのためにあなたはフォーム内で古典的な送信を使用できません、あなたはJS、AJAXまたは別の方法で値を送信する必要がありますが、再び、それはできますトレースされます。
個人的には、セキュリティの問題がないという理由だけで、ダミー入力を使用するのが好きです。ところで、ログインページを保護することは単純なタスクであり、そうではないと言う「専門家」によってのみ複雑になります。ログイン手順の唯一の本当の問題は、ユーザーがそこに何かを挿入しようとしないようにするための処理スクリプトのセキュリティです。それ以外は何もありません。
それが役に立てば幸い ！
後で編集する：
申し訳ありませんが、HTMLソリューションについては、このことを忘れていました。少なくとも2〜3個のダミーパスワード入力が必要です。そうでない場合、ブラウザは実際のパスワードを選択します。私のブラウザは、データを選択するために最善を尽くしているようです。
1日前（この投稿の日付から）の私のソリューションは次のとおりです。選択したパスワードIDにリスナーを追加し、Webkit固有のCSSルールである非表示フォームフィールドに依存しません。
ここにコードを貼り付ける必要がありましたが、完全なHTMLと説明についてはFiddlerバージョンをご覧ください。
https://jsfiddle.net/AdamWhateverson/hLbztn0a/
<script type="text/javascript" id="pwsremover" data-fieldid="my_password">
if (document.addEventListener) {
var _PWH = {
selected: false,
touched: true,
init: function() {
// The script must always have the id of 'pwsremover'
var pw = document.getElementById('pwsremover');
// You need set the 'data-fieldid' attribute on the script tag to ensure
// the id of your password input field is passwed in
var fi = pw.dataset.fieldid;
// Convert password to text type
var ff = document.getElementById(fi);
ff.type="text";
var h = ff.outerHTML+"";
ff.outerHTML = h;
// Attach event handlers
var passSelected = false
document.addEventListener("selectionchange", function(ev) {
var ae = ev.target.activeElement;
if (ae.id == "login_pass") {
var kc = ev.keyCode;
var ss = ae.selectionStart;
var se = ae.selectionEnd;
var sl = Math.max(ae.selectionStart, ae.selectionEnd);
var il = ae.value.length;
_PWH.selected = (ss == 0 && se > 0 && sl == il) || ((kc == 8 || kc == 46) && il == 1);
}
});
var el = document.getElementById(fi);
el.addEventListener("keydown", function(ev) {
if (((ev.keyCode == 8 || ev.keyCode == 46) && this.value.length == 1) || _PWH.selected) {
this.value = '';
this.blur();
this.focus();
_PWH.selected = false;
}
});
el.addEventListener("mousedown",function(ev){
if(_PWH.touched){
_PWH.touched=false;
return;
}
this.type='text';
});
el.addEventListener("touchstart",function(ev){
this.type='text';
_PWH.touched = true;
this.focus(); // ensures the keyboard popsup
});
el.addEventListener("focus",function(ev){
this.type='password';
});
}
}
// Comment this out to disable
_PWH.init();
}
</script>
htmlコード
<input type="text" id="multi_user_timeout_pin" name="multi_user_pin" autocomplete="off" class="form-control" placeholder="Type your PIN here" ng-model="logutUserPin" >
jqueryコード
$('#multi_user_timeout_pin').on('input keydown',function(e) {
if(e.keyCode == 8 && $(this).val().length==1) {
$(this).attr('type', 'text');
$(this).val('');
}
else{
if ($(this).val() !== '') {
$(this).attr('type', 'password');
} else {
$(this).attr('type', 'text');
}
}
});
パスワードフィールドで正常に動作し、その履歴を記憶しないようにします