2006-01-31 アーカイブ

フォーム周りのインターフェースをプチ改造しました

現在、 hxxk.jp では検索フォームやコメント投稿フォームやトラックバック送信フォームやトップページのゲストブック投稿フォームなど、多くのフォームをページ内に配置しています。 今日ふと思い立って、それらの文面を入力する部分がフォーカスされた場合に、予め書かれていた文章をクリアするように変更しました。 いただいたコメントにお返事を返す際に、 コメント本文は必須となっています。 という文章を手動で消すのがどうにも煩わしい、でも最初からテキストエリア内を空白にしたくはないということで、毎回手動で消していましたが、今回の変更で解決。

ちなみに、 JavaScript を用いて実現していますので、 JavaScript を無効にしている、あるいは無効になる環境ではフォーカスしてもクリアされません。 ソース自体は LIPPiN のコメントフォーム周りを無断で参考にさせていただきました。 というか身近な ( と私は勝手に思っている ) サイトで実践されていたのに、それに気付いていなかったということが不覚すぎます。

input 要素でのクリアのやり方

まず、 type="text" である input 要素でのやり方。 ( ちなみに、 type 属性を指定しない場合の規定値は text であるので、お使いのフォームの input 要素内に type 属性が見当たらない場合もこれに該当します。 ) 名前やメールアドレスを入力する欄など、一行の入力欄に用いるやり方です。

<input type="text" onfocus="if (this.value == '初期入力値') this.value = '';" onblur="if (this.value == '') this.value = '初期入力値';" value="初期入力値" />

input 要素をこのように記述することで、フォーカス時にクリアされるようになります。 気を付けなければいけないのは、 初期入力値 をきちんと統一する点です。

textarea 要素でのクリアのやり方

次に、 textarea 要素でのやり方。 コメントの本文など、複数行に渡る入力欄に用いるやり方です。

<textarea rows="表示行数を示す数字" cols="表示幅を示す数字" onfocus="if (this.value == '初期入力値') this.value = '';" onblur="if (this.value == '') this.value = '初期入力値';">初期入力値</textarea>

textarea 要素をこのように記述することで、フォーカス時にクリアされるようになります。 気を付けなければいけないのは、 初期入力値 をきちんと統一する点に加え、必須属性である rows 属性と cols 属性を忘れずに指定するという点です。

謝辞

参考に……というかほとんどコピー & ペーストさせていただきました。＞ lego さん ( LIPPiN ) このお礼はいずれ何らかの形で。 と言ってもどういった形で行うか全く考えていませんが !

もしくはうーたん ( Bazooka ) に代わりに奉仕してもらうとか。 ( いやこの場合うーたん関係ないし ( それと起こしてくれてありがとね ! ＞うーたん ( 微妙に意味深 ( 実態は何てことはないことです ) ) ) )

はてなブックマークの CSRF 脆弱性 ( 対策済 )

はてなブックマーク日記 - お気に入りに追加ボタンのCSRF脆弱性修正についてという記事を見かけていたんですが、どういった脆弱性が存在していたのかなーと思っていたら、先ほど追記したはてなのプロフィール画像によって表示は遅くなるのかという検証と、プロフィール画像を非表示にするいくつかの方法で触れた plotless: はてブのユーザアイコンでSafariが激重に!? 繋がりで [はてな] 削除されたプロフ画像 :: ぼくはまちちゃん！、そして被お気に入り数を増やす / はてなの誰が見にきたかを知る :: ぼくはまちちゃん！に辿り着きました。

これは CSRF 脆弱性を突いて、本人が意識することなくはてなブックマークのお気に入りに登録させるものでしたが、逆に Retasuの日記 - お気に入り戦争のように、そのお気に入り登録を解除する CSRF 攻撃も出現していました。 そういった流れを受けて、はてなブックマーク日記 - お気に入りに追加ボタンのCSRF脆弱性修正についてという対策に至ったようです。

CSRF って何っていう方は、 Movable Type における CSRF の可能性と各種対処法や、その他キーワード "CSRF" が設定された記事をご覧ください。 それぞれの記事の中に、外部の参考リソースへのリンクも書いてあります。 最近では、まこと先輩と星野君とCSRFの微妙な関係 － ＠IT という記事もあります。 関係ないけど、その記事の前回分である Webアプリ、入力チェックで万事OK？ － ＠IT のトナカイ星野君が可愛いです。 ちなみにイラストを担当したのは交差点の真中での harupu さん。 ～JavaScriptでXMLHttpRequest～という Ajax の解説ページがためになります。

ある程度自衛できる場合と自衛できない場合

CSRF 攻撃というのは、仮に web システム側に脆弱性があっても、ユーザ側で防御策を取ることで防ぐことができる場合もあります。 例えば、 Movable Type ( 記事を投稿する時など以外はログアウトする、記事を投稿するブラウザと通常の web ブラウジング用のブラウザを使い分けるなど ) やはてなダイアリー ( 日記を書く時や他人のダイアリーにコメントを書く時以外はログアウトする、日記を書いたりコメントを書いたりするブラウザと通常の web ブラウジング用のブラウザを使い分けるなど ) がそれにあたります。

しかし、はてなブックマークのように、ログインしている状態で web ブラウジングすることを前提として作られているシステムは、こうした自衛策は使い辛いものです。 ( ブックマークレットを用いて手軽にブックマークを追加できるというのが売りのため、こまめにログアウトしたり、ブラウザを使い分けるというのは不便でなりません。 ) Bloglines や FEEDBRINGER などもログインして web ブラウジングする前提になっていますので、はてなブックマークだけの話ではありませんが。

となるとシステム提供側による確実かつ素早い対応が求められるわけですが、ユーザ側も「常にログイン状態で web を歩いている」ということを気にかけておくようにしてください。 自衛し辛いと言っておいて何ですが。