Turbolinksとcookieは相性が悪い

Javascriptでcookieに値を設定する処理を実装していたのですが、タイミングによって同じcookie名で重複してvalueが登録される事案が発生しました。 調査するとどうやらTurbolinksが原因であることがわかりました。

Turbolinksを有効にするとcookieのpathに適切な値が設定されないことがある

/customersというページで以下のようなJavascriptを実行していたとします。

<script type="text/javascript">
  $(function () {
    document.cookie = 'key=value'
  });
</script>

Developerツールで確認するとCookieは以下のように設定されます。

Name:   key
Value:  value
Domain: localhost
Path:   /

その後、/customers/newというページにアクセスした後に、画面内に配置されたリンクから/customersに遷移するとどうなるでしょうか？

先程と同じ結果になるかと思いきや、Cookieの中身は以下のように設定されていました。

Name:   key
Value:  value
Domain: localhost
Path:   /

# 異なるpathでcookieが重複登録されてしまう
Name:   key
Value:  value
Domain: localhost
Path:   /customers/new

これは、Turbolinksによる画面遷移時には、Cookieに設定するpathが前の画面URLのままであることが原因です。 そのため、Turbolinksの有効時はcookieにpathを設定する必要があります。

<script type="text/javascript">
  $(function () {
    document.cookie = 'key=value; path=/'
  });
</script>

このようにすることで異なるpathでcookeが重複登録されてしまうという事態を避けることができます。