mixi Scrap Challenge 2014に参加した

11/16に行われたmixi主催のScrap Challenge 2014に参加してきました。

午前[セキュリティ概論]

午前中はWebセキュリティについて解説がありました。

過去にmixiが実際に受けた攻撃についての解説もあって、「やばい感」が伝わってきました。

特にCSRFの実証コードが公開されてしまった話はびびりました。当時脆弱性をどこに報告すればよいか分かりづらく、報告する前に公開されてしまったとのこと。

ちなみに、脆弱性報告先に迷ったらIPAも窓口になってくれるらしいです。覚えとこ。
脆弱性関連情報の届出:IPA 独立行政法人 情報処理推進機構

昼食

f:id:setchi_q:20141123202219j:plain
f:id:setchi_q:20141123200100j:plain
写真のデータが壊れてる。なぜ。
とにかくおいしかったです。ごちそうさまでした!

午後[競技開始]

問題に沿って、偽mixiサイトに攻撃してチームごとにポイントを競います。

普段からWebさわっているけど、ちょっとひねった問題とか規格を詳しく知らないと解けない問題もあって一筋縄ではいかず。2時間半があっという間に過ぎ去りました。

あと途中から、集中力を乱す妨害コンテンツが投入されました。組み合わせ爆発おねえさんの動画とか流れてた気がする。いろいろたのしかった!

結果

なんとか2位になりました!
上手く問題分担したりチームワーク良かったと思います。みんなありがとう!

感想

自分が攻撃側に回ってWebセキュリティを学べる凄いイベントだと思いました。

普段から趣味でWeb触ってたりしていても気づかなかった攻撃手法や、「こんな手が!!」と思う目から鱗的な手法も知れて、とても勉強になりました。今まで作ったWebアプリの脆弱性もチェックしておきたいと思います。

お世話になった方ありがとうございました!

f:id:setchi_q:20141123204027j:plain

ko-chaリニューアルしました。

手軽にコーディングチャットができるwebアプリ「ko-cha」をリニューアルしました。
前作は暇つぶしに数日で開発して色々と機能不足だったので、友達同士で使っている時に気になっていたところを今回のリニューアルで実装しました。
http://setchi.jp/ko-cha2/

主な変更点

複数タブに対応

前作はひとつのファイルしか共有できませんでした。タブ数の上限は特に設けてませんが、多すぎると重くなります。

全員がファイル共有できる

前作では最初に入場した2人のみエディタの編集権限が与えられました。今回のリニューアルで全員に専用のエディタが与えられ、それぞれ共有できるようになりました。

見てない部分が更新されると光って通知

自分が見ていないタブが更新されると、そのタブの色が変わって通知します。また、表示してないユーザーが内容を更新した場合、左上のアイコンが光って通知します。

レイアウトを変更できる

例:横分割のレイアウトからf:id:setchi_q:20140726231852p:plain
アイコンをドラッグして、f:id:setchi_q:20140726231859p:plain
ドロップ位置によってレイアウト変更します。
f:id:setchi_q:20140726231856p:plain
真ん中辺りでドロップすると一面表示もできます。f:id:setchi_q:20140726234315j:plain

用途や画面に合わせて見やすいレイアウトで使ってください。


リアルタイム通信の部分は前作のものを引き継いで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で動くアスキーアートな動画プレーヤーを作った

http://setchi.jp/moziplayer/

ドラッグ&ドロップされた動画ファイルや、インカメラの映像をテキストアートで再生するwebアプリを作って遊んでました。

f:id:setchi_q:20140722015954p:plain
f:id:setchi_q:20140722020036p:plain

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/ 対応しているブラウザ少ないですがデスクトップ通知機能追加しました。
f:id:setchi_q:20140707232351p:plain

プログラミング言語の拡張子一覧

拡張子からプログラミング言語を判定する場面があったのでメモ。
表記ミスや漏れがあったら指摘していただけると幸いです。

言語 拡張子
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アップデート

大したアプリじゃないですが、とりあえずβ版卒業させました('_')

以下β版からの変更点です

  • 大幅に軽量化して、以前よりヌルヌル動きます。
  • ブラウザのサイズに合わせてプレーヤーのサイズが最適化されます。
  • リピート再生機能を追加しました。
  • Firefoxに対応しました(でもChrome推奨…)
  • サイト全体を可変レイアウトにしました。


リクエスト動画が溜まってきたのでそちらも少しずつ消化していきます。

MoziMovie | http://setchi.jp/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;
}

サンプル

 

元の文字列 

圧縮された文字列 

復号された文字列

同じパターンが連続していると圧縮率が高くなる感じです。

モダンブラウザなら申し分ない速度で動くし、膨大な文字列ならweb workerで走らせることもできるので十分実用的かも。

MoziMovieアスキーアート圧縮配信でも利用してます。

AA動画をブラウザで再生できる【MoziMovie】作りました。

暇つぶしに、ブラウザ上でアスキーアート動画を再生できる【MoziMovie】というサイトを作りました。
ブラウザはGoogleChromeのみ対応、スマホ未対応です。

MoziMovie | http://setchi.jp/mozimovie/

【コーデュート!】OCamlに対応しました。

伝えたいことがタイトルで完結してますが、OCamlに対応しました。
Hello, World!とクイックソートを追加してあります。

文法的に省略可能な空白文字云々は全く調整してないので、もし「省いたらダメな空白が飛ばして打てる」や、その逆があったら報告していただけると助かります…('_')

f:id:setchi_q:20131026171859p:plain

対応言語数が45になりました。
コーデュート!{β} | https://codeute.com/