続・SameSite指定されたCookieはCORS fetch時にどう働くか

開発 tips

まとめ

A request is "same-site" if its target's URI's origin's registrable domain is an exact match for the request's client's "site for cookies", or if the request has no client.

  • 例えば
    • www.example.com から api.example.com を fetch → 「Registrable Domain」が合致するので「Same-Site」
    • www.foobar.com から api.example.com を fetch → 「Registrable Domain」が違うので「Cross-Site」
  • CORS fetch リクエストに Cookie が付くかどうか
SameSite判定 Set-Cookie時のSameSiteの指定 リクエストにCookieが…
Same-Site none ○付く
Same-Site lax ○付く
Same-Site strict ○付く
Cross-Site none ○付く
Cross-Site lax ×付かない
Cross-Site strict ×付かない
  • ここでの「Same-Site」「Cross-Site」はあくまでも Cookie に対しての話なので、 CORSリクエストのそれとは分けて考えること。
  • サブドメインが違うだけの CORS fetch では SameSite=lax/strict 指定の Cookie もリクエストに付加されるので、そういう構成がとれる場合は API の認証に SameSite=lax/strict な Cookie が使える。
    • ただしブラウザ設定でサードパーティーCookieをブロックするようになっている場合はSet-Cookieがブロックされてしまうので使えない。

経緯とか

昨日すっとぼけたことを書いていたトピック の続きとして、よく見かけるサイトURLが www.example.com、 API用URLが api.example.com のようなサブドメインが違うだけという構成を試してみたところ、Set-Cookie に domain=example.com 指定もしていないのに APIサーバに Cookie が送られてる……という謎に遭遇して調べ回った結果が↑のまとめの通り。


確認するには、ブラウザアクセス用のドメインとして www.example.com を hosts に追加（テストが済んだら削除すること）。

 127.0.0.1       apitest.example.com
+127.0.0.1       www.example.com

この状態で、ブラウザで http://www.example.com:5500/ を開くと、 http://www.example.com:5500/ のサイトから http://apitest.example.com:3000/ に CORS fetch リクエストをすることになるので、SameSite のセレクトボックスから strict や lax を選んで Cookie を SET すると、 GET, POST には Cookie が付かないはず……が、 msg = undefined にはならず、入力したテキストが表示される。
デベロッパーツールで確認してもちゃんとリクエストには Cookie が付いている。


「もしかしてサブドメインが無視されてる？」と考え、 hosts にちょっと違うドメインを追加。

 127.0.0.1       apitest.example.com
 127.0.0.1       www.example.com
+127.0.0.1       www.example2.com

その上で http://www.example2.com:5500/ から strict / lax で Cookie SET すると、その後の GET/POST には Cookie は付かず。
ブラウザのバグという線は限りなく低いので調べていった結果、上記のサイトに出会った次第。