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

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

on

  • 280 views

SECCON@福岡ハッカソン直前勉強会で発表したものです。 ...

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

Statistics

Views

Total Views
280
Views on SlideShare
278
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 今どきのWeb技術で スコアサーバを改良してみよう
    • 目標 ハッカソンに参加したい! って気持ちにさせる
    • もくじ • ハッカソンについて • 最新のWeb技術について • サーバーを拡張してみよう
    • ハッカソンってなにやるの?
    • テーマに沿ったプログラムを 会場に集って自由に作る!
    • SECCON九州大会でのテーマ • スコアサーバに必要となるサーバ・クライアン ト型ネットワークアプリケーション技術 • Webアプリケーション技術 • スコアサーバと連携,協調するインタラクティ ブでエモーショナルなクライアント技術 • ネットワークの状況や競技進行の様子を可視 化する技術
    • CTFに関連してスコアサーバーを 改良してみる
    • スコアサーバーのお仕事 • 問題出題 – 主催者によるオープン – 最初に回答した人がオープン • 回答受付 – 答えとなるキーを入力して送信 • 正否判定 – キーが正しいかチェック。点数を反映 • 得点管理 – チームごと・個人ごとで総得点の記録・表示
    • 最新のWEB技術って
    • 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より
    • 簡単にまとめると • どのブラウザでも同じように利用できる • オーディオやビデオが利用できる
    • 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ごとに分けてクライアントにデータを送る – Push通信が実現できる
    • 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| $connections << out out.callback { $connections.delete out } out.errback do logger.warn "lost connection" $connections.delete out end end end
    • サーバー • イベント送信 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
    • クライアント • クライアントから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; } }
    • クライアント • 通知 –オプトイン- if (Notification) { if (Notification.permission === "denied" ) { console.log("disable notification”); return; } Notification.requestPermission(function(p) { if (p === "denied") { console.log("disable notification”); return; } }); return; }
    • クライアント • 通知 var notification = new Notification(“タイトル”, { body: “メッセージ”}); notification.onshow = function() { setTimeout(notification.close, 3000);}
    • 実際に
    • ハッカソンに向けて • CTFサーバーの改良 – 新しいWeb技術を取り入れてみる • アイディア次第! – 他のCTFのスコアサーバーも参考にしてみる – キーによる回答以外の方法も? • File APIでファイルを投げてみるとか • 他のテーマ – 色々なアイディア
    • SECCON CTF ハッカソンに 参加してみよう!
    • ありがとうございました!