政府の医療機関で働く喜びの 1 つは、PHI (保護対象の医療情報) を扱う際のすべてのパラノイアに対処しなければならないことです。誤解しないでいただきたいのですが、私は人々の個人情報 (健康、経済、ネットサーフィンの習慣など) を保護するために可能な限りのことをすることに大賛成ですが、ときどき人々は少し神経質になりすぎてしまいます。
適切な例: 私たちの州の顧客の 1 人が最近、ブラウザーがパスワードを保存する便利な機能を提供していることに気付きました。しばらく前から存在しており、完全にオプションであり、使用するかどうかを決定するのはエンドユーザー次第であることは誰もが知っています. しかし、現時点ではちょっとした騒動があり、私たちのサイトでその機能を無効にする方法を見つけるよう求められています.
質問: サイトがパスワードを記憶しないようにブラウザに指示する方法はありますか? 私は長い間 Web 開発に携わってきましたが、以前に Web 開発に出くわしたことがあるかどうかは知りません。
どんな助けでも大歓迎です。
すべてのブラウザーで機能するかどうかはわかりませんが、フォームで autocomplete="off" を設定してみてください。
<form id="loginForm" action="login.cgi" method="post" autocomplete="off">
フォームとパスワードの保存プロンプトを無効にし、フォーム データがセッション履歴にキャッシュされないようにする最も簡単で簡単な方法は、オートコンプリート フォーム要素属性を値「オフ」で使用することです。
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletionから
いくつかのマイナーな調査では、これが IE で機能することが示されていますが、保証はしません ;)
@ジョセフ：実際のマークアップでXHTML検証に合格することが厳密な要件である場合（理由はわかりません）、理論的には後でjavascriptを使用してこの属性を追加できますが、jsが無効になっているユーザー（おそらくユーザーベースの無視できる量または、サイトが js を必要とする場合はゼロ) にはパスワードが保存されます。
jQuery の例:
$('#loginForm').attr('autocomplete', 'off');
私はしばらくの間、この問題に独自のひねりを加えて苦労していました。特権ユーザーは保存されたパスワードを使用できませんでしたが、通常のユーザーには必要でした。つまり、特権ユーザーは 2 回ログインする必要があり、2 回目は保存されたパスワードを強制しませんでした。
この要件によりautocomplete="off"、パスワードが最初のログインから保存されている可能性があるため、標準の方法はすべてのブラウザーで機能しません。ある同僚が、パスワード フィールドが新しいパスワード フィールドにフォーカスされているときにそのフィールドを置き換え、新しいパスワード フィールドにフォーカスする (同じイベント ハンドラーをフックする) 解決策を見つけました。これは機能しました (ただし、IE6 で無限ループが発生しました)。たぶんそれを回避する方法があったのかもしれませんが、それは私に片頭痛を引き起こしていました.
最後に、フォームの外にユーザー名とパスワードを入れようとしました。驚いたことに、これはうまくいきました！IE6、および Linux 上の Firefox と Chrome の現在のバージョンで動作しました。私はそれ以上テストしていませんが、すべてではないにしてもほとんどのブラウザーで動作すると思います (ただし、フォームがなくても気にしないブラウザーがあったとしても驚かないでしょう)。
これを機能させるためのいくつかの jQuery とともに、いくつかのサンプル コードを次に示します。
<input type="text" id="username" name="username"/>
<input type="password" id="password" name="password"/>
<form id="theForm" action="/your/login" method="post">
<input type="hidden" id="hiddenUsername" name="username"/>
<input type="hidden" id="hiddenPassword" name="password"/>
<input type="submit" value="Login"/>
</form>
<script type="text/javascript" language="JavaScript">
$("#theForm").submit(function() {
$("#hiddenUsername").val($("#username").val());
$("#hiddenPassword").val($("#password").val());
});
$("#username,#password").keypress(function(e) {
if (e.which == 13) {
$("#theForm").submit();
}
});
</script>
非常に古い投稿ですが、私のチームが長い間達成しようとしてきた解決策を紹介します。フォーム内に新しい input type="password" フィールドを追加し、それを div でラップして、div を非表示にしました。この div が実際のパスワード入力の前にあることを確認してください。これはうまくいきましたが、パスワードを保存するオプションはありませんでした
プランク - http://plnkr.co/edit/xmBR31NQMUgUhYHBiZSg?p=preview
HTML:
<form method="post" action="yoururl">
<div class="hidden">
<input type="password"/>
</div>
<input type="text" name="username" placeholder="username"/>
<input type="password" name="password" placeholder="password"/>
</form>
CSS:
.hidden {display:none;}
各ショーのパスワードフィールドに使用される名前をランダム化することで、ブラウザがフォームを一致させないようにすることができます。次に、ブラウザは同じURLのパスワードを確認しますが、同じパスワードであるかどうかを確認することはできません。多分それは何か他のものを制御しています。
更新：他の人が示した理由により、これはオートコンプリートまたは他の戦術の使用に追加する必要があり、それらの代わりではないことに注意してください。
また、これにより、ブラウザがパスワードを自動入力できなくなるだけであることに注意してください。ブラウザが使用することを選択した任意のセキュリティのレベルにかかわらず、パスワードを保存することを妨げることはありません。
すべての主要なブラウザーでフォームタグに autocomplete="off" を追加することをテストしました。実際、これまでのところ、米国ではほとんどの人が IE8 を使用しています。
ブラウザが「パスワードの保存」を要求しません。また、以前に保存したユーザー名とパスワードが入力されていません。
2014 年 6 月 11 日更新
最後に、以下は JavaScript を使用したクロス ブラウザ ソリューションで、すべてのブラウザで正常に動作しています。
ログイン フォームの「フォーム」タグを削除する必要があります。クライアント側の検証後、その資格情報を非表示のフォームに入れて送信します。
また、2 つのメソッドを追加します。1 つは検証用の「validateLogin()」で、もう 1 つはテキスト ボックス/パスワード/ボタンの「checkAndSubmit()」で Enter をクリックしているときに入力イベントをリッスンするためのものです。ログインフォームにはフォームタグがないため、ここでイベントが機能しないと入力してください。
HTML
<form id="HiddenLoginForm" action="" method="post">
<input type="hidden" name="username" id="hidden_username" />
<input type="hidden" name="password" id="hidden_password" />
</form>
Username: <input type="text" name="username" id="username" onKeyPress="return checkAndSubmit(event);" />
Password: <input type="text" name="password" id="password" onKeyPress="return checkAndSubmit(event);" />
<input type="button" value="submit" onClick="return validateAndLogin();" onKeyPress="return checkAndSubmit(event);" />
Javascript
//For validation- you can modify as you like
function validateAndLogin(){
var username = document.getElementById("username");
var password = document.getElementById("password");
if(username && username.value == ''){
alert("Please enter username!");
return false;
}
if(password && password.value == ''){
alert("Please enter password!");
return false;
}
document.getElementById("hidden_username").value = username.value;
document.getElementById("hidden_password").value = password.value;
document.getElementById("HiddenLoginForm").submit();
}
//For enter event
function checkAndSubmit(e) {
if (e.keyCode == 13) {
validateAndLogin();
}
}
幸運を！！！
そうではありません。現実的にできる唯一のことは、サイトでアドバイスを提供することです。おそらく、初めてサインインする前に、ブラウザーにパスワードの保存を許可することはお勧めできないことを示すフォームを表示することができます。
次に、ユーザーはすぐにアドバイスに従い、付箋にパスワードを書き留め、モニターにテープで貼り付けます。
私がやっていることは、autocomplete = "off"と、javascript/jQueryを使用したパスワードフィールドのクリアの組み合わせです。
jQueryの例：
$(function() {
$('#PasswordEdit').attr("autocomplete", "off");
setTimeout('$("#PasswordEdit").val("");', 50);
});
を使用setTimeout()すると、ブラウザがフィールドを完了するのを待ってからクリアできます。そうしないと、フィールドをクリアした後、ブラウザは常にオートコンプリートされます。
autocomplete="off" はパスワード フィールドでは機能しないため、javascript に依存する必要があります。ここで見つかった回答に基づく簡単な解決策を次に示します。
属性 data-password-autocomplete="off" をパスワード フィールドに追加します。
<input type="password" data-password-autocomplete="off">
次の JS を含めます。
$(function(){
$('[data-password-autocomplete="off"]').each(function() {
$(this).prop('type', 'text');
$('<input type="password"/>').hide().insertBefore(this);
$(this).focus(function() {
$(this).prop('type', 'password');
});
});
});
このソリューションは、Chrome と FF の両方で機能します。
回避策があり、役立つ場合があります。
カスタムフォントハックを作成できます。したがって、たとえば、すべての文字をドット/円/星としてカスタムフォントを作成します。これを Web サイトのカスタム フォントとして使用します。これをinkscapeで行う方法を確認してください：独自のフォントを作成する方法
次に、ログインフォームで次を使用します。
<form autocomplete='off' ...>
<input type="text" name="email" ...>
<input type="text" name="password" class="password" autocomplete='off' ...>
<input type=submit>
</form>
次に、CSS を追加します。
@font-face {
font-family: 'myCustomfont';
src: url('myCustomfont.eot');
src: url('myCustomfont?#iefix') format('embedded-opentype'),
url('myCustomfont.woff') format('woff'),
url('myCustomfont.ttf') format('truetype'),
url('myCustomfont.svg#myCustomfont') format('svg');
font-weight: normal;
font-style: normal;
}
.password {
font-family:'myCustomfont';
}
かなりクロスブラウザ対応。IE6+、FF、Safari、Chrome を試しました。変換する oet フォントが破損していないことを確認してください。それが役に立てば幸い？
「オートコンプリート」属性はほとんどの場合機能しますが、パワー ユーザーはブックマークレットを使用して回避できます。
ブラウザにパスワードを保存させると、実際にはキーロギングに対する保護が強化されるため、おそらく最も安全なオプションは、パスワードをブラウザに保存し、マスター パスワードで保護することです (少なくとも Firefox では)。
The simplest way to solve this problem is to place INPUT fields outside the FORM tag and add two hidden fields inside the FORM tag. Then in a submit event listener before the form data gets submitted to server copy values from visible input to the invisible ones.
Here's an example (you can't run it here, since the form action is not set to a real login script):
<!doctype html>
<html>
<head>
<title>Login & Save password test</title>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<!-- the following fields will show on page, but are not part of the form -->
<input class="username" type="text" placeholder="Username" />
<input class="password" type="password" placeholder="Password" />
<form id="loginForm" action="login.aspx" method="post">
<!-- thw following two fields are part of the form, but are not visible -->
<input name="username" id="username" type="hidden" />
<input name="password" id="password" type="hidden" />
<!-- standard submit button -->
<button type="submit">Login</button>
</form>
<script>
// attache a event listener which will get called just before the form data is sent to server
$('form').submit(function(ev) {
console.log('xxx');
// read the value from the visible INPUT and save it to invisible one
// ... so that it gets sent to the server
$('#username').val($('.username').val());
$('#password').val($('.password').val());
});
</script>
</body>
</html>多くのソリューションをテストしました。動的なパスワード フィールド名、複数のパスワード フィールド (偽のパスワードでは見えない)、入力タイプを「テキスト」から「パスワード」に変更、autocomplete="off"、autocomplete="new-password"、...しかし、最近のブラウザ。
パスワードの記憶を取り除くために、最終的にパスワードを入力フィールドとして扱い、入力したテキストを「ぼかし」ました。
入力したテキストを選択するとクリア テキストとして表示されるため、ネイティブ パスワード フィールドよりも「安全」ではありませんが、パスワードは記憶されません。また、Javascript が有効になっていることにも依存します。
以下の提案とナビゲーターのパスワード記憶オプションを使用するリスクを見積もることができます。
パスワードの記憶はユーザーが管理できますが (サイトごとに無効化)、「公共の」コンピューターや共有コンピューターではなく、個人のコンピューターでは問題ありません。
私の場合は、共有コンピューターで実行されている ERP 用であるため、以下のソリューションを試してみます。
<input style="background-color: rgb(239, 179, 196); color: black; text-shadow: none;" name="password" size="10" maxlength="30" onfocus="this.value='';this.style.color='black'; this.style.textShadow='none';" onkeypress="this.style.color='transparent'; this.style.textShadow='1px 1px 6px green';" autocomplete="off" type="text">
マーカスは素晴らしい点を挙げました。属性を調べることにしたautocompleteところ、次のようになりました。
この属性を使用することの唯一の欠点は、標準ではない (IE および Mozilla ブラウザーで機能する) ことと、XHTML 検証が失敗することです。ただし、これは検証を破るのが合理的なケースだと思います。 （ソース）
したがって、全面的に 100% 機能するわけではありませんが、主要なブラウザーで処理されるため、優れたソリューションであると言わざるを得ません。
私が知っている 1 つの方法は、(たとえば) JavaScript を使用して、フォームを送信する前にパスワード フィールドから値をコピーすることです。
これに関する主な問題は、ソリューションが JavaScript に結び付けられていることです。
繰り返しになりますが、JavaScript に関連付けることができる場合は、サーバーにリクエストを送信する前に、クライアント側でパスワードをハッシュすることもできます。
本当の問題は、単に HTML に属性を追加することよりもずっと深いところにあります。これは一般的なセキュリティ上の問題です。そのため、人々はセキュリティのためにハードウェア キーやその他のクレイジーなものを発明しました。
autocomplete="off" がすべてのブラウザで完全に機能していると想像してください。それはセキュリティに役立ちますか？もちろん、いいえ。ユーザーはパスワードを教科書に書き留めたり、モニターに貼られたステッカーに貼り付けたりして、オフィスのすべての訪問者が見ることができるようにしたり、デスクトップ上のテキスト ファイルに保存したりします。
一般に、Web アプリケーションおよび Web 開発者は、エンド ユーザーのセキュリティについて一切の責任を負いません。エンド ユーザーは自分自身だけを保護できます。理想的には、すべてのパスワードを頭に入れておき、忘れた場合に備えてパスワード リセット機能を使用する (または管理者に連絡する) 必要があります。そうしないと、パスワードが見られて盗まれる危険性が常にあります。
したがって、ハードウェアキーを使用したクレイジーなセキュリティポリシーを持っているか（一部の銀行は基本的に2要素認証を採用しているインターネットバンキングを提供しています）、基本的にセキュリティがありません. もちろん、これは少し誇張されすぎています。何から保護しようとしているのかを理解することが重要です。
この特定の投稿では、問題の性質、つまりエンドユーザーのセキュリティのために、開発者が決して解決できない不適切な要件が開発者に課せられていることがわかります。私の主観的なポイントは、開発者は基本的にノーと言って、要件の問題を指摘するべきであり、正直に言えば、そのようなタスクに時間を無駄にするのではありません。これでシステムが完全に安全になるわけではありません。むしろ、モニターにステッカーが貼ってあるケースにつながる可能性があります。残念ながら、聞きたいことしか聞いていない上司もいます。しかし、もし私があなただったら、実際の問題がどこから来ているのかを説明しようとします. autocomplete="off" は、ユーザーがすべてのパスワードを頭の中に独占的に保持することを強制しない限り、問題を解決しません! 開発者の側では、ユーザーを完全に保護することはできません。
オートコンプリート フラグを信頼したくない場合は、onchange イベントを使用して、ユーザーがボックスに入力することを確認できます。以下のコードは単純な HTML フォームです。非表示のフォーム要素 password_edited は、最初は 0 に設定されています。password の値が変更されると、上部の JavaScript (pw_edited 関数) が値を 1 に変更します。ボタンが押されると、フォームを送信する前に値をチェックします。ここにコードを入力してください。 . そうすれば、ブラウザがあなたを無視してフィールドをオートコンプリートしても、ユーザーはパスワード フィールドに入力せずにログイン ページを通過することはできません。また、フォーカスが設定されている場合は、パスワード フィールドを空白にしてください。それ以外の場合は、最後にキャラクターを追加してから、戻って削除してシステムをだますことができます. さらにパスワードに autocomplete="off" を追加することをお勧めしますが、この例はバックアップ コードがどのように機能するかを示しています。
<html>
<head>
<script>
function pw_edited() {
document.this_form.password_edited.value = 1;
}
function pw_blank() {
document.this_form.password.value = "";
}
function submitf() {
if(document.this_form.password_edited.value < 1) {
alert("Please Enter Your Password!");
}
else {
document.this_form.submit();
}
}
</script>
</head>
<body>
<form name="this_form" method="post" action="../../cgi-bin/yourscript.cgi?login">
<div style="padding-left:25px;">
<p>
<label>User:</label>
<input name="user_name" type="text" class="input" value="" size="30" maxlength="60">
</p>
<p>
<label>Password:</label>
<input name="password" type="password" class="input" size="20" value="" maxlength="50" onfocus="pw_blank();" onchange="pw_edited();">
</p>
<p>
<span id="error_msg"></span>
</p>
<p>
<input type="hidden" name="password_edited" value="0">
<input name="submitform" type="button" class="button" value="Login" onclick="return submitf();">
</p>
</div>
</form>
</body>
</html>
パスワードを記憶しないようにサイトがブラウザに指示する方法はありますか?
Web サイトは、 を使用してパスワードであることをブラウザに伝えます<input type="password">。したがって、Web サイトの観点からこれを行う必要がある場合は、それを変更する必要があります。(もちろん、これはお勧めしません)。
最善の解決策は、パスワードを記憶しないようにユーザーにブラウザーを構成してもらうことです。
ブラウザによるログイン名とパスワードの自動入力を無効にする同様のタスクが与えられました。多くの試行錯誤の後、以下のソリューションが最適であることがわかりました。元のコントロールの前に以下のコントロールを追加するだけです。
<input type="text" style="display:none">
<input type="text" name="OriginalLoginTextBox">
<input type="password" style="display:none">
<input type="text" name="OriginalPasswordTextBox">
これは IE11 と Chrome 44.0.2403.107 で正常に動作しています。
この方法を使用しても問題はありません。
autocomplete = "off"を使用して、非表示のパスワードフィールドを追加してから、別の非表示でないパスワードフィールドを追加します。autocomplete = "off"を尊重しない場合、ブラウザは非表示のブラウザをオートコンプリートしようとします
autocomplete="off"Internet Explorer 11 はフィールドをサポートしなくなったためinput type="password"(他のブラウザーがこれに追随しないことを願っています)、最もクリーンなアプローチ (執筆時点) は、ユーザーに別のページでユーザー名とパスワードを送信させることです。つまり、ユーザーはユーザー名を入力します。 、送信してから、パスワードを入力して送信します。Bank Of AmericaとHSBC BankのWeb サイトもこれを使用しています。
ブラウザーはパスワードをユーザー名に関連付けることができないため、パスワードの保存を提案しません。このアプローチは (執筆時点で) すべての主要なブラウザーで機能し、Javascript を使用しなくても適切に機能します。欠点は、ユーザーにとってより面倒なことであり、ログイン アクションに対して 1 回ではなく 2 回のポストバックが必要になることです。そのため、Web サイトの安全性に大きく依存します。
更新: Gregoryによるこのコメントで述べたように、Firefox は IE11 のリードに従い、パスワード フィールドを無視します。autocomplete="off"
別の解決策は、すべての入力が非表示タイプの非表示フォームを使用して POST を作成することです。表示されるフォームは、タイプ「パスワード」の入力を使用します。後者のフォームは送信されないため、ブラウザはログイン操作をまったく傍受できません。
autocomplete="off" は最新のほとんどのブラウザーで機能しますが、Epiphany (GNOME 用の WebKit を利用したブラウザー) で正常に機能する私が使用した別の方法は、ランダムに生成されたプレフィックスをセッション状態 (または非表示フィールドに保存することです。すでにセッション状態の適切な変数)、これを使用してフィールドの名前を変更します。Epiphany は引き続きパスワードを保存しようとしますが、フォームに戻ったときにフィールドに入力しません。
autocomplete="off" を入れてもまったく役に立たないと思います
私は別の解決策を持っています、
<input type="text" name="preventAutoPass" id="preventAutoPass" style="display:none" />
これをパスワード入力の前に追加します。
例えば：<input type="text" name="txtUserName" id="txtUserName" />
<input type="text" name="preventAutoPass" id="preventAutoPass" style="display:none" />
<input type="password" name="txtPass" id="txtPass" autocomplete="off" />
これは、ブラウザがパスワードを要求して保存することを妨げません。ただし、パスワードを入力することはできません。
元気づける
私見、
最良の方法は、入力フィールドの名前をランダム化することtype=passwordです. 「pwd」のプレフィックスと乱数を使用します。フィールドを動的に作成し、フォームをユーザーに提示します。
ログインフォームは次のようになります...
<form>
<input type=password id=pwd67584 ...>
<input type=text id=username ...>
<input type=submit>
</form>
次に、サーバー側で、クライアントから投稿されたフォームを分析すると、「pwd」で始まる名前のフィールドをキャッチし、「password」として使用します。