ドメインを跨ぐJavaScriptでのCookie設定にはpathの指定をお忘れなく

結論

JavaScriptを使ってフロントエンドからCookieを設定する場合には、pathの指定が必須である。
そうしないと、ブラウザによって動作がまちまちになってしまう。

概要

ドメインを跨いでCookieを設定する要件で開発を行っていた。
login.example.com でCookieでフラグを設定して、 pay.example.com で設定したCookieを読み出したいという仕様。

*.example.com ドメイン以下でCookieを呼べるようにしたいので、
下記URLで、jquery-cookie を使ってCookieを設定。

login.example.com/member/sign_up.php

<script>
    function setLpFlagCookie() {
        $.cookie('newUserFlag', 1, {domain:"example.com"});
    }
</script>

症状

pay.example.com にアクセスした際に、
FirefoxではCookieが送信されるが、ChromeではCookieが読み出されない。

Firefoxのブラウザ開発者ツールを見るとCookieが設定されているが、ChromeではCookieは無いものとして扱われる。

原因

Pathの指定をしていないので、Chromeでは member/ がPathとして設定されてしまう。
言い換えれば、*.example.com/member/*でのみCookieが有効と設定される。

Pathを指定しない場合はデフォルトで/ が設定されるだろうと思っていた。

解決策

Cookieを設定しているところで、Pathに"/"を指定することでルートディレクトリ以下を指定する。

<script>
    function setLpFlagCookie() {
        // pathの指定を追加！
        $.cookie('newUserFlag', 1, {domain:"example.com", path: '/'});
    }
</script>

参考

ブラウザごとの挙動については、ここのブログによくまとまっている。
https://please-sleep.cou929.nu/cookie-path-behavior-difference-of-browsers.html