Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
今どきのWeb技術で
スコアサーバを改良してみよう
目標
ハッカソンに参加したい!
って気持ちにさせる
もくじ
• ハッカソンについて
• 最新のWeb技術について
• サーバーを拡張してみよう
ハッカソンってなにやるの?
テーマに沿ったプログラムを
会場に集って自由に作る!
SECCON九州大会でのテーマ
• スコアサーバに必要となるサーバ・クライアン
ト型ネットワークアプリケーション技術
• Webアプリケーション技術
• スコアサーバと連携,協調するインタラクティ
ブでエモーショナルなクライアント技術
• ネッ...
CTFに関連してスコアサーバーを
改良してみる
スコアサーバーのお仕事
• 問題出題
– 主催者によるオープン
– 最初に回答した人がオープン
• 回答受付
– 答えとなるキーを入力して送信
• 正否判定
– キーが正しいかチェック。点数を反映
• 得点管理
– チームごと・個人ごとで総得点...
最新のWEB技術って
HTML5
• HTML5(エイチティーエムエル・ファイブ)とは HTML の 5 回目に当
たる大幅な改定版である。表記は HTML と 5 の間にスペースを含
まない[1]。XML の文法で記述する場合、XHTML5 と呼ばれる[2][3]...
簡単にまとめると
• どのブラウザでも同じように利用できる
• オーディオやビデオが利用できる
HTML5に関連する技術
CSS3
WebSocket
Notification API
Web Storage
Web Worker
WebGL
Canvas
Geolocation API
File API
Server-sent Event
実際に拡張してみる
SECCON CTF のスコアサーバー
• https://github.com/yoggy/ctf-scoreserver
• Ruby製
• 機能
– 得点管理
– 問題管理
– アナウンスメント機能
– ユーザー登録
これをもとに拡張をし...
追加する機能
• 通知機能
– 新しい問題
– 得点獲得
– アナウンスメント
• 手法
– WebSocket による リアルタイム通信
– Server-sent eventsによる配信
– NotificationAPI でデスクトップ通...
使うはずだった技術
• WebSocket
– サーバーとブラウザ間でソケット通信ができる
– XMLHttpRequestは?
• 通信のたび接続が必要
• 持続的な通信が難しい
– サーバーからクライアントに情報を
伝える事ができる
使う技術
• Server-sent events
– サーバーのイベントをリアルタイムに
クライアントに送信できる
– HTTPプロトコルを使う
– HTTP接続を継続したまま
– Chunkごとに分けてクライアントにデータを送る
– Pus...
push通信イメージ
Client Server
ポーリング型
Client Server
プッシュ型
使う技術
• Notification API
– 通知を出すAPI
– 対応ブラウザ:Firefox, Chrome, Safari
サーバー
• EventStream用のパスを用意
$connections = []
get '/stream', :provides => 'text/event-stream' do
stream :keep_open do |out|
...
サーバー
• イベント送信
post '/admin/save' do
c = Challenge.find_by(id: params['id'])
c ||= Challenge.new
admin_block do
c.id = para...
クライアント
• クライアントからServer-sent eventsで接続
var es = new EventSource('/stream');
es.onmessage = function(e) {
var data = JSON.p...
クライアント
• 通知 –オプトイン-
if (Notification) {
if (Notification.permission === "denied" ) {
console.log("disable notification”);
...
クライアント
• 通知
var notification = new Notification(“タイトル”, { body: “メッセージ”});
notification.onshow = function() { setTimeout(n...
実際に
ハッカソンに向けて
• CTFサーバーの改良
– 新しいWeb技術を取り入れてみる
• アイディア次第!
– 他のCTFのスコアサーバーも参考にしてみる
– キーによる回答以外の方法も?
• File APIでファイルを投げてみるとか
• 他の...
SECCON CTF ハッカソンに
参加してみよう!
ありがとうございました!
SECCON@福岡ハッカソン直前勉強会「今どきのWeb技術でスコアサーバーを改良してみよう」
SECCON@福岡ハッカソン直前勉強会「今どきのWeb技術でスコアサーバーを改良してみよう」
SECCON@福岡ハッカソン直前勉強会「今どきのWeb技術でスコアサーバーを改良してみよう」
SECCON@福岡ハッカソン直前勉強会「今どきのWeb技術でスコアサーバーを改良してみよう」
SECCON@福岡ハッカソン直前勉強会「今どきのWeb技術でスコアサーバーを改良してみよう」
Upcoming SlideShare
Loading in …5
×

SECCON@福岡ハッカソン直前勉強会「今どきのWeb技術でスコアサーバーを改良してみよう」

588 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SECCON@福岡ハッカソン直前勉強会「今どきのWeb技術でスコアサーバーを改良してみよう」

  1. 1. 今どきのWeb技術で スコアサーバを改良してみよう
  2. 2. 目標 ハッカソンに参加したい! って気持ちにさせる
  3. 3. もくじ • ハッカソンについて • 最新のWeb技術について • サーバーを拡張してみよう
  4. 4. ハッカソンってなにやるの?
  5. 5. テーマに沿ったプログラムを 会場に集って自由に作る!
  6. 6. SECCON九州大会でのテーマ • スコアサーバに必要となるサーバ・クライアン ト型ネットワークアプリケーション技術 • Webアプリケーション技術 • スコアサーバと連携,協調するインタラクティ ブでエモーショナルなクライアント技術 • ネットワークの状況や競技進行の様子を可視 化する技術
  7. 7. CTFに関連してスコアサーバーを 改良してみる
  8. 8. スコアサーバーのお仕事 • 問題出題 – 主催者によるオープン – 最初に回答した人がオープン • 回答受付 – 答えとなるキーを入力して送信 • 正否判定 – キーが正しいかチェック。点数を反映 • 得点管理 – チームごと・個人ごとで総得点の記録・表示
  9. 9. 最新のWEB技術って
  10. 10. 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より
  11. 11. 簡単にまとめると • どのブラウザでも同じように利用できる • オーディオやビデオが利用できる
  12. 12. HTML5に関連する技術 CSS3 WebSocket Notification API Web Storage Web Worker WebGL Canvas Geolocation API File API Server-sent Event
  13. 13. 実際に拡張してみる
  14. 14. SECCON CTF のスコアサーバー • https://github.com/yoggy/ctf-scoreserver • Ruby製 • 機能 – 得点管理 – 問題管理 – アナウンスメント機能 – ユーザー登録 これをもとに拡張をしてみる
  15. 15. 追加する機能 • 通知機能 – 新しい問題 – 得点獲得 – アナウンスメント • 手法 – WebSocket による リアルタイム通信 – Server-sent eventsによる配信 – NotificationAPI でデスクトップ通知 実装間に合いませんでした…
  16. 16. 使うはずだった技術 • WebSocket – サーバーとブラウザ間でソケット通信ができる – XMLHttpRequestは? • 通信のたび接続が必要 • 持続的な通信が難しい – サーバーからクライアントに情報を 伝える事ができる
  17. 17. 使う技術 • Server-sent events – サーバーのイベントをリアルタイムに クライアントに送信できる – HTTPプロトコルを使う – HTTP接続を継続したまま – Chunkごとに分けてクライアントにデータを送る – Push通信が実現できる
  18. 18. push通信イメージ Client Server ポーリング型 Client Server プッシュ型
  19. 19. 使う技術 • Notification API – 通知を出すAPI – 対応ブラウザ:Firefox, Chrome, Safari
  20. 20. サーバー • 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
  21. 21. サーバー • イベント送信 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
  22. 22. クライアント • クライアントから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; } }
  23. 23. クライアント • 通知 –オプトイン- if (Notification) { if (Notification.permission === "denied" ) { console.log("disable notification”); return; } Notification.requestPermission(function(p) { if (p === "denied") { console.log("disable notification”); return; } }); return; }
  24. 24. クライアント • 通知 var notification = new Notification(“タイトル”, { body: “メッセージ”}); notification.onshow = function() { setTimeout(notification.close, 3000);}
  25. 25. 実際に
  26. 26. ハッカソンに向けて • CTFサーバーの改良 – 新しいWeb技術を取り入れてみる • アイディア次第! – 他のCTFのスコアサーバーも参考にしてみる – キーによる回答以外の方法も? • File APIでファイルを投げてみるとか • 他のテーマ – 色々なアイディア
  27. 27. SECCON CTF ハッカソンに 参加してみよう!
  28. 28. ありがとうございました!

×