web-dev-qa-db-ja.com

ユーザー名とパスワードでSafariの自動入力を無効にする

既に知っているかもしれませんが、Safariには、autocomplete="off" か否か。

基本的なフォームは次のとおりです。

<form action="/" method="post">
    <p>
        <label>E-mail</label>
        <input type="text" name="email" value="" />
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="password" value="" />
    </p>
</form>

... Safariは、ページの読み込み時にこれらのフィールドを必要に応じて自動入力します。

autocomplete="off"フィールドおよび/またはフォーム要素に、Safariはそれらのフィールドを自動入力します：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>E-mail</label>
        <input type="text" name="email" value="" autocomplete="off" />
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="password" value="" autocomplete="off" />
    </p>
</form>

これでもうまくいきません：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>E-mail</label>
        <input type="text" name="secretfield1" value="" autocomplete="off"/>
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="secretfield2" value="" autocomplete="off" />
    </p>
</form>

... Safariはこれらの<label>要素に「E-mail」、「Password」などの単語が含まれていて、自動入力を続行する場合。

Aaaahhhhha !、私は考えて、これを試しました：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>%REPLACE_EMAIL_TITLE%</label>
        <input type="text" name="%REPLACE_EMAIL_NAME%" value="" autocomplete="off"/>
    </p>
    <p>
        <label>%REPLACE_PASSWORD_TITLE%</label>
        <input type="password" name="%REPLACE_PASSWORD_NAME%" value="" autocomplete="off" />
    </p>
</form>

...そしてJavaScriptを使用して％TAGS％を実際の名前に置き換えます。 Safariの自動入力が開始されます。交換時に10秒のタイムアウトを設定しても関係ありません。

それで、これが本当に唯一のオプションですか？

<form action="/" method="post" autocomplete="off">
    <p>
        <label>That electronic postal address we all use, but can't write the title here because Safari fills this with YOUR information if you have autofill turned on</label>
        <input type="text" name="someelectronicpostaladdress" value="" autocomplete="off"/>
    </p>
    <p>
        <label>A set of characters, letters, numbers and special characters that is so secret that only you or the user you are changing it for knows, but can't write the title here because Safari sucks</label>
        <input type="password" name="setofseeecretcharacters" value="" autocomplete="off" />
    </p>
</form>

私は望みませんか？

更新： @ skithundがTwitterで指摘した 、その Safariは4.0.3のアップデートを取得しています 、「Login AutoFill」に言及しています。その更新がこれを修正するかどうかは誰にもわかりますか？

htmlsecurityautocompletesafariautofill
47
Jari

同じ問題がありました。そして、私の解決策は完璧ではありませんが、うまくいくようです。基本的に、Safariはパスワードとユーザー名を持つ入力フィールドを探しているようで、常に入力を試みます。したがって、私の解決策は、Safariが入力できる現在のフィールドの前に、偽のユーザー名とパスワードのフィールドを追加することでした。 style="display: none;"を使用してみましたが、うまくいきませんでした。そのため、最終的にはstyle="position:absolute; top:-50px;"を使用しましたが、これにより入力フィールドが見えなくなり、正常に機能するように見えました。 JavaScriptは使いたくありませんでしたが、JavaScriptで非表示にできると思います。

現在、Safariはユーザー名とパスワードのフィールドを自動補完しません。

37
Richard perris

ブラウザがautocomplete=offを無視している理由は、パスワードの自動補完を無効にしようとするWebサイトがいくつかあるためです。

それは間違いです。

また、2014年7月、Firefoxは、パスワードの自動補完をオフにしようとするWebサイトを無視するように最終的に変更を実装した最後の主要なブラウザでした。

HTMLフォームのオートコンプリート機能に関するユーザーからの苦情の1つは、「機能しません。以前に入力したテキストがまったく表示されません。」 、通常、サイトは提供された属性を使用して明示的に機能を無効にしていることがわかりますが、もちろん、ユーザーはサイトがそうしていることを知らず、単にIEがバグだと仮定します。エクスペリエンスでは、機能が非表示または置換された場合、ユーザーは通常、Webサイトではなくブラウザーを非難します。

ブラウザーの設定を回避しようとするWebサイトの試みはすべて間違っているため、ブラウザーはそれを無視します。 Webサイトがパスワードの保存を無効にしようとする理由はわかっていません。

  • Chromeはそれを無視します
  • Safariはそれを無視します
  • IEはそれを無視します
  • Firefoxはそれを無視します

この時点で、Web開発者は通常抗議します「しかし、私はこれをどこでもしません-それが理にかなっているほんの少しだけで！」ブラウザが違いを伝える方法が実際にない別のケースです。かつて、ポップアップウィンドウは、広告主による悪用が世界中のユーザーの悩みの種になるまで、かつてはWebブラウジングエクスペリエンスの幸せで便利な部分でした。必然的に、すべてのブラウザーがポップアップをブロックし始め、ポップアップを使用した「良い」サイトでさえ、趣味と慎重さで破壊されました。

私が特別な場合 snowflake ？

良いユースケースを持ち出す人々がいます：

共有された公共エリアのキオスクスタイルのコンピューターがあります。次のユーザーが使用できるように、誰かが（誤ってまたは意図的に）パスワードを保存することは望ましくありません。

それは声明に違反しません：

ブラウザの設定を回避しようとするWebサイトの試みはすべて間違っています

これは、共有キオスクの場合：

  • オッドボールポリシーを持つのはweb-serverではありません
  • オッドボールポリシーを持つのはクライアントuser-agent

browser（共有コンピューター）は、itが保存を試行しないという要件を持つものですパスワード。

browserがパスワードを保存しないようにする正しい方法
は、パスワードを保存しないようにブラウザを設定することです。

このキオスクコンピューターをロックダウンして制御しているため、設定を制御します。これには、パスワードを保存するオプションが含まれます。

ChromeおよびInternet Explorerでは、グループポリシー（レジストリキーなど）を使用してこれらのオプションを構成します。

Chromeポリシーリスト から：

AutoFillEnabled

自動入力を有効にする

データ型：ブール値（REG_DWORD）

Windowsレジストリの場所：Software\Policies\Chromium\AutoFillEnabled

説明：Chromiumのオートフィル機能を有効にし、ユーザーが住所やクレジットカード情報などの以前に保存された情報を使用してWebフォームを自動補完できるようにします。この設定を無効にすると、ユーザーはオートフィルにアクセスできなくなります。この設定を有効にするか、値を設定しない場合、オートフィルはユーザーの制御下にあります。これにより、オートフィルプロファイルを設定し、独自の裁量でオートフィルをオンまたはオフに切り替えることができます。

パスワードのオートコンプリートを無効にしようとするのは間違っているとWordを企業のマネージャーに伝えてください。ブラウザが意図的にそれを行おうとする人を無視しているほど、それは間違っています。それらの人々は間違ったことをやめるべきです。™

別の言い方をすれば

言い換えると：

  • usersブラウザの場合
  • ミス "お気に入りの旧姓の最初の色の名前を入力してください。"新しいパスワード
  • およびuser
  • 望まないtheirブラウザ
  • theirパスワードを更新するには、
  • それからthey
  • クリックしますNope

enter image description here

  • hIPPAパスワードを保存する場合：それは私の権利です
  • pCIパスワードを保存したい場合：それは私の権利です
  • "ユーザーの新しいパスワード"を保存したい場合：それは私の権利です
  • ワンタイムパスワードを保存する場合：それは私の権利です
  • 「最初の色の好きな乙女」を保存したい場合：答え：それは私の権利です。

ユーザーの希望を覆すのはあなたの仕事ではありません。それは彼らのブラウザです。あなたのものではありません。

28
Ian Boyd

修正：ブラウザは読み取り専用モードで自動入力し、フォーカスで書き込み可能に設定します

 <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

説明：ブラウザは資格情報を間違ったテキストフィールドに自動入力しますか？

わかりました、あなたはちょうどそれに気づいた：

Safariの自動入力が開始されます。[フィールドの名前]に関係なく、 @Jari

そして、次の仮定があります：

Safariはパスワードとユーザー名の入力フィールドを探しているようで、常に入力しようとします @ user3172174

同じフォームにパスワードフィールドがある場合、ChromeとSafariでこの奇妙な動作に気づくことがあります。資格情報。次に、 username をDOMのパスワードフィールドの前に表示される最も近いtextlike-inputフィールドに自動入力します（観察）。ブラウザは最後のインスタンスであり、制御できないため、

autocomplete = offでさえ、間違ったフィールドに資格情報を入力することを妨げないことがありますが、ユーザーまたはニックネームのフィールドはそうではありません。

上記のこの読み取り専用の修正は私のために働いた。

17
dsuess

入力にcssを追加すると、サファリボタンの擬似要素が非表示になり、ユーザーはオートコンプリートを使用できなくなります

input::-webkit-contacts-auto-fill-button, 
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}
12
Vadizar

AppleのSafari HTMLページ をスキャンし、オートコンプリートでanythingが見つからなかった後、検索と思考を行いました。

（やや）関連する質問 on Appleディスカッション、デフォルトでは記憶されたパスワードなどを許可しないことを思い出した（iDeviceシステム設定で有効にできる） 、またはプロンプトで）Appleはこの機能をブラウザから（独自のi）OSに移動したため（ この記事のスクリーンショット ）、 HTMLフォーム/フィールドプロパティを完全に無視していると思います。

彼らがこの機能に関する考え方を変えない限り、これは彼らの期待される動作であると確信しているので、ロックダウンされたデバイスで、私はこれがなくなるわけではないという仮定。これはおそらく、ネイティブiOSアプリでは異なります。フォームのautocomplete = "off"および いつかHTML5標準に戻ることを願っています の機能を確実に保持します。

これには回避策が含まれていないことはわかっていますが、iDevicesの非ブラウザーの「機能」であることに同意するなら、それは理にかなっていると思います（Apple仕方）。

7
Eric McCormick

この質問はすでに正常に回答されていますが、今日の日付では、いくつかの奇妙な特定の変更を行わないと解決策は機能しませんでした。他のみんなのように。

  • 偽の入力はafter domでの実際の電子メール入力である必要があります。
  • 偽の入力には偽のラベルが必要です。
  • 偽のラベルを絶対に配置することはできません。
  • 表示、可視性、または不透明度を使用して、偽の要素を非表示にすることはできません。

私が見つけた唯一の解決策は、偽の要素の可視性をoverflow: hiddenでクリップすることでした。

<label for="user_email">Email</label>
<input autocomplete="off" type="text" value="[email protected]" name="user[email]" id="user_email">
<!-- Safari looks for email inputs and overwrites the existing value with the user's personal email. This hack catches the autofill in a hidden input. -->
<label for="fake_email" aria-hidden="true" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)">Email</label>
<input type="text" name="fake[email]" id="fake_email" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)" tab-index="-1" aria-hidden="true">

記録として、このハックが役立つ特定のケースは、管理者が他のユーザーのプロファイルを編集していて、Safariがユーザーのメールを管理者のメールに置き換えていた場合です。このSafariの「機能」が作成する少量の（しかしイライラする）サポートリクエストのために、Safariがそれを引き締めるにつれて進化する必要があると思われるハックを維持する価値はなく、代わりにそれらのユーザーにサポートを提供することにしました自動入力をオフにする方法について。

5
dontwakemeup

これが報告されてからずっと経ってまだ問題だとは信じられません。上記の解決策は私にとってはうまくいきませんでした。サファリは要素が表示されていないときや画面外にあるときを知っているように見えましたが、次のことはうまくいきました：

<div style="position:absolute;height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

それが誰かに役立つことを願っています！

2
Ben

私の問題：管理エリアにユーザーがすべての言語値を設定できるセクションがあり、その一部には「パスワード」、「メール」、「メールアドレス」などの単語が含まれています。これらの値にユーザーの詳細を入力する必要はありません。別の言語への翻訳を作成するためのものです。これは、言及されている「ブラウザの設定を回避する」ための有効な例外です。

私の解決策：私は単に別名を作成しました：

$name = str_replace('email','em___l',$name);
$name = str_replace('password','pa___d',$name);

<input type="text" name="<?=$name?>" id="<?=$name?>" />

次に、フォームが投稿されると：

foreach($_POST as $name=>$value) {
    $name=str_replace('em___l','email',$name);
    $name=str_replace('pa___d','password',$name);
    $_POST[$name]=$value;
}

これは私のために働いた唯一の方法です。

1
vendo

Safariの奇妙なデフォルトのオートコンプリート動作にも噛まれましたが、完全に無効にするのではなく、 https://www.chromium.org/developers/design- documents/form-styles-that-c​​hrome-understands 。

具体的には、autocomplete="username"ユーザー名フィールドとautocomplete="password-current" [パスワード]フィールド。これにより、推測するのではなく、自動入力するフィールドがブラウザに通知され、ユースケースのオートコンプリートが修正されました。

このアプローチは、「電子メール優先」ログインフォーム（パスワードフィールド、Googleログインなど、すぐに表示されない）と、ユーザー名とパスワードの両方のフィールドが表示される従来のログインフォームの両方で機能します。

1
Sebastian Motraghi

JSを使用してコンテンツをクリアするよりも良い-単に偽のパスワードフィールド：

<input type="text" name="user" />
<input fake_pass type="password" style="display:none"/>
<input type="password" name="pass" />

passwordタイプが2倍になったため、ブラウザが不確実になり、ユーザー名のみがオートコンプリートされます

fake_passinputには、name属性を持たせて$_POST 掃除！

0
bortunac

Mobile Safari 10.3.1のReactでSPAで同じ問題が突然発生しました

すべてのテスト済みブラウザで、Mobile Safari IOS 10.2

ただし、10.3.1のユーザー名またはパスワードはフィールドに入力されるため、メンションアクティブな記憶オプションを使用してログインした後の任意のフォームの単語「password」、「email」、「username」。レンダリングされたDOMツリーは全文検索を使用して「分析」され、ユーザーエージェントはautocomplete = "off"設定を考慮せずにデータを入力するようです。また、フィールドのプレースホルダーテキストでもfunnyliが発生します。したがって、このデータが役に立たない場所にユーザー名またはパスワードを事前に入力したくない場合は、命名に非常に注意する必要があります。

数時間の調査の後、唯一の解決策はここに投稿された解決策でした。 「email」という名前の入力フィールドを提供し、高さ：0px、オーバーフロー：hiddenを含むdivを非表示にします。

0
user767644

<form>要素を削除します。フォームの動作を維持するには、入力フィールドのkeypressイベントをリッスンして、押されたenterキーを処理します。念のため、input type="submit"も削除しました。 button type="button"を使用できます。

0
Ikrom

CSS display: noneここで言及した解決策は私にとってはうまくいきませんでした（2016年10月）。 JavaScriptでこの問題を修正しました。

私はブラウザがパスワードを覚えていることを気にしませんが、悪いオートフィルを防止したかったです。私の場合、パスワードフィールドがあり、ユーザー名フィールドが関連付けられていないフォームです。 （Drupal 7サイト、一部の操作にのみパスワードフィールドが必要です。）のユーザー編集フォーム。）私が試みたものは何でも、Safariは自動入力されたパスワード（フィールドたとえば、視覚的に前に配置されます）。

Safariが自動入力を行うとすぐに元の値を復元します。これは、ページの読み込み後の最初の2秒間のみ試行しています。おそらくもっと低い値でも構いません。私のテストでは、ページのロード後約250ミリ秒で自動入力が行われることが示されました（ただし、この数値はページの構築およびロード方法に大きく依存すると思います）。

JavaScriptコード（jQueryを使用）は次のとおりです。

// Workaround for Safari autofill of the e-mail field with the username.
// Try every 50ms during 2s to reset the e-mail to its original value.
// Prevent this reset if user might have changed the e-mail himself, by
// detecting focus on the field.
if ($('#edit-mail').length) {
  var element = $('#edit-mail');
  var original = element.attr('value');
  var interval = setInterval(function() {
    if ($(document.activeElement).is(element)) {
      stop();
    } else if (element.val() != original) {
      element.val(original);
      stop();
    }
  }, 50);
  var stop = function() {
    clearTimeout(timeout);
    clearInterval(interval);
  }
  var timeout = setTimeout(function() {
    clearInterval(interval);
  }, 2000);
}
0
François

このバリアントを試すことができます。わたしにはできる。フィールドの値を一度変更すると、Safariはそれを再び変更します。ユーザーがこのフィールドをクリックすると、Safariによって値が自動的に変更されることはありません。

  $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
        if($.browser.chrome){
            $.browser.safari = false;
        }

        var isChanged=false;

        $('#Email').change(function () {
            if ($.browser.safari && !isChanged) {
                $('#Email').val('@Model.Email');
            }
        });

        $('#Email').click(function () {
            if ( $.browser.safari && !isChanged) {
                isChanged = true;
            }
        }); var isChangePassword = false;
    $('#OldPassword').change(function () {
        if ($.browser.safari && !isChangePassword) {
            $('#OldPassword').val('');
        }
    });

    $('#OldPassword').click(function () {
        if ($.browser.safari && !isChangePassword) {
            isChangePassword= true;
        }
    });
0
Iuliia Artiukh

ブラウザーのプログラマーは、Webサイトの作成者以上のことを知っていると考えているようです。ユーザーがパスワードを保存できるようにすると便利な場合もありますが、セキュリティ上のリスクがある場合もあります。そのような場合、この回避策が役立つ場合があります。

「パスワード」タイプの代わりに、従来のテキスト入力を使用して開始します。

Password: &nbsp <input type="text" id="fkpass" name="bxpass" class="tinp" size="20" />

次に-必要に応じて-入力フィールドにフォーカスを設定します。

<BODY onLoad="fitform()">

ページの最後にJSを配置します。

<script type="text/javascript">
document.entry.fkpass.focus();
function fitform() {
document.getElementById('fkpass').autocomplete = 'off';
}
</script>

これで、従来のフォームフィールドができました。何がいいの？
その入力のCSSスタイルを変更して、文字ではなくすべて「箇条書き」のフォントを使用するようにします。

<style type="text/css">
@font-face { font-family: fdot; src: url('images/dot5.ttf'); }
@font-face { font-family: idot; src: url('images/dot5.eot'); }
@font-face { font-family: wdot; src: url('images/dot5.woff'); }
@font-face { font-family: w2dot; src: url('images/dot5.woff2'); }
.tinp { font-family: fdot, idot, wdot, w2dot; color: #000; font-size:18px; }
</style>

はい、コードを「整理」し、それに.svgを追加できます。

いずれにしても、最終結果は「実際の」パスワード入力と区別できず、ブラウザはそれを保存することを提案しません。

フォントが必要な場合は、 here です。 CorelDrawで作成され、オンラインWebフォント変換ユーティリティで変換されました。 （dot_webfont_kit.Zip 19.3k）

これがお役に立てば幸いです。

0
imillard