Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@y_tochukaso

クロスサイトでCookieが設定できない場合に確認すること

やりたかったこと

以下の条件を満たすアプリケーションでCookieを設定したい
- フロントサイト(ブラウザのナビゲーションバー)のURLとバックエンドのURLが異なる
- フロントサイトからはAjaxによるリクエストでサーバーはREST API

発生した現象

Chrome のデベロッパーツールを使用しても特にエラーは出力されないが、なぜかCookieが設定されない。

結論

時間のない方は結論の部分だけ設定してみて下さい。
以下を設定することでクロスサイトでCookieを設定する事ができる

  • フロントアプリケーションの設定
    • XMLHttpRequest.withCredentialstrueを設定する[^1]
  • バックエンドアプリケーションの設定
    • レスポンスヘッダーにaccess-control-allow-credentialstrueを設定する[^2]
    • レスポンスヘッダーにaccess-control-allow-originでフロントアプリケーションのURLを設定する[^3]
      • ['localhost:4000', "*"]の様な値でOK。ワイルドカードのみではいけない
    • Cookieを設定する際にSameSiteポリシーをNoneにする[^5]

XMLHttpRequest.withCredentials[^1]

XMLHttpRequestは別のドメインからのCookieをデフォルトでは受付けていません。
ただし、withCredentialsにtrueを設定している場合、Cookieを受け付けることが出来ます。
また、この設定は同じサイトのリクエストには影響を与えません。
なので、開発環境だけクロスサイトになる様な環境でも特に考慮せずに利用できます。

Mozillaの解説
XMLHttpRequest from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request

access-control-allow-credentials[^2]

リクエストにCredentialsの設定が含まれている場合に、レスポンスをJavaScriptに教えるかどうかを指示するもの

access-control-allow-origin[^3]

指定されたOriginからのリクエストを受け付けることが出来るかを表すもの
ただし、ワイルドカードを指定した場合はCredentialsの設定はサポートされない[^4]

SameSite policy[^5]

  • Lax
    • モダンブラウザーのdefaultのポリシー
    • 以下の何れかの場合にCookieの送信が許可される
      • トップレベルナビゲーション(ブラウザーのナビゲーションバー)と同一の場合
      • GETリクエストの場合
  • Strict
    • トップレベルナビゲーション(ブラウザーのナビゲーションバー)と同一の場合のみ送信される
  • None
    • Cookieは全ての状況で送信される

今回実験している中で分かったこととしては、サブドメインの場合にStrictを設定してもCookieは設定されるし、Cookieの設定も行われる。
また、トップレベルナビゲーションのURLとDomainが異なる場合、Noneのポリシーしか設定できない。
LaxStrictはクロスサイトでは設定できないポリシーとなる。

[^1]https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
[^2]https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials
[^3]https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
[^4]https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
[^5]https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
y_tochukaso
sier ⇒ Web系自社サービス製品開発エンジニア ⇒ sier 技術的に面白いことがやりたいと思って製品開発エンジニアになる。 しかしながら周りのレベルの高さについて行けずsierにドロップアウト。 しばらくの間は悠々自適に開発していたが、一念発起して再度勉強を頑張る。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?