SECCON＠福岡ハッカソン直前勉強会で発表したものです。 SECCONのスコアサーバーにServer-sent eventsとNotificationAPIを使って新しい問題の通知機能を実装してみました。

1. 今どきのWeb技術で
スコアサーバを改良してみよう

2. 目標
ハッカソンに参加したい！
って気持ちにさせる

3. もくじ
• ハッカソンについて
• 最新のWeb技術について
• サーバーを拡張してみよう

4. ハッカソンってなにやるの？

5. テーマに沿ったプログラムを
会場に集って自由に作る！

6. SECCON九州大会でのテーマ
• スコアサーバに必要となるサーバ・クライアン
ト型ネットワークアプリケーション技術
• Webアプリケーション技術
• スコアサーバと連携，協調するインタラクティ
ブでエモーショナルなクライアント技術
• ネットワークの状況や競技進行の様子を可視
化する技術

7. CTFに関連してスコアサーバーを
改良してみる

8. スコアサーバーのお仕事
• 問題出題
– 主催者によるオープン
– 最初に回答した人がオープン
• 回答受付
– 答えとなるキーを入力して送信
• 正否判定
– キーが正しいかチェック。点数を反映
• 得点管理
– チームごと・個人ごとで総得点の記録・表示

13. 最新のWEB技術って

15. HTML5
• HTML5（エイチティーエムエル・ファイブ）とは HTML の 5 回目に当
たる大幅な改定版である。表記は HTML と 5 の間にスペースを含
まない[1]。XML の文法で記述する場合、XHTML5 と呼ばれる[2][3]。
• HTML5 は WHATWG によって2004年に定められた Web
Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専
門委員会に採用され、W3C より2008年1月22日にドラフト（草案）
が発表された。
• 現在、2014年までの正式勧告を目指して策定が行われている[4]。
改訂の主要目的のひとつとして人間にも読解可能でコンピュー
ターやディバイス（ウェブブラウザ、構文解析器など）にも矛盾せず
読解されるとともに最新のマ ルチメディアをサポートする言語に向
上することである。HTML5ではHTML 4だけでなくXHTML1や
DOM2HTML（特にJavaScript)も加える意向である。
http://ja.wikipedia.org/wiki/HTML5より

16. 簡単にまとめると
• どのブラウザでも同じように利用できる
• オーディオやビデオが利用できる

17. HTML5に関連する技術
CSS3
WebSocket
Notification API
Web Storage
Web Worker
WebGL
Canvas
Geolocation API
File API
Server-sent Event

18. 実際に拡張してみる

19. SECCON CTF のスコアサーバー
• https://github.com/yoggy/ctf-scoreserver
• Ruby製
• 機能
– 得点管理
– 問題管理
– アナウンスメント機能
– ユーザー登録
これをもとに拡張をしてみる

20. 追加する機能
• 通知機能
– 新しい問題
– 得点獲得
– アナウンスメント
• 手法
– WebSocket による リアルタイム通信
– Server-sent eventsによる配信
– NotificationAPI でデスクトップ通知
実装間に合いませんでした…

21. 使うはずだった技術
• WebSocket
– サーバーとブラウザ間でソケット通信ができる
– XMLHttpRequestは？
• 通信のたび接続が必要
• 持続的な通信が難しい
– サーバーからクライアントに情報を
伝える事ができる

22. 使う技術
• Server-sent events
– サーバーのイベントをリアルタイムに
クライアントに送信できる
– HTTPプロトコルを使う
– HTTP接続を継続したまま
– Chunkごとに分けてクライアントにデータを送る
– Push通信が実現できる

23. push通信イメージ
Client Server
ポーリング型
Client Server
プッシュ型

24. 使う技術
• Notification API
– 通知を出すAPI
– 対応ブラウザ：Firefox, Chrome, Safari

25. サーバー
• EventStream用のパスを用意
$connections = []
get '/stream', :provides => 'text/event-stream' do
stream :keep_open do |out|
$connections << out
out.callback { $connections.delete out }
out.errback do
logger.warn "lost connection"
$connections.delete out
end
end
end

26. サーバー
• イベント送信
post '/admin/save' do
c = Challenge.find_by(id: params['id'])
c ||= Challenge.new
admin_block do
c.id = params['id']
…(中略)
c.save
if c.status == 'show'
json = { "type" => "challenge", "id" => c.id, "abstract" => c.abstract, "point" => c.point }
$connections.each { |out| out << "data: #{JSON.generate(json)}nn" }
end
redirect '/admin/main'
end
end

27. クライアント
• クライアントからServer-sent eventsで接続
var es = new EventSource('/stream');
es.onmessage = function(e) {
var data = JSON.parse(e.data);
if (data.type === "challenge") {
notification.newNotify({title: "新しい問題があります",
detail: "新しい問題が追加されました！n 問題:“ + data.abstract
});
return;
}
}

28. クライアント
• 通知 –オプトイン-
if (Notification) {
if (Notification.permission === "denied" ) {
console.log("disable notification”);
return;
}
Notification.requestPermission(function(p) {
if (p === "denied") {
console.log("disable notification”);
return;
}
});
return;
}

29. クライアント
• 通知
var notification = new Notification(“タイトル”, { body: “メッセージ”});
notification.onshow = function() { setTimeout(notification.close, 3000);}

30. 実際に

31. ハッカソンに向けて
• CTFサーバーの改良
– 新しいWeb技術を取り入れてみる
• アイディア次第！
– 他のCTFのスコアサーバーも参考にしてみる
– キーによる回答以外の方法も？
• File APIでファイルを投げてみるとか
• 他のテーマ
– 色々なアイディア

32. SECCON CTF ハッカソンに
参加してみよう！

33. ありがとうございました！