web-dev-qa-db-ja.com

Chromeパスワードフィールド処理の最近の変更によりページが壊れる

このサイトには、ユーザーがパスワードやその他の基本情報を変更できるプロファイル更新ページがあります。このページは2006年から運用されています。最近のChromeの変更により、ページの動作が壊れており、これに対する簡単な修正は見当たりません。

状況は次のとおりです。ユーザーがこのページにアクセスすると、メールアドレスと確認メールアドレス、パスワードと確認パスワードのフィールドが他にもあります。ユーザーが電子メール、アドレス、またはパスワードのいずれかを変更する場合は、目的のフィールドに新しい値を入力します。変更したくない場合は、空白のままにします。それが動作するはずです。

ただし、「オートコンプリート」により、ブラウザはこれらのフィールドに入力しようとする場合があります。この場合、これは非常に悪く、ユーザーを混乱させます。主な理由は、ユーザーが自分のメールを既に使用中のメールに変更しようとしているように見え、すでに使用中のメールに関するエラーメッセージが表示されるためです。メールアドレスを入力しなかったため、これは非常に混乱しています。ブラウザがやった。さらに、4つのフィールドのうち、Chromeはそのうち2つのみを設定します。したがって、ユーザーはフィールドが一致しないことを知らされ、それで苦労し始めます。この写真には多くのユーザーのフラストレーションがあります。

ごく最近まで、4つのフィールド（2つの電子メールアドレスと2つのパスワード）でautocomplete = "off"を使用するという簡単な解決策がありました。そして、それは2006年頃からうまく機能しています。そして、他の主要なブラウザでもまだうまく機能します。

ある時点で、コンプライアンスの問題のため、オートコンプリートをjavascriptに移行しました。その後、それが失敗し始めたら、それをjqueryに移動して、DOMがロードされたことを確認しました。最初、jqueryソリューションはしばらくの間は機能しているように見えました。

しかし、現在Chromeは、これらのフィールドに何があっても自動入力することを主張しています。フィールドのIDを変更しようとしましたが、何らかの理由でChromeがこれを認識しています。

Autocomplete = "off"を無視するChromeに関する議論を他の場所で見ました。そして、通常、議論は予測不可能なブラウザの動作を引き起こすため、悪いことであるかのように「アンチオートコンプリートオフ」になる傾向があります。私はこの観点に異議を唱えません。

しかし、Chromeユーザー向けの現在の設計では実際の問題になりつつあり、autocomplete = "off"を使用するなどの単純な解決策は見当たりません。この問題に対処するために大幅な変更を行う必要があると思います。たとえば、フィールドを非表示にし、チェックボックスをクリックするなどしてフィールドを表示する必要がある場合があります。 （しかし、私はChromeもそれを打ち負かすだろうと推測しています。）

どうやら、オートコンプリートオフの単純さ、またはフィールドのIDを難読化することは機能しません。したがって、次のアプローチは、テキストフィールドを使用して独自のパスワード入力フィールドを作成し、javascriptのトリックを使用してアスタリスクでエントリを難読化し、パスワードタイプフィールドの機能を提供することです。多大な労力の無駄のようです。 Chromeのみ。

さらに悪いことに、スクリーンショットからわかるように、Chromeはフィールドに適切に入力されていません。

誰でも比較的簡単なアプローチを提案できますか？

Chrome populating fields that should be left blank

passwordgoogle-chrome
2
Jeffrey Simon

Chromeはautocomplete="off"タグ（フォーム全体に適用）にない限り、<form autocomplete="off">を無視するようです。以前は、タグを任意の<input>フィールドに追加できたため、より多くの制御が可能になりました。

このDTDでドキュメントを開始する必要がある場合もあります。

<!DOCTYPE html>
2
ice cream

各フィールドを独自の形式にし、無意味なフィールド名とIDを使用します。次に、変更時に、javascriptを使用してコンテンツをメインフォームの非表示フィールドにコピーします。

<form name=fake1 onsubmit="return false" autocomplete="off">
    New Email Address: <input type=text id=xy1 name=xy1 onchange="document.mainform.newemail=this.value">
</form>
<form name=fake2 onsubmit="return false" autocomplete="off">
    Re-Enter Email Address: <input type=text id=xy2 name=xy2 onchange="document.mainform.confirmemail=this.value">
</form>
<form name=fake3 onsubmit="return false" autocomplete="off">
    New Password: <input type=password id=xy3 name=xy3 onchange="document.mainform.password=this.value">
</form>
<form name=fake3 onsubmit="return false" autocomplete="off">
    Confirm New Password: <input type=password id=xy4 name=xy4 onchange="document.mainform.confirmpassword=this.value">
</form>
<form name=mainform>
    <input type=hidden name=email value="">
    <input type=hidden name=confirmemail value="">
    <input type=hidden name=password value="">
    <input type=hidden name=confirmpasword value="">
</form>
1
Stephen Ostermiller

これに対する回避策を見つけました。パスワードhtml入力タグの値属性が空白または空の文字列に設定されている場合、オートコンプリートタグに関係なく自動入力されます。したがって、パスワードフィールドが空白の場合、タグに値属性を追加しないでください。

例：

@if (string.IsNullOrWhiteSpace(Model.Password))
       { 
        //omit value attribute
        <input type="password" name="@(propName).Password" id ="@(propName)_Password" class = "name_form" />   
       }
       else
       { 
        //include value attribute with existing model value 
        <input type="password" name="@(propName).Password" id ="@(propName)_Password" class = "name_form" value = "@Model.Password"/>
       }
1
Nagendra