自サイトのJSからちょっとしたバグが見つかったので今日はそれを直したという話です。
※ちなみにこのメインビジュアルは Canva で作ってみました。いつもは Screenpresso で作っているんですがたまにはこれもいいですね。

問題のスクリプト

これはウチで使っているとあるJavaScriptの関数です。クッキーに新しいキーと値を追加するだけのシンプルなものです。
入力値チェックはしてませんがいったん無視してください。

function setCookie(name, value, expirationDays) {
    const current = new Date();
    const expire = new Date(current.getTime() + expirationDays * 24 * 3600 * 1000);
    document.cookie = `${name}=${value}; expires=${expire.toUTCString()};`;
}

path 属性の基本

Cookie の path 属性は、クライアントが Cookie を送信する対象を指定するものです。
HTTP Cookie の使用 - HTTP | MDN

Path 属性は、 Cookie ヘッダーを送信するためにリクエストされた URL の中に含む必要がある URL のパスを示します。

この属性の設定値によっては意図しない URL に Cookie が適用されたり、あるいはその逆に動いて欲しいところで動いてくれなかったりするわけですね。

デフォルトの path による予期せぬ挙動

今回、ウチのサイトでおきたパターンです。
例えば、/about/ ページにて setCookie() を実行したとします。

デフォルトでは、path 属性が指定されない場合、Cookie をセットしたページのパスがそのまま path 属性として適用されます。 その結果、この Cookie は /about/ 以下のパスにのみ適用されます。

この挙動を知らなかったので自分はサイト全体を対象としてほしいのにも関わらず、document.cookie へ値をセットしたページ以下でのみ動く不完全な状態となっていました。

path 属性を明示的に指定する

この場合の解決方法は至って簡単です。Cookie の path 属性を / で固定してあげればOKです。

function setCookie(name, value, expirationDays) {
    const current = new Date();
    const expire = new Date(current.getTime() + expirationDays * 24 * 3600 * 1000);
-   document.cookie = `${name}=${value}; expires=${expire.toUTCString()};`;
+   document.cookie = `${name}=${value}; expires=${expire.toUTCString()}; path=/`;
}

まとめ

cookieのpath属性はなるべく明示的に設定しましょう。

デフォルトの挙動を理解した上であえてそのまま使う分には問題ないと思いますが、そうでない場合は思わぬ罠にかかります。(自分のように)

というわけで久しぶりの技術系記事でした。

さよなら