初めまして。株式会社PRVENT開発部、バックエンドチームの横川です。
現在入社2年目で、普段はGoやRubyを書いて仕事してます。
今回はCookieのSameSite属性とSecure属性について紹介したいと思います。
なぜ書こうと思ったか
現在、『Mymonitor』という弊社のスタッフと取引先が利用するプロダクトのリプレースを進めており、Cookie初心者の自分がCookieを使ったログイン管理を実装しました。
そこで直面したエラーのおかげでCookieについて調べ上げCookieを完全に理解したので、今回直面したエラーの原因でもあるSameSite属性とSecure属性の挙動について記事にすることにしました。
そもそも Cookieとは
ブラウザで何かのサイトを閲覧した際にそのサイトのサーバーが発行してブラウザへ送信, 保存するテキスト情報です。
そのテキスト情報は、次またそのサイトへアクセスした際に毎回自動でブラウザからサーバーへ送信されるようになっていて使い方は様々です。
具体的にはサーバー側からのレスポンスにSet-Cookieヘッダを付与することでブラウザにセットされます。
ログアウトできない...
MymonitorはフロントエンドにNext.js, バックエンドにGoを採用しており分業体制で開発を進めています。
ある程度機能を作ったところで一旦AWSに載せてみることになったのですが、ローカル環境では問題なく動作していたログアウトがAWS環境だと動作しませんでした...
ただこのエラーを機に、Cookieについて調べ上げることとなります。
原因はSamesite属性とSecure属性
確認したところ、サーバー側で発行するログアウト時のCookieにSameSite属性とSecure属性を設定していなかったのが原因でした。
ちなみにログイン、ログアウト時の意図した挙動は以下です。
| 機能 | 詳細 |
|---|---|
| ログイン | 有効期限が3時間のCookieをサーバー側で発行しブラウザに保存する |
| ログアウト | 有効期限が切れたCookieをサーバー側で発行しブラウザに保存する |
| 認証 | リクエストの度にサーバー側でCookieを受け取りその値でアクセスコントロール |
有効期限が切れたCookieは、ブラウザに保存すると同時に消えることでログアウトを実現できます。
今回は消えるはずのCookieがログアウト後も残ってしまっていました。
その時のソースコード
// ログイン時のcookie cookie := http.Cookie{Name: name, Value: token, Expires: time.Now().Add(3 * time.Hour), HttpOnly: true, Secure: true, SameSite: http.SameSiteNoneMode} // ログアウト時のcookie cookie := http.Cookie{Name: name, Value: "", HttpOnly: true, MaxAge: -1}
すっぽり抜けてます。
ただ、この時Cookie初心者だった自分は SameSite属性 == クロスオリジンでCookieやりとりするときはNoneにしないといけないと誤った理解をしてしまっていました。
なのでローカルもAWS環境もクロスオリジンだったのに、なぜAWS環境だけログアウトできないのかこの時点ではまだわかっていません 笑
SameSite属性とSecure属性ってなんぞや
Cookieには発行する際にいくつか属性を付与できます。(以下一部抜粋
| 名前 | 解説 |
|---|---|
| Name | Cookieの名前 |
| Value | Cookieの値 |
| Expires | 有効期限（日） |
| MaxAge | 期限までの秒数 |
| HttpOnly | 付与するとJavaScriptからアクセスできなくなる |
| Secure | 付与すると httpsの通信でのみ送信する |
| SameSite | cross-site（クロスサイト）の通信でもCookie送信します？の 設定 |
解説にも書きましたが、今回取り上げるSecure属性は付与することによりそのCookieはhttps通信でなければ、ブラウザ, サーバ間で送信されなくなります。
SameSite属性は、このあと書きますが設定によってブラウザ, サーバー間のCookie送信をクロスサイトでも行うかの設定ができます。
SameSite属性に設定できる値
| 名前 | 効果 | 詳細 |
|---|---|---|
| Strict | 同一サイトでのみCookie送信 | セキュリティ強 |
| Lax | クロスサイトの場合HTTPメソッドがGETなど特定の条件下でのみCookie送信 | Chromeでは未指定だとこれになる。 セキュリティ中 |
| None | クロスサイト、同一サイト関係なく送信する | Secure属性が必須。セキュリティ弱 |
今回だと、フロント側のURLとサーバー側のURLの関係がクロスサイトかどうかが重要で自分はここを理解してませんでした。そして当初の理解のSameSite属性 == クロスオリジンでCookieやりとりするときはNoneにしないといけない ではなく SameSite属性 == クロスサイトでCookieやりとりするときはNoneにしないといけない と知りました。（そもそも属性の名前が SameSite(同一サイト)になってるやろ!って話ですね）
ちなみにcross-site（クロスサイト）かsame-site（同一サイト）かの定義は以下の通りです。
引用：https://zenn.dev/agektmr/articles/f8dcd345a88c97
トップレベルドメイン+セカンドレベルドメインの組み合わせが違うかどうかのようです。
今回の状況
| 環境 | フロント | バック | 詳細 |
|---|---|---|---|
| ローカル | http://localhost:3000 | http://localhost:8000 | same-site なのでCookie送信できる |
| AWS | https://hogehoge.amplifyapp.com/ | https://fugafuga.com/ | cross-site & SameSite属性が 未指定（Lax） & リクエストメソッドがPOST なのでCookie送信できない |
ローカル環境ではポート番号が違うだけで同一サイトになるため、SameSite属性が未指定（Lax）でも問題なくCookieを送信できる。
AWS環境では、まだ載せたばかりだったこともありドメインも違うのでクロスサイトになり、SameSite属性が 未指定（Lax）のログアウト処理だけうまく動かなかったわけです。
http通信のローカル環境でなぜログインできてたのか
SameSite属性は完全に理解したところですが、もう一つ疑問が。
そう。Secure属性です。Secure属性は付与すると、httpsでしかCookie送信しないはず...
↓もう一度その時のソースコード
// ログイン時のcookie cookie := http.Cookie{Name: name, Value: token, Expires: time.Now().Add(3 * time.Hour), HttpOnly: true, Secure: true, SameSite: http.SameSiteNoneMode} // ローカル環境のhttp通信では送信しないはず... // ログアウト時のcookie cookie := http.Cookie{Name: name, Value: "", HttpOnly: true, MaxAge: -1}
localhost は例外
ブラウザによっては localhost だと httpsの要件が無視されるとのことでした。
※自分はChromeを使ってます
引用：https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Set-Cookie#sect4
開発者のこと考えてってことだよね。ありがてぇ... 笑
まとめ
- ローカル環境では同じlocalhostでsame-siteのため SameSite属性が未指定（Lax）でもCookie送信できた
- cross-siteでCookie 送信する場合は、SameSite属性をNone、Secure属性をtrueにするべし
- Secure属性は localhost だと 無視される（ブラウザによる）
最後に
なんだかんだで今では、AWS環境でフロント側とサーバー側で同じドメインを使い、SameSite属性をStrictにして動かしています。
有名なサーバー攻撃手法のXSSやCSRFの対策として、SameSite属性やHttpOnly属性の設定は必須です!!正しい知識で安全にCookie使っていきましょー!!
