任意のサイトで自動ログインするブックマークレットを作る

ブックマークレットとは

ブックマークから任意の JavaScript コードを実行して、表示中のページに対して何らかの処理を行ったりできる仕組み。

任意のサイトで自動ログインする？

任意のサイトでブックマークレットを実行すると、ID・パスワード欄に情報を入力し、自動で「ログイン」ボタンを押すような処理をさせる。

動き的には Firefox アドオンの Secure Login みたいな感じのもの。

注意

サンプルコード 1

以下のようなフォームがあるページで実行するブックマークレットを想定する。

<form action="Login" id="loginform">
  <p>ユーザ名   : <input type="text"     id="username" value=""></p>
  <p>パスワード : <input type="password" id="userpass" value=""></p>
  <p><input type="submit" id="submitbtn" value="ログイン"></p>
</form>

このようなページに対し、以下のようなブックマークレットを作ってやれば、ユーザ名に「NeosID」、パスワードに「NeosPassword」が自動入力され、ログインボタンを押すまでが自動操作できる。

javascript:(function(d,i,v){d[i]("username")[v]="NeosID";d[i]("userpass")[v]="NeosPassword";d[i]("loginform").submit();})(document,"getElementById","value");

軽く整形するとこんな感じ。

javascript:(function(d, i, v) {
  d[i]("username")[v] = "NeosID";
  d[i]("userpass")[v] = "NeosPassword";
  d[i]("loginform").submit();
})(document, "getElementById" ,"value");

コードの解説

結局やっていることは、document.getElementById("id名").value = "テキストボックスに入れたい文字列"; というのを短く書いて、最後にフォームを Submit しているだけである。

document.getElementById().value を短く書くために、無名関数の引数を利用して、変数 d に document、i と v には文字列で "getElementById" と "value" を与えている。

プロパティを文字列で渡したのは、プロパティに配列記法でアクセスするため。document.getElementById は document["getElementByid"] と書いてもアクセスできる。これを変数化したものが、d[i] になっている、という寸法。value についても同じなので、最終的に d[i]("id名")[v] = "文字列" といった書き方ができる。

サンプルコード 2

ログインボタンの作りによっては submit() でうまくログインできない場合がある。そんな時は、ボタンのクリックイベントを発火させるよう、最後の部分をちょっと変えてやる。

まず HTML のサンプル。さっきと違うのはログインボタンが type="submit" ではなく type="button" になっているところ。

<form action="Login" id="loginform">
  <p>ユーザ名   : <input type="text"     id="username" value=""></p>
  <p>パスワード : <input type="password" id="userpass" value=""></p>
  <p><input type="button" id="submitbtn" value="ログイン"></p>
</form>

次に、ブックマークレットはこんな風にする。異なるのは #loginform に対し submit() を叩くのではなく、#submitbtn の click() を呼び出すところ。

javascript:(function(d,i,v){d[i]("username")[v]="NeosID";d[i]("userpass")[v]="NeosPassword";d[i]("submitbtn").click();})(document,"getElementById","value");

実際のサイト向けに作り直す

ログインページのソースを表示し、ログインフォームを特定する id さえ見付けられれば OK。大抵は id が振られていると思うが、そうでなかったら class 名から判別するとか、特定要素 (input 要素など) を配列で取得し、name 属性の値で判別するとかしても良いだろう。

時にはログインボタンのクリック処理がうまくいかないことがあるので、そういうときは「ログインボタン押下」だけは諦めて手でクリックする… (笑)。

参考