オートコンプリートがオフのパスワード入力を自動入力するユーザースクリプト

自分がよく利用するサイトに、楽天リサーチhontoがあるのですが、この二つのサイトはログイン画面のフォームのオートコンプリートがオフになっており、ログイン画面を開くとパスワードが自動入力されていない状態となっています(IDは自動入力しているようです。hontoはチェックボックスにチェックを入れなければいけませんが)。

正直、毎回毎回パスワードを入力しなくちゃいけないのはすごい面倒です。面倒だから簡単なパスワードや使い回しのパスワードを使ってしまい、パスワードが簡単にバレてしまうという問題も起こりかねないと思うのですが・・・。

というわけで、簡単なものですが、パスワードの入力ボックスを自動入力するユーザースクリプトを作ってみました。

(function(){
	// honto
	if(location.href.indexOf('honto.jp/reg/login.html')>0){
	    var pwArea = document.getElementById('dy_pw');
            if(pwArea){
                pwArea.value = "********";
            }
	// 楽天リサーチ
	}else if(location.href.indexOf('rakuten.co.jp/rms/nid/login')>0){
            var pwArea = document.querySelector("input[type='password']");
            if(pwArea){
                pwArea.value = "********";
            }
        }
})();

やっていることは単純で、URLを調べて該当の文字列があれば(今回の場合、hontoでは’honto.jp/reg/login.html’)、その中のパスワード入力ボックスを探してパスワードを入力するという処理を行っています。
上記のソースコードをコピーして、”********”の箇所を自分のパスワードに書き換え、拡張子が.user.jsとして保存し、Chromeの拡張機能ページ(chrome://extensions/)を開いた状態でドラッグアンドドロップすると機能するはずです。
自動的にログインボタンを押す機能もつけようと思ったらできるのですが、パスワードが間違っていた場合に無限ループに陥ってしまう可能性があるため、やめておきました。そういう場合でも対策はあるとは思うのですが・・・。

ところで、hontoのほうではgetElementByIdを使ってパスワード入力ボックスのDOMオブジェクトを取得し、楽天リサーチのほうではquerySelectorでinputタグのtype属性がpasswordになっているところを見つけてパスワード入力ボックスのDOMオブジェクトを取得しています。hontoのほうもdocument.querySelector(“input[type=’password’]”)で取得できると思いますが、最初はどちらもgetElementByIdで取得しようと思ったためにこういう書き方になっています。
なぜか、楽天リサーチのほうでgetElementByIdを使ってDOMオブジェクトを取得しようとするとうまくいきませんでした。パスワード入力ボックスのIDには”loginInner”というIDが振られているようなのですが、、document.getElementById(‘loginInner’)としてもなぜかうまくいかない・・・。おかしいなぁ。なんでだろう・・・。と思って詳しく調べてみたら・・・、なんとログインフォームを囲んだdivタグのID名がloginInner・・・。さらにはユーザIDの入力ボックスのID名もloginInner・・・。
知っている人も多いと思いますが、ID属性は一意識別子をあらわし、同じページでは同じID名を重複してはいけないということになっています(参考:id 属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP)。
楽天のような大きな会社でもこういうページがあるということにちょっと驚きました(自分も想定外の仕様変更で重複させてしまったということはあるので、人のことは言える立場じゃないです・・・)。

コメント

タイトルとURLをコピーしました