mixi Scrap Challenge 2014に参加した
11/16に行われたmixi主催のScrap Challenge 2014に参加してきました。
午前[セキュリティ概論]
午前中はWebセキュリティについて解説がありました。
過去にmixiが実際に受けた攻撃についての解説もあって、「やばい感」が伝わってきました。
特にCSRFの実証コードが公開されてしまった話はびびりました。当時脆弱性をどこに報告すればよいか分かりづらく、報告する前に公開されてしまったとのこと。
ちなみに、脆弱性報告先に迷ったらIPAも窓口になってくれるらしいです。覚えとこ。
脆弱性関連情報の届出:IPA 独立行政法人 情報処理推進機構
昼食
写真のデータが壊れてる。なぜ。
とにかくおいしかったです。ごちそうさまでした!
午後[競技開始]
問題に沿って、偽mixiサイトに攻撃してチームごとにポイントを競います。
普段からWebさわっているけど、ちょっとひねった問題とか規格を詳しく知らないと解けない問題もあって一筋縄ではいかず。2時間半があっという間に過ぎ去りました。
あと途中から、集中力を乱す妨害コンテンツが投入されました。組み合わせ爆発おねえさんの動画とか流れてた気がする。いろいろたのしかった!
結果
なんとか2位になりました!
上手く問題分担したりチームワーク良かったと思います。みんなありがとう!
感想
自分が攻撃側に回ってWebセキュリティを学べる凄いイベントだと思いました。
普段から趣味でWeb触ってたりしていても気づかなかった攻撃手法や、「こんな手が!!」と思う目から鱗的な手法も知れて、とても勉強になりました。今まで作ったWebアプリの脆弱性もチェックしておきたいと思います。
お世話になった方ありがとうございました!
ko-chaリニューアルしました。
手軽にコーディングチャットができるwebアプリ「ko-cha」をリニューアルしました。
前作は暇つぶしに数日で開発して色々と機能不足だったので、友達同士で使っている時に気になっていたところを今回のリニューアルで実装しました。
http://setchi.jp/ko-cha2/
主な変更点
複数タブに対応
前作はひとつのファイルしか共有できませんでした。タブ数の上限は特に設けてませんが、多すぎると重くなります。
全員がファイル共有できる
前作では最初に入場した2人のみエディタの編集権限が与えられました。今回のリニューアルで全員に専用のエディタが与えられ、それぞれ共有できるようになりました。
見てない部分が更新されると光って通知
自分が見ていないタブが更新されると、そのタブの色が変わって通知します。また、表示してないユーザーが内容を更新した場合、左上のアイコンが光って通知します。
レイアウトを変更できる
例:横分割のレイアウトから
アイコンをドラッグして、
ドロップ位置によってレイアウト変更します。
真ん中辺りでドロップすると一面表示もできます。
用途や画面に合わせて見やすいレイアウトで使ってください。
リアルタイム通信の部分は前作のものを引き継いでPHPでlong-pollingしてるので、若干タイムラグがあります。ここはnode.jsでSocket.IOとか使いたいですが、今のレンタルサーバー対応してないのでサーバー変えたいなあ…。
主に学校の人とプログラム教え合う用途でローカルに使ってますが、機会があったら活用してやってください(*_*)
http://setchi.jp/ko-cha2/
【FileAPI, readAsText】JavaScriptで文字コードを判別して文字化けを倒す
HTML5で追加されたFileAPIで、ローカルファイルをJavaScriptで扱えるようになりました。ファイルの中身をテキストと見なして読み込むreadAsTextメソッドでは、第二引数で文字コードを指定できますが、そもそも文字コードが分からなかったり自動判別したいときの対処法です。
結論としては、readAsArrayBufferでバイナリのまま読み込んでライブラリにデコードしてもらいます。
今回 encoding.js を使いました。
数値配列をもとに、文字コードの判別や変換をしてくれるマッチョなライブラリです。
var file = // 文字コードの分からないテキストファイル var reader = new FileReader(); reader.onload = function (e) { // 8ビット符号なし整数値配列と見なす var array = new Uint8Array(e.target.result); // 文字コードを取得 switch (Encoding.detect(array)) { case 'UTF16': // 16ビット符号なし整数値配列と見なす array = new Uint16Array(e.target.result); break; case 'UTF32': // 32ビット符号なし整数値配列と見なす array = new Uint32Array(e.target.result); break; } // Unicodeの数値配列に変換 var unicodeArray = Encoding.convert(array, 'UNICODE'); // Unicodeの数値配列を文字列に変換 var text = Encoding.codeToString(unicodeArray); console.log(text); // 結果 } reader.readAsArrayBuffer(file);
コーディングチャットができるwebアプリ「ko-cha」で、ドラッグ&ドロップされたファイルを文字化けせずに読み込めるようになりました。
http://setchi.jp/ko-cha2/
HTML5で動くアスキーアートな動画プレーヤーを作った
ドラッグ&ドロップされた動画ファイルや、インカメラの映像をテキストアートで再生するwebアプリを作って遊んでました。
UIとか色々手抜きですが一応動きます。一番右のつまみで解像度を調節できます。
Chrome/Firefoxで動作確認済み
http://setchi.jp/moziplayer/
【JavaScript】他の画面を見ていることを検知する
チャットアプリで、ユーザーが他の画面を見ている(と思われる)ときにチャットが来た場合に通知をしたかった時のメモです。
それらしい資料が見当たらなかったので、ページが描画されていないときのrequestAnimationFrameとsetTimeoutの挙動の違いを利用して強引にやってます。
function executeIfNotViewing(callback) { var rendered= false; requestAnimationFrame(function () { rendered = true; }); setTimeout(function () { if (!rendered) callback(); }, 1000); } executeIfNotViewing(function () { alert('他の画面見てたでしょ'); });
ということで、
Ko-cha | http://setchi.jp/ko-cha/ 対応しているブラウザ少ないですがデスクトップ通知機能追加しました。
プログラミング言語の拡張子一覧
拡張子からプログラミング言語を判定する場面があったのでメモ。
表記ミスや漏れがあったら指摘していただけると幸いです。
言語 | 拡張子 |
---|---|
ABAP | .abp |
ActionScript | .as |
C | .c |
C++ | .cpp |
COBOL | .cobol |
CoffeeScript | .coffee |
C# | .cs |
CSS | .css |
Clojure | .clj |
D | .d |
Dart | .dart |
Erlang | .erl |
Forth | .forth |
Go | .go |
Groovy | .groovy |
Haskell | .hs |
Haskell | .lhs |
Haxe | .hx |
HTML | .html |
HTML | .htm |
XHTML | .xhtml |
Java | .java |
JavaScript | .js |
jsx | .jsx |
Lisp | .lisp |
LSL | .lsl |
Lua | .lua |
MATLAB | .mat |
SQL | .sql |
Objective-C | .m |
OCaml | .ml |
Pascal | .pas |
Perl | .pl |
PHP | .php |
Prolog | .pro |
Prolog | .swi |
Python | .py |
R | .r |
Ruby | .rb |
Rust | .rs |
Scala | .scala |
Scheme | .scm |
ShellScript | .sh |
TypeScript | .ts |
VBScript | .vbs |
Verilog | .v |
assembly_x86 | .asm |
XML | .xml |
XQuery | .xquery |
厳密には「プログラミング言語」とは呼べないものも含まれてます。
MoziMovieアップデート
JavaScriptで文字列を圧縮する
jsで文字列を圧縮する方法を探していたらこんなページを見つけました。
javascript - でデータを圧縮/伸張する
これを使えば良いやと思っていたら、あるデータパターンで上手く復元できないことがありました。
とりあえず
JavaScript文字列(UTF-16)をUTF8化
↓
RawDeflate.deflate()
↓
base64エンコード
とすれば圧縮できて、逆をすれば復号ができるようなので難しいことは考えず確実に簡単に動くものを作りました。
高度なJavaScript技集にあるdeflate.js(圧縮用)とinflate.js(復号用)をHTML内で読み込んで下記のような関数を定義。
// 圧縮関数 (要deflate.js) function deflate(val) { val = encodeURIComponent(val); // UTF16 → UTF8 val = RawDeflate.deflate(val); // 圧縮 val = btoa(val); // base64エンコード return val; } // 復号関数 (要inflate.js) function inflate(val) { val = atob(val); // base64デコード val = RawDeflate.inflate(val); // 復号 val = decodeURIComponent(val); // UTF8 → UTF16 return val; }
サンプル
AA動画をブラウザで再生できる【MoziMovie】作りました。
暇つぶしに、ブラウザ上でアスキーアート動画を再生できる【MoziMovie】というサイトを作りました。
ブラウザはGoogleChromeのみ対応、スマホ未対応です。
【コーデュート!】OCamlに対応しました。
伝えたいことがタイトルで完結してますが、OCamlに対応しました。
Hello, World!とクイックソートを追加してあります。
文法的に省略可能な空白文字云々は全く調整してないので、もし「省いたらダメな空白が飛ばして打てる」や、その逆があったら報告していただけると助かります…('_')
対応言語数が45になりました。
コーデュート!{β} | https://codeute.com/