質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.21%

Chromeでオートコンプリートを阻止する方法について

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 6,108

teratail_user

score 14

ログイン画面を作っています。

【仕様】
①ログインID と パスワード を入力し、ログインボタンを押下するとログイン処理を実行する
②ログイン処理の結果、ログインIDとパスワードが正しかったら、クッキーに ログインID と パスワードを保存し、画面遷移する
③次回ログイン画面を表示したとき、クッキーが保存されていれば、自動的にログインIDとパスワードを入力する

こんな仕様のログイン画面を作っていたのですが問題が発生しました。

問題発生

他のサイト(phpPgAdmin) にログインIDとパスワードを入れて、ブラウザが パスワードを保存しますか?とたずねてきたときに 保存 する と、
自作のログイン画面のログインID および パスワードに、他のサイトで入れたログインIDとパスワードが自動で入ってしまっています。

環境

・他のサイト(phpPgAdmin) と、 自作のログイン画面は同じホスト名(+ドメイン名)です。
例)
http://watashino.saito.jp/phpPgAdmin/
http://watashino.saito.jp/web/login.html

検証

・他のサイト(phpPgAdmin) のログイン入力欄のidやnameは自作のログイン画面のそれと被っていません
・自作のログイン画面の form タグ および、input タグ に  autocomplete="off" を記してみましたが、だめでした 
・仕様の③で、前回ログインしたときのログインIDとパスワードをJavaScriptにより自動入力するのですが、このクッキーが無い場合は初期値が"" なのですが、これだと ブラウザが勝手に他のサイトのログイン情報で内容を上書きしてしまうようです。
初期値に"" か、空白(" ")以外を設定すると、ブラウザが上書きしないようです。

つまり、"" で JavaScriptで上書きは通用しなかったです・・・

そのときのコードです。(jQueryを利用しています)

jQuery(function ($) {
    // ==================
    // ログイン情報オート入力
    // ==================
    var log = getCookie(COOKIE_LOGIN);    // ログイン情報のクッキー取得
    if (log == "") {
        // ログイン情報のクッキーがない時
        $("#login_id").val("");     // 入力欄には 他サイトのIDが表示される (NG)
        $("#login_id").val(" ");    // 入力欄には 他サイトのIDが表示される (NG)
        $("#login_id").val("123");  // 入力欄には 123が表示される (OK)
        $("#passwd").val("1234"); 
    } else {
        // ログイン情報のクッキーから入力欄に自動入力
        var bf         = new Blowfish(BLOWFISH);
        var plaintext  = bf.decrypt64(log); // 復号化
        var log        = plaintext.split(DIVIDE_CHAR);
        $("#login_id").val(log[0]);
        $("#passwd")  .val(log[1]);
    }
}

質問

ブラウザ(Chrome)が自動入力したあとにJavaScriptを実行させて、ログインの入力ボックスを""で上書きしてしまえばいいのではないかと考えますが、どうしたらいいのでしょうか?

または、自動入力させないなにか方法はありますか?

以上よろしくお願い致します。

参考

サイボウズエンジニアのブログに興味深い記事がありました
http://blog.cybozu.io/entry/7452

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

自己解決しました。
Chromeが入力ボックスを変更したときに onChange イベントが発生していました。
なので、

「ログイン入力ボックスのチェンジイベントを監視し、イベントが発生したら中身を""で上書きする」

処理を追加しました。
ただし、”ブラウザが勝手にいれた”ときのみ実行したいので
(他のサイトのログイン入力情報をクリアしてもちゃんと動作するように)

・入力ボックスでキー入力があった場合は監視フラグを下ろす
・ログイン情報クッキーがあった場合はフラグを下ろす
・ブラウザが勝手にいれたときいちどきりでフラグを下ろす

処理を追加しました。(はぁ。)

// ==================
    // ログイン情報オート入力
    // ==================
    var change_monitor_f = true;    // ログイン入力ボックスに変更があった場合、中身を消すフラグ
    var log = getCookie(COOKIE_LOGIN);         // ログイン情報のクッキー取得
    if (log != "") {
        change_monitor_f = false;             // ログイン情報のクッキーがあるので、フラグ無効
        var bf           = new Blowfish(BLOWFISH);
        var plaintext    = bf.decrypt64(log); // 復号化
        var log          = plaintext.split(DIVIDE_CHAR);
        $("#login_id").val(log[0]);
        $("#passwd")  .val(log[1]);
    }
    $("#login_id").on("change", function(){
        if (!change_monitor_f) return false; // 監視フラグ無効時は処理しない
        var log = getCookie(COOKIE_LOGIN);     // ログイン情報のクッキー取得
        if (log == "") {
            change_monitor_f = false;         // いちどきりなので フラグ無効
            $("#login_id").val("");
            $("#passwd")  .val("");
        }
    });
    // ==================
    // キー入力監視
    // keyclass は、ログインIDまたはパスワード入力ボックスに付けとく
    // ==================
    $(".keyclass").keypress( function ( e ) {
        change_monitor_f = false;  // 監視フラグ無効
    } );

もちろんもっとスマートな方法、そもそも無効にできる方法はまだまだ募集!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る