10 分でわかる！ Ochanoco Torima の使い方
はじめに
こんにちは！学生団体 おちゃのこセキュリティ の kino-ma (牧野青希) と akakou です。
おちゃのこセキュリティは、 Web アプリケーションを攻撃から守るシステム Torima を開発しました。
Torima は、アプリケーションに とりま 設置するだけで、悪意あるアクセスを防いでセキュリティを向上することができます。
別の記事 で、「Torima って何？何が嬉しいの？🤔」……そんな内容をご説明しました。
この記事では、 実際に Torima を使うための 4 Step をご説明します！ 🎉
Torima を設定するのがいかに簡単か、お伝えしていこうと思います 💪
0. 下準備
Torima は Go で書かれたソフトウェアですが、 Docker Compose を使ってセットアップすることをおすすめしています。
公式ガイド に従って Docker Compose をインストールし、以下コマンドが成功することを確認してください！
# 1. Docker の確認
docker version
# 2. Docker Compose の確認
docker compose version
# または
docker-compose version
そして、 Torima のコンテナイメージを使用するために、 GitHub のレジストリにログインします。
あなたの GitHub アカウントと Personal Access Token でログインしてください！
docker login ghcr.io
1. まずは LINE Login を設定！
Torima は、皆さんご存知の LINE が提供する LINE Login という仕組みを使っています。
まずは、 LINE Login を使うための各種設定を済ませましょう！
1-1. LINE Developers にログイン
LINE Login の各種設定は、 LINE Developers コンソール というサイトで行えます。
LINE Developres コンソールは、お使いの LINE アカウントを使ってログインすることができます。
LINE Developers コンソール ログイン画面
「LINE アカウントでログイン」をクリックし、お使いの LINE アカウントでログインします。
1-2. プロバイダとチャネルを作成
LINE Login を使うためには、 プロバイダ とそれに結びつく チャネル が必要です。
詳細な説明は省きますが、プロバイダはアプリの提供者を表す情報で、チャネルはアプリのような単位です。
先ほどログインした LINE Developers コンソール画面から、まずはプロバイダを作成しましょう。
プロバイダが作成できたら、プロバイダの詳細画面からチャネルを作成します。
ここで、チャネルの設定画面に移動して チャネルID と チャネルシークレット 二つの情報をメモしておきます。
これら二つの情報は、後ほど Torima を起動する前に設定する必要があります。
2. Torima 設定ファイルを作ります
ここから、 Torima を動作させるサービスと設定の作成に入っていきます。
今回は、デモとして我々が公開している Python プログラムを使ってみましょう！
cd お好きな開発用ディレクトリ
git clone git@github.com:ochanoco/torima-demo.git
cd torima-demo
ダウンロードしてきた torima-demo ディレクトリ内の proxy ディレクトリには、すでに内容が埋められた Torima 設定ファイル config.yaml があります。
# Torima サービスが起動するポート
port: 8080
# 転送先になるサービスのオリジン
# "app" コンテナの 5000 番ポートを指定
default_origin: app:5000
# LINE Login なしにアクセスできるパスを複数指定
white_list_path:
- '/favicon.ico'
- '/static/script.js'
- '/post/0'
# サービスには HTTP で接続
scheme: http
次に、 LINE Developer コンソールでメモした認証情報を使って proxy/secret.env を作成します。
cp proxy/secret.env.template proxy/secret.env
secret.env の内容を以下の通り編集します。
TORIMA_CLIENT_ID=メモしたチャネルID
TORIMA_CLIENT_SECRET=メモしたシークレット
3. Web アプリを用意しましょう
先ほどダウンロードしたフォルダのapp/main.py に、 Flask で作られた簡単な掲示板サービスのプログラムが書かれています。
@app.route("/post/<post_id>", methods=['GET'])
def show_post(post_id):
index = int(post_id)
post = posts[index]
return render_template('post.html', post=post)
@app.route("/post", methods=['POST'])
def create_post():
user_id = authenticate()
content = request.form["content"]
posts.append({
'content': content,
'user_id': user_id
})
return render_template('index.html', posts=posts)
TorimaがWebサイトに必要とする実装は2つあります。
- a. ユーザIDの取り出し
- b. ログイン後にリダイレクトするページ
a. ユーザIDの取り出し
ユーザのIDをHTTPリクエストヘッダから取り出すことができます。
今回はプライバシのため、シークレットともにハッシュ化をしています。
def authenticate():
# token = request.headers.get('X-Torima-Proxy-Token', '')
# if token != TORIMA_TOKEN:
# return None
user_id = request.headers.get('X-Torima-UserID', '').encode('ascii')
if not user_id:
return None
hashed_id = hashlib.sha224(user_id + APP_TOKEN).hexdigest()
return hashed_id
b. ログイン後にリダイレクトするページ
Torimaではログイン後、/_torima/backにリダイレクトされます。
このデモではログイン後、トップページにジャンプさせています。
@app.route("/_torima/back", methods=['GET'])
def back():
return redirect('/')
4. Dockerの設定をしてデプロイ！
最後に、サービスと Torima 両方のコンテナを含んだ docker-copmose.yaml を作成します。
デモ用のものは、以下のような内容が含まれているはずです。
version: "3"
services:
next-app:
build:
context: ./next-app
dockerfile: dev.Dockerfile
volumes:
- ./next-app/src:/app/src
- ./next-app/public:/app/public
restart: always
ports:
- "3000:3000"
proxy:
image: ghcr.io/ochanoco/torima:develop
volumes:
- "./data:/workspace/data"
- "./torima/config.yml:/workspace/config.yml"
ports:
- 8080:8080
env_file:
- ./torima/secret.env
environment:
- TORIMA_DB_TYPE=sqlite3 # Your DB type
- TORIMA_DB_CONFIG=file:./data/db.sqlite3?_fk=1 # Your db configuration
docker-compose.yaml の内容が確認できたら、 Torima とサービスを起動します。
docker compose up
ブラウザで http://127.0.0.1:8080/ にアクセスし、以下のような画面が表示されれば成功です！
テキストボックスと Post ボタンが表示されていれば成功です。 All Posts 以下には何も表示されない可能性があります。
試してみる
サーバが起動できたら、実際にサイトを操作して試してみましょう！
- テキストボックスに、適当な内容を入力
- Post ボタンをクリック
- LINE Login の認証画面にリダイレクト
- 画面に従ってログイン
- テキストボックスに投稿内容を入力し、送信
All Posts の一番下に、入力した内容が表示されていれば成功です！
デモサイトでは、投稿一覧の閲覧を安全な操作、新規投稿を危険な操作として定義しています。
このため、危険な操作である "5. 新規投稿" を行うタイミングで LINE Login が要求されるようになっています 👍
おわりに
Web アプリケーションのセキュリティ を簡単に向上させるために我々 おちゃのこセキュリティ が開発した、 Torima の使い方をご紹介しました。
以下の特徴で、 簡単・シンプルに Web アプリケーションのセキュリティを向上させることができます！
- リバースプロキシ形式の簡単デプロイ 👍
- Docker Compose と YAML によるシンプルな設定 👍
- LINE Login で認証機能を提供 👍
この特徴から、 簡単に 新規・既存の Web アプリケーションに適用することができ、 誰でも セキュリティを向上させることができます！ 🎉
Torima のソースコードは GitHub 上で公開しています！
スター ⭐️ 押して頂けますと大変励みになるので、是非よろしくお願いします 🙇
また、今回使用したデモサイトも、 ソース ・サイト の両方を公開しています 💪
最後まで読んでいただき、ありがとうございました 😊
Discussion