Rails と Vue.js を用いた SPA でログイン の仕組みを作ってみる(Cookieでの注意編)

前回ログインセッションを localstrage に持つことを試したものの、あまり推奨できたものではないことを確認しました。
その中で、ただただ Cookie を使ってもいけないということがわかったので、その点を修正してみます。

目次

• やること
• 実装
• 確認

やること

• httppnly 属性を付与する
• SameSite=strict を付与する
• secure=true を付与する

この 3 点を試します。

実装

Cookie の書き込み以下のように修正する。

各属性の付与前

cookies[:authed] = { value: u.set_session_key, expires: 1.hour.from_now }

各属性の付与後

cookies[:authed] = { value: u.set_session_key, expires: 1.hour.from_now, same_site: :strict, secure: false, http_only: true}

secure: trueを設定すると https が必須になるので、https が使えない開発環境では false にしておく必要がある。

各属性の付与後(実行環境を考慮)

secure_flag = Rails.env.development? ? false : true
cookies[:authed] = { value: u.set_session_key, expires: 1.hour.from_now, same_site: :strict, secure: secure_flag, http_only: true}

確認

ここまでできたら、bundel exec rails sで、Rails を起動。
frontディレクトリで npm run serveを実行し、webpack-dev-server を起動します。

Cookie の書き込まれた、ログイン後に開発ツールのコンソールでdocument.cookie;を実行します。
""だけが返ってくるのが確認できます。

今回の修正前は、文字列が取得できていました。確かに JavaScript で操作をできないように Cookie を発行できました。
ちなみに、JavaScript では操作できませんでしたが、開発ツールのApplicationのタブで見ることは可能でした。

secureの付与については、true にしていた場合に、Cookie が書き込みできないことがわかりました。
ローカルは https になっていないので、追々確認することとしましょう。

---

Cookie の発行について、安全に取り扱う方法を確認しました。
セキュアな内容の取り扱いは難しいとも感じますが、安全に進めたいものです。

ではでは。