web-dev-qa-db-ja.com

ブラウザが資格情報（パスワード）を記憶しないようにする

ログインフォームを処理した後、ブラウザがパスワードを記憶するオプションを提供しないようにすることは可能ですか？

ここで質問と回答があったことは知っていますが、これまでのところどの回答も機能していません。そのうちの1つでも次の使用を提案しています。

autocomplete="off"

しかし、それもうまくいきませんでした。

テンプレートエンジンとしてAngularJSとJadeを使用しています（関連するかどうかはわかりません）が、これを行う方法はありますか？

javascriptangularjspasswordspugprivacy
7
DannyGM

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

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

また、フォームだけでなく入力にもautocomplete="off"を設定する必要があります。

Google Chromeリリースノート：

Google ChromeオートコンプリートリクエストのUIは、入力要素とそのフォームでオートコンプリートがオフに設定されているかどうかによって異なります。具体的には、フォームのオートコンプリートがオフに設定されている場合とその入力要素のオートコンプリートフィールドが設定されていない場合、ユーザーが入力要素のオートフィルの提案を求めた場合、Chromeは、「このフォームではオートコンプリートが無効になっています」というメッセージを表示する場合があります。フォームと入力要素の両方でオートコンプリートがオフに設定されている場合、ブラウザはそのメッセージを表示しません。このため、カスタムオートコンプリートがある入力ごとにオートコンプリートをオフに設定する必要があります。

6
Preston Van Loon

Javascriptを使用して乱数を作成することをお勧めします。非表示フィールドを使用してその乱数をサーバーアクションに渡し、その乱数を「ログイン」フィールドと「パスワード」フィールドの名前に組み込みます。

例えば。 （擬似コード、正確な構文は、PHP、jQuery、純粋なJavascriptなどを使用するかどうかによって異なります）

<script>
var number = Math.random();
var login_name = 'name_'+number;
var pass_Word = 'pass_'+number;
</script>
<input name='number' value="number" type='hidden'>
<input name="login_name" type='text'>
<input name="pass_Word" type='password'>

サーバーは「number」フィールドを読み取り、それを使用して「name_」number値と「pass_」number値を読み取ります。

ユーザーがログインするたびに名前とパスワードのフィールドが異なるため、ユーザーがブラウザにパスワードを保存するかどうかは関係ありません。

3
UncaAlby

これは、開発者としての私にとって非常に厄介な問題です。私が抱えている問題は、ブラウザにパスワードを記憶させることができないというユーザーへの「不快感」を理解していて、その機能を完全に「無効」にしたくないのに、それを無効にしたい場合があるということです。特定のパスワードフィールドに対してのみ。 「パスワードのリセット」ダイアログボックスである私の例。古いパスワードを再入力してから、もちろん新しいパスワードを2回入力するように強制したいと思います。 「古い」パスワード入力の名前に関係なく、「記憶された」パスワードが自動的に入力されるのは私の経験です（とにかくFirefox 49.0.1では）。たぶんこれは私がこれを間違えているところですが、これは私の経験であり、この入力の名前が「ログイン」入力フィールドとは異なっていても、それはそれを埋めるだけです。私が見ている動作は、基本的にブラウザが「このユーザーはこのサイトのパスワードを覚えているので、名前に関係なく、すべての「input type = 'password'」ボックスにそのパスワードを入力するだけです。これは「name」属性に基づいている必要がありますが、私にとって（私が取り組んだ複数のサイトでは）これは当てはまらないようです。

私の解決策：

  1. このパスワードフィールドを入力の背景と同じ色に色付けして、「パスワードドット」がページの読み込み時に基本的に表示されないようにします。

  2. onload、onblur、タイムアウト後、またはそれを実行したい場合は、JQueryまたはJSを使用して、そのパスワードフィールドの値を何も（空白）に設定してから、フィールドの色を想定どおりに設定します。

    $("#old_password").val('').css('color','black);
1
MinnesotaSlim

AngularJSを使用しているため、フィールドに名前を付けずに、モデルを介してフィールドに含まれるデータにアクセスできます。

Login: <input ng-model="login" type="text" />
Password: <input ng-model="password" type="password" autocomplete="off" />

そしてあなたのjavascriptファイルで：

$scope.doLogin = function() {
    var dataObj = {
        login: $scope.login,
        password: $scope.password
    };
    var res = $http.post('/login', dataObj);
}

IE10およびChrome 54

1
madgangmixers

この投稿はもう少し古いですが、私がうまくいく解決策を見つけたので（少なくともChromeバージョン56）、ここで共有します。

nameのpassword属性とinput属性を削除すると、Chromeはパスワードの保存を求められません。これで、次のようになります。フォームを送信する直前に、不足している属性をコードで追加するには：

<!-- Do not set "id" and "name" attributes -->
Login: <input type="text">
Password: <input type="password">
<!-- Handle submit action -->
<input type="submit" onclick="login(this)">

次にJavascriptで：

function login(submitButton) {
    var form = submitButton.form;
    // fill input names by code before submitting
    var inputs = $(form).find('input');
    $(inputs[0]).attr('name', 'userName');
    $(inputs[1]).attr('name', 'password');
    form.submit();
}

これがお役に立てば幸いです。 Chrome 56のみでテスト済み。

1
Olivier Levrey

私にとって、確実に機能する唯一の解決策は、フォームを送信する直前にユーザー名とパスワードの入力要素を空にすることと、通常のボタンの送信ボタンをonclickハンドラーに置き換えることでした。注：Microsoft MVCを使用しているため、入力した資格情報をViewModelに入力する必要がありました。したがって、モデルにバインドされた非表示の入力要素を作成し、表示されている入力を空にする前に資格情報をコピーしました。

<form>
<input id="UserName" name="UserName" type="hidden" value="">
<input id="Password" name="Password" type="hidden" value="">
</form>

<input id="boxUsr" name="boxUsr" type="text" value="" autocomplete="off">
<input id="boxPsw" name="boxPsw" type="password" autocomplete="off">
<input type="submit" value="Login" onclick="javascript:submitformforlogin()">

   function submitformforlogin() {
        $("[name='boxPsw'],[name='boxUsr']").attr('readonly','true');
        var psw = document.getElementsByName('boxPsw')[0];
        var usr = document.getElementsByName('boxUsr')[0];
        if (psw.value != "false") {
            $('#Password').val(psw.value);
            $('#UserName').val(usr.value);
            psw.value = "";
            usr.value = "";
            $("form").submit();
        } else
            window.alert("Error!");
    }
0
SalgoMato

Firefox 52.0.2は、オートコンプリートの値を記憶することを信じられないほど決心していることを発見しました。名前の属性をランダムな値に変更するなど、上記で提案したほとんどすべてを試しました。私のために働いている唯一のことは、ブラウザがフォームを使用した後、Javascriptで値を「」に設定することです。

私のユースケースは、ボタンをクリックするまでフォームが非表示になるため、オートコンプリートされたフォーム値（上記の@MinnesotaSlimによって提案された）の混乱や迷惑なフラッシュを防ぐためにCSSトリックに頼る必要がないという点で幸運です。次に、Bootstrapモーダルを介して表示されます。したがって（jQueryを使用）、

$('#my-button').on("click",function(){        
   $('#form-login input').val("");
});
// this also works nicely
$('#my-modal').on("show.bs.modal",function(){
    $('#form-login input').val("");
})

また、フォームを最初に非表示にし、ドキュメントの読み込みイベントでブラウザを手動でオーバーライドしてからフォームを表示することで、同じ効果が得られる可能性があると思います。

0
David