ログイン画面を作っています。
【仕様】
①ログイン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
1jQuery(function ($) { 2 // ================== 3 // ログイン情報オート入力 4 // ================== 5 var log = getCookie(COOKIE_LOGIN); // ログイン情報のクッキー取得 6 if (log == "") { 7 // ログイン情報のクッキーがない時 8 $("#login_id").val(""); // 入力欄には 他サイトのIDが表示される (NG) 9 $("#login_id").val(" "); // 入力欄には 他サイトのIDが表示される (NG) 10 $("#login_id").val("123"); // 入力欄には 123が表示される (OK) 11 $("#passwd").val("1234"); 12 } else { 13 // ログイン情報のクッキーから入力欄に自動入力 14 var bf = new Blowfish(BLOWFISH); 15 var plaintext = bf.decrypt64(log); // 復号化 16 var log = plaintext.split(DIVIDE_CHAR); 17 $("#login_id").val(log[0]); 18 $("#passwd") .val(log[1]); 19 } 20}
##質問
ブラウザ(Chrome)が自動入力したあとにJavaScriptを実行させて、ログインの入力ボックスを""で上書きしてしまえばいいのではないかと考えますが、どうしたらいいのでしょうか?
または、自動入力させないなにか方法はありますか?
以上よろしくお願い致します。
##参考
サイボウズエンジニアのブログに興味深い記事がありました
http://blog.cybozu.io/entry/7452
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。