素敵な夜ですね。
Webアプリの概要
crypt.c
https://crypt-c.herokuapp.com/
作りました。
文書を簡単に簡単な鍵で暗号化できる簡単なWebアプリです。
インターネット上の友達にクイズ問題を出題して頂いたりスパイごっこをして遊んで頂く為のアプリです。
構成
express,milligram(css)
作った流れ
expressの学習
単ページなので公式チュートリアルのルーティングあたりだけ読みました
CSSフレームワーク
Web開発は初めてなのでさっぱりわからず、とりあえずシンプルなやつを探しました。
BootstrapのようなjQueryも混ざるようなものは意味不明になってしまうので……。
本格的なものもそのうち触りたいですが。
uikit,Semantic,Milligram,mini,Skeletonをパッと見で候補としまして、uikitとSemanticはjavascriptも絡むものの為排除、MilligramとminiとSkeltonを様子見しています。
Milligram
一番雰囲気が良かったのでこれにしました。
シンプル志向で作られており、シンプルすぎて配置等に関する機能も最小限です。
mini
ちょっとだけランディングページが好みに合わず避けました。
ヘッダーフッター等も揃っており、Milligramよりは多機能です。
最低限度をしっかり揃えたものと思われます。次はこれを使います。
Skeleton
Milligramと同程度機能のCSS。
デザインカッコいいのでそのうち使います。
暗号化フレームワークの選定
苦労しました。
当初crypto.jsというフレームワークがシンプルでいいと思っていたのですが、うまくHTMLに入れ込めず断念。
forgeというフレームワークをお借りした結果もうまく行かず、最終的に気合でcrypto.jsを使用しました。
暗号化
AESを応用した形式で、単一のパスフレーズを入れてフレームワークを暗号化してくれます。
セキュリティ対策
app.disable('x-powered-by');でバージョン問い合わせを無効化した後、
"></script><script>alert(0)</script>
上記コードでXSSのテストを行いました。
最初はセキュリティモジュールhelmetを触ってみたのですが、うまく動かせませんでした。
恐らくcrypto.jsを読みに行く動作が良くないのではないかと思っています。
次は使います。
デプロイ
herokuを使いました。３秒で終わって怖かったです。
おわりに
はじめてWebアプリの開発に成功し興奮しています。 ですが実用性には程遠く、今年中に人の役に立つアプリを作りたいです。
現在岸原オカルト研究部では、黒魔術（WEB開発）を研究しています。 twitter:@kisihara_c
