コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

どこまでできるか分からないけどもNをやってみる。3

2020年Nの旅

コロナの影響で某学習サイトが無料開放しているのでできるところまで進めていこうと思ったんでやってみることにしました。
f:id:andron:20200419085049p:plain
ようやく第3章終わったのでその報告を……。



前回記事
inujini.hatenablog.com
やっぱりちゃんとナンバリング表記できるまで終わらせると気持ちいいですね。


今回やったこと!

f:id:andron:20200423215705p:plain
前回終わらせることのできなかった掲示板アプリの続きからです。Glitchでやるネタが挟めなくなってしまったのでHerokuでやっていきます。GlitchはSQLite動くっぽいんだけどね……。

ということで話が地続きなんでそのまま軽く内容軽く触れながらこんなんできましたで終わりにさせようかなと思います。

21. フォームによる投稿機能
22. 認証された投稿の一覧表示機能
25. 削除機能の実装
POST・GET・DELETEな処理の実装です。

f:id:andron:20200423220113p:plainf:id:andron:20200423220121p:plainf:id:andron:20200423220124p:plain
最終版載せちゃっていてアレですがこの辺りの機能を追加していきました。


23. データベースへの保存機能
www.postgresql.org
作成したアプリはHerokuにつなぐのでここではPostgreSQL使います。レッスンではDBの導入にとどめてSQL書き書きとか踏み込んだことは特になしです。
ちなみにHerokuのPostgresのプランはこんな感じ。
Heroku Postgres | Heroku Dev Center
無料で遊ぶには

# 無料枠の導入:hobby-dev
# 参考 https://devcenter.heroku.com/articles/heroku-postgres-plans#hobby-tier
$ heroku addons:create heroku-postgresql:hobby-dev
# 確認
$ heroku addons

このコマンドだけでいけちゃうそうです。あ、Herokuコマンド使えるようにしないとherokuって叩いてもそんなコマンドありませんよとか言われるので注意です。

ElephantSQL - PostgreSQL as a Service
そういえばレッスンと全然関係ない話ですが、ここが20MB分だけど無料でPostgresSQL使えるっていうのを最近知った。これならGlitchでもなんとかなるのかなあ……?20MBって投稿サイトみたいな形式だとすぐ埋まりますよね……。Herokuの無料プランもまあ同じ感じなんだけど、うーん…。


24. トラッキングCookieの実装
今回はクッキーを使ってなりすましを防止する方針だそうです。以下のツールを使ってやるそうですよ。
GitHub - pillarjs/cookies: Signed and unsigned cookies based on Keygrip
こいつを使ってやるらしいです。

GitHub - jshttp/cookie: HTTP server cookie parsing and serialization
似たようなやつにこういうのあって小一時間詰まった。こっちはクッキー解析するのに使うらしい。タイポレベルのミスだと

Error: Cannot find module 'cookies'

とかに気づかない。


26. 管理者機能の実装
最初の方に管理者機能の重要性についてといてあった。僕的にはめっちゃ重要なこと書かれていると思ったけども、そういうの絶賛しているところないね。投稿系サイトは運用考えると絶対面倒になりそうなのに……。

さて、掲示板サービスみたいなものを作った時に問題のある投稿をした場合。

この辺りの法律に触れる可能性があるんよみたいなこと書かれてて「そうだね」ってなった。だから管理者機能をつくってそうならないようにするんだよみたいなこと書かれてます。めっちゃ大事―★


27. デザインの改善
Bootstrap - 世界で最も人気のあるフロントエンドのコンポーネントライブラリ
使うのはBootStrap4っぽいです。今更BootStrapについてもなあとか思ってたけども、Pugで書くので書き方がdiv.containerみたいに普段と違う書き方になって若干新鮮だった。


28. 脆弱性
OS コマンド・インジェクションのお話。

OS コマンド・インジェクション
コンピュータシステムに対する外部からの攻撃手法の一つで、システムへの入力文字列中にオペレーティングシステム(OS)のコマンド(命令文)として解釈できる断片を紛れ込ませ、不正に実行させるもの

my-exploit-sample/os-command-injection at master · Andou666/my-exploit-sample · GitHub
実際に試してみるとこんな感じ。


29. XSS脆弱性の対策
XSSのお話。

クロスサイトスクリプティング (XSS)
利用者が入力した内容を表示するような構成のWebサイトに存在する欠陥を悪用して、攻撃者が用意した悪意のあるスクリプトを利用者の元に送り込んで実行させる攻撃手法。

こんなやつ。CSSと書くとスタイルシートと紛らわしいからXSSになったやつ。投稿フォームにスクリプトタグを描くとそのまま実行できる脆弱性を悪用するやつ。対策は書けないようにすること。そんな感じの内容書かれてます。



30. パスワードの脆弱性の対策
推測されやすいパスワードは簡単に攻撃されるよっていうお話。

総当たり攻撃
暗号の解読やパスワードの割り出しなどに用いられる手法の一つで、割り出したい秘密の情報について、考えられるすべてのパターンをリストアップし、片っ端から検証する方式。英名の“brute force”の原義は「力づく」。

my-exploit-sample/password-challenger at master · Andou666/my-exploit-sample · GitHub
実際に試してみるとこんな感じ。攻撃対象になるサーバー用意できてないんでそのうちそっちも作っていきたいなあ…。

対策は例えば以下の通りだそうで……。
GitHub - http-auth/htpasswd: Node.js package for HTTP Basic Authentication password file utility.

htpasswd -D users.htpasswd admin
htpasswd -bB users.htpasswd admin {推測されにくいpassword}

こんな感じに推測されにくいパスワードをつくってやろうハッシュ化して使おうとかそんな感じ。あとは何回か間違えたらログインできなくするとかの機能にしたりとか。


31. セッション固定化攻撃脆弱性の対策
32. より堅牢なセッション管理
以下のようなやつへの対策です。

セッションハイジャック
ネットワーク上で一対の機器間で交わされる一連の通信(セッション)を途中で乗っ取り、片方になりすましてもう一方から不正にデータを詐取したり操作を行なう攻撃。

今回は認識にクッキー使ってるんでそれが割れたら、ブラウザ機能で書き換えられるんでそれの対策をしようねとかそんな感じの内容。と、それへの対策の実装。


33. CSRF脆弱性の対策
クロスサイトリクエストフォージェリについてのお話。

CSRF
Webブラウザを不正に操作する攻撃手法の一つで、偽装したURLを開かせることにより利用者に意図せず特定のサイト上で何らかの操作を行わせるもの。

こんなやつ。
my-exploit-sample/csrf-study at master · Andou666/my-exploit-sample · GitHub
実際に試してみるとこんな感じ。これもREADMEには一応説明書いてますが、攻撃対象になるサーバー用意できてないんでそのうちそっちも作っていきたい。あとREADMEに書いているけども悪用しないでね。


34. Herokuへの安全な公開
といった対策を施してHerokuに公開します。
秘密の掲示板
以前雑にHeroku公開した時はDB連携させてなかったなってことに気づいたんで、そのお試しで今回はそのまま公開しちゃいます。
パスワードは以下。デフォルトのまま変更してません。

user:guest1 pass:1234
user:guest2 pass:5678

管理者パスはさすがに変更してます。なあ管理者になっても削除できるだけで特に権限はありませんがw。


といった感じでアプリ作っていきます。ざっくり斜め読みで進めていたので、はじめにこんな感じの設定用シェル作ったりしていた。

# フレームワークを利用しているのでないので必要ファイルを手動で作成していきます。
touch index.js
touch test.js
echo "node_modules/" > .gitignore

# 追加モジュール
mkdir lib
touch lib/router.js
touch lib/posts-handler.js
touch lib/handler-util.js
touch lib/post.js

# View
mkdir views
touch views/posts.pug

# Heroku設定
echo "web: node index.js" > Procfile
touch app.json

# READMEファイル
touch README.md

################
# 開発用情報    #
# ユーザデータ  #
################
touch users.htpasswd
{
echo admin:apple
echo guest1:1234
echo guest2:5678
} > users.htpasswd

全体のコードはこんなん。
GitHub - Andou666/secret-board-n


これレッスンごとに細かくやること区切ってるので、まじめにレッスン受けてリポジトリ作っていくとかなりの数になります。それがいいのか悪いのかは分かりませんがやった感はでるよね……(禁句)。



ということで続きます。