« 2007年09月 | メイン | 2007年11月 »

2007年10月 アーカイブ

2007年10月01日

miya2000さんの「ブックマークレットの状態を保存する」を再実装してみる

miya2000さんからTBを頂いた。「ブックマークレットの状態を保存する」というBookmarkletを作成した際に、当サイトで公開しているLibraryを参考にして頂いたとの事。おもしろい内容だったので同じ機能を再実装してみた。もとのBookmarkletはボタンによる制御だったが、こちらはリアルタイムにBookmarkletを生成し、キャンセルはダブルクリックとなっている。同時にGOLFを行なったのでかなり分かりにくく、汎用性のないものになってしまった。反省。

javascript:(
    function(t){
        var
         l  =   "addEventListener"
        ,c  =   "childNodes"
        ,g  =   "createElement"
        ,p  =   "appendChild"
        ,z  =   "replace"
        ,m  =   arguments.callee
        ,d  =   document
        ,b  =   d.body
        ,v  =   d[g]("div")
        ,a  =   d[g]("a")
        ,h  =   d[g]("textarea")
        ,s  =   v.style
        ,f  =   false
        ,x
        ,y
        ,r  =   function(){
                    a.href  =   "javascript:("              +
                                m.toString()                +
                                ")(\""                      +
                                v[c][0].value
                                    [z](/\\/ig,"\\\\")
                                    /*[z](/\b/ig,"\\b")*/
                                    [z](/\f/ig,"\\f")
                                    [z](/\n/ig,"\\n")
                                    [z](/\r/ig,"\\r")
                                    [z](/\t/ig,"\\t")
                                    [z](/'/ig,"\\'")
                                    [z](/"/ig,"\\\"")       +
                                "\")"
                }
        ;
        s.cssText="width:30em;padding:5px;position:absolute;top:20px;left:20px;background-color:white;border:black solid 1px;cursor:move;z-index:99";
        h.style.cssText="width:100%;height:7em;display:block";
        a.innerHTML="Bookmarklet";
        b[p](v);
        v[p](h);
        v[p](a);
        h[l]("click",r,0);
        h[l]("keyup",r,0);
        h[l]("change",r,0);
        v[l]("dblclick",function(){b.removeChild(v)},0);
        v[l]("mousedown",function(e){f=true;x=e.pageX-v.offsetLeft;y=e.pageY-v.offsetTop},0);
        d[l]("mousemove",function(e){if(f){s.left=e.pageX-x+"px";s.top=e.pageY-y+"px"}},0);
        d[l]("mouseup",function(){f=false},0);
        h.value=t
    }
)("")
追記(2007/10/01)
変数名が親のscopeの変数と重複していたので変更した。
e="createElement"; -> g="createElement";

2007年10月04日

脆弱性検証用画像を作成

この画像は、Microsoft Internet Explorerの画像ファイルに対する脆弱性を、検証するためのものです。
ユーザが画像を投稿でき、投稿された画像をブラウザ上で表示するようなWebアプリケーションの場合、この脆弱性が発生する可能性があります。
実際に投稿を行い、検証してみて下さい。自分の管理下ではないサイトで行った場合、不正アクセス等の犯罪行為に問われる可能性がありますので取り扱いにはご注意下さい。
「XSS:Cross Site Scripting」とalertが表示、「Phishing」と画面に表示、別ウィンドウ(または別タブ)が開き「Session Hijacking」がGoogleにて検索等の動作が確認された場合、そのWebアプリケーションはセキュリティ上の問題があります。
Cross Site Scriptingをはじめ、Session Hijacking等、JavaScriptを利用した多くのクラッキングが可能となっています。早急に対策の必要があります。
上記画像を右クリックでダウンロードして下さい。
IEは画像をimg要素を用いて表示する場合は、HTTPヘッダを見てファイルの種類を判断しているようです。しかし、IEから画像を直接開いた場合、標準設定ではそのファイルの内容によりファイルの種類を判断しているようです。
IE6の場合、インターネットオプションのセキュリティの設定内にある、「拡張子ではなく、内容によってファイルを開くこと」が有効になっている場合に発生します。
お勧めの対処方法は以下の通りです。
アップロードされた画像の実ファイルへの、直接リンクが発生しないような構造にします。
ダウンロードをさせる場合は必ず、Content-Typeを「application/octet-stream」等に設定し、ブラウザ内への直接表示を避けるようにします。
画像はDBに保存する場合は、ダウンロード時のファイル名が問題になりますが、Content-Dispositionに「attachment; filename="[ファイル名]"」とすると指定可能です。アップロード時にファイル名を保存しておくとよいでしょう。
参考サイト
この脆弱性は以前から概要は把握していたのですが、詳細な実証方法は知りませんでした。
以下のリンク先の、サイボウズ・ラボの竹迫さんのプレゼンファイルを見ていたときに偶然に発見したため、作成に至りました。
竹迫さん、ありがとうございます。

2007年10月25日

関西でJavaScriptの小さい勉強会を開くことになった

開催決定までの経緯
Twitter上で
Shibuya.JSが盛り上がっているのを関西から見ていると非常に悔しい。関西にも同様なコミュニティはないのか。
誰もやらないのなら自分でやるしかない。最近そう考える。
ただ、勉強会と言えるようなものは規模が大き過ぎて時期早々だと思う。
読書会かCodeReading位が妥当か。
もし、開催するなら参加してみたいと思うか、Twitter上でFollowersに問うてみる。
(略)
自分を追い込んでみるもんだ。逃げ道はなくなったな。
と発言したため、急転直下、開催が決まってしまった。
内容はどうするのか
本来は、プレイベントのようなものから始め、主催者も経験を積みながら大きくしていけたらなと考えていたが、みんな同じ気持ちなのか本イベント開催の勢いである。しかし、経験不足は否めないし、急な開催なので時間もない。
読書会にした場合、今回のために本を購入する人が出てくると思う。読書会が失敗した場合、本を購入した人に申し訳ない。とりあえず、準備期間のいらなさそうなCodeReadingにした。
CodeReadingなら主催者も参加者も痛手は少ない。それに、Codeを各々で持ち寄れば、費用は会場費とお菓子代位しか発生しない。
CodeReadingの方法
上記の通り、CodeReadingを甘く考えていたが、現実は違うのかもしれない。運の良い事に、ミラクル・リナックスのCTOである吉岡氏に直接お会いする機会があったので、CodeReadingについて少しお伺いした。要約すると、「JavaScriptのことはよくわからないけど、ObjectとMethodの一覧は必要ではないか」との事。全く持って、その通りだと思う。甘かったと思う。Methodについては無理かもしれないが、Object位はなんとかしようかと思う。
何をCodeReadingするのか
Prototype.jsをCodeReadingしようかと考えている。Ajaxの黎明期に現れ、今でも一番使われているFrameworkである。それまでのJavaScriptは、各々の開発者がそれぞれの書き方をしてきたため、記述方法が一般化していなかった。Prototype.jsの登場当時、ドキュメントが揃っていなかった為、InnovatorやEarly Adopterは挙ってPrototype.jsの解析を行った。Prototype.jsのCodeは非常に簡潔で洗練されていたため、後に登場するFrameworkやLibrary、個人によって書かれたCodeにまで影響を与えたと思う。つまり、Prototype.jsを読む事は、今のJavaScriptを理解するために非常に重要であると考えられる。
SourceViewerについて
CodeReadingに少しは役に立つToolを作ろうという事でSourceViewerを作成した。
使用方法は多分不要だと思う。Codeにtabが含まれていた場合、2tabとしてスペースに変換する。文字数を考慮に入れた変換を行うため、インデントがおかしくなるような事はないと思う。
イベントの名称
かなり強引に「Kanasan.JS」となった。今回限りの名称なのか、次回より変更するのかも全く不明。
Kanasan.JSへの参加表明の方法
cotocoto内Kanasan.JSで参加申し込みして下さい。
参加者へのお願い
とりあえず、初回の勉強会です。主催者も不慣れなため温かく見守ってください。ただ参加するのではなく、勉強会を皆で一緒に育てていく、そんな気持ちを持って頂ければ幸いです。また、何かアイディアがありましたら、よろしくお願いします。意見・批判等も遠慮なくどうぞ。主催者がかなり不安を感じているので、後ろ向きな文章となってしまっていますがご了承ください。
(2007/10/25追記)
cotocotoの今日現在にイベント告知を以下に引用する。
■目的
みんなに誤解され、そして現在ではみんなに愛される言語、それはJavaScript。
みんなでJavaScriptと戯れましょう。

■内容
Prototype.jsのCodeReadingを行ないます。
Prototype.jsは、CodeReadingの対象であり、使い方の学習が主目的ではありません。
もちろん、使用方法を覚えることも目的ではありますが...。
黙々と読み進めるだけでなく、自由に質問して下さい。
処理内容がわからないまま読み進めるようなことは、できるだけ避けましょう。

■日時
2007/11/03 13:00~17:00

■場所
蛍池中町3-2-1-501
豊中市立蛍池公民館 5F 第一講座室
# ルシオーレという商業施設の北館(A棟)の5階です。
# 阪急宝塚線「蛍池駅」、モノレール「蛍池駅」下車、
# 連絡デッキより入れます
* 会場はネットワーク隔離
* 電源あり

案内板にもしかしたら「Haskell関西」と書かれているかもしれませんが
実態はKanasan.JSなので、ご注意ください。

■参加費
300~500円(参加人数による)

■持ち物
・Prototype.JSのソース
  必須です。現段階で安定版の最新であるversion1.5.1.1を使用します。
  [http://www.prototypejs.org/]
  プリントアウトしたものでも、Downloadしたままでも、もちろん両方でも構いません。
  自分が一番読みやすい方法で結構です。
  個人的にはiPod touchでCodeReadingする強者をお待ちしております。
・パソコン
  PCでもMacでもあった方が便利かと思います。
  外部への接続は出来ないため、必要だと思われるデータはDownloadしておくと便利でしょう。

■事前アンケート
参加者のスキルを把握するために、今自分に一番近いものを下の項目から選び、コメントに書いて頂くようお願いします。
参加者層次第では、内容の変更を考えております。
  質問1.JavaScriptの経験は何年位ですか?
  質問2.プログラミングの経験は何年位ですか?
  質問3.使える言語を教えて下さい。

■主催者について
このようなイベントを開催するのは今回が初めてです。
至らない点があるかと思いますが、なにとぞ御了承頂けるようお願いします。


■■以下、蛇足情報のため読み飛ばして頂いてかまいません。■■


■Kanasan.JSとは
それは、kanasanのTwitterへの書き込みからはじまった。
「Shibuya.JSが盛り上がっているのを関西から見ていると非常に悔しい。関西にも同様なコミュニティはないのか。
 誰もやらないのなら自分でやるしかない。最近そう考える。
 ただ、勉強会と言えるようなものは規模が大き過ぎて時期早々だと思う。
 読書会かCodeReading位が妥当か。
 もし、開催するなら参加してみたいと思うか、Twitter上でFollowersに問うてみる。
 (略)
 自分を追い込んでみるもんだ。逃げ道はなくなったな。」
この言葉に反応したイジワルな(失礼!)Twitterer、ujihisaによってイベントがcotocotoに登録された。
本格的に後に引けなくなったkanasanは、準備期間もほとんどないまま開催を決意する。
抵抗するkanasanをよそに、強引な(失礼!)ujihisaによって「Kanasan.JS」と命名された。

■Kanasansoft・kanasan・Kanasan.JS ujihisa
「かなさん」は、漢字で書くと「愛さん」、意味は「愛しい」です。
「ちゅらさん」で有名なあの場所の言葉です。
ニッチでも作業内容によっては、なくてはならない、愛されるようなアプリケーションを開発するために、「www.kanasansoft.com」のドメインをとったのがそもそもの始まりです。
最初はKanasansoftと名乗っていたのですが、人名に「soft」の文字が入るに違和感を感じたため、次第にkanasanと名乗るようになりました。
今回のイベント名「Kanasan.JS」は、この「かなさん」の意味を知ったujihisaにより強引に押し切られました。
「Kanasan.JS」のJSは「u[j]ihi[s]a」のjsではありません。
JavaScriptの略語です。ちなみに、javascriptの書かれたファイルの拡張子は「js」です。

2007年10月30日

Kanasan.JS、開催前の反響

Kanasan.JS開催宣言の反響には本当に驚いている。勉強会のスタイルをとらないCodeReadingであるにも関わらずだ。特に、Ruby勉強会での知名度には驚いた。Ruby勉強会やShibuya.JSと比べると確かに少人数だが、私としては結構な人数である。
関西圏でJavaScript関連の勉強会が、いやせめてイベントを開催して欲しい、という思いが皆にあったという事か。まるで飽和食塩水に塩の粒を落とした時のように、一気に大きな結晶になりそうだ。今後の方針や名称の事もあるが、今週末は精一杯やろうと思う。
Google