Secure属性とHTTPSの関係
Secure属性が付いたCookieは、HTTPS接続でのみ送受信されます。HTTPのページでSecure付きCookieをセットしようとしても保存されません。ローカルでhttpの簡易サーバーやfile://で開いて試していると、ここで引っかかることがあります。
逆に、SameSite=Noneを使う場合はSecure属性が必須です。Secureなしでこの組み合わせを指定するとブラウザに拒否されます。クロスサイトでCookieを使いたいケースでよく踏む落とし穴です。まずは配信環境がHTTPSかどうかを確認するのが出発点になります。
SameSite属性で送信条件が変わる
SameSite属性は、別サイトからのリクエストにCookieを付けるかどうかを制御します。Strictは同一サイト内のみ、Laxは一部のトップレベル遷移で送信、Noneはクロスサイトでも送信(ただしSecure必須)です。多くのブラウザは未指定時にLax相当として扱います。
iframeに埋め込んだページや、別ドメインのAPIへリクエストする構成では、SameSiteの既定値のせいでCookieが送られず、ログイン状態が維持されないことがあります。クロスサイトでの送信が必要なら、None+Secureを明示する必要があります。「保存はされているのに送信されない」ケースは、ほぼこの属性が原因です。
- Strict: 同一サイトのリクエストにのみ送信される
- Lax: 同一サイト+一部のトップレベル遷移で送信(多くのブラウザの既定)
- None: クロスサイトでも送信されるが、Secure属性が必須
- iframeや別ドメインAPIではSameSiteの条件に注意
症状別チェック表
クッキーが保存されないときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
有効期限とドメイン・パスの指定
有効期限(ExpiresまたはMax-Age)を指定しないCookieはセッションCookieになり、ブラウザを閉じると消えます。保存が継続しないと感じる場合、期限が設定されていないことを疑ってください。長く保持したいなら明示的に期限を設定します。
DomainやPathの指定がリクエスト先と食い違っていても、Cookieは送信されません。サブドメインをまたぐ構成や、特定のパス以下でだけ使う設計では、これらの指定が意図どおりかを確認します。属性の組み合わせが少しでもずれると保存・送信されないため、一つずつ照合するのが確実です。
Cookieが保存されない原因の切り分け手順
属性が多く原因が読みにくいので、外形的な条件から順に確認していきます。次の手順をたどってください。
- ページがHTTPSで配信されているか確認する(Secure属性に必要)
- 開発者ツールのApplication/StorageでCookieが実際に入っているか見る
- NetworkタブでSet-Cookieヘッダが返っているか、警告が出ていないか確認する
- SameSiteの値がアクセス文脈(同一/クロスサイト)に合っているか見直す
- Expires/Max-Ageを指定し、セッション切れになっていないか確認する
- Domain/Pathがリクエスト先と一致しているか照合する
HTTPS環境で動作を確認する
Cookieの挙動はHTTPSかどうか、ドメインが何かに強く依存します。ローカルのhttp環境だけで判断すると、Secure属性やSameSiteの影響を見落としがちです。実際のHTTPSドメイン上で確認するのが確実です。
ギガサイト便にHTMLやZIPをドロップすると 〇〇.giga-site.com のサブドメインで自動的にHTTPS配信され、Secure属性を含むCookieの挙動を実環境に近い形で試せます。同じURLのまま中身を差し替えられるので、属性を直して再確認するのも手早く行えます。確認・レビュー用途の一時共有に適しています。
よくある質問
Cookieをセットしたのに保存されません。
Secure属性が付いている場合、HTTPS接続でないと保存されません。ローカルのhttpやfile://で試しているとここで失敗します。まず配信がHTTPSか確認し、開発者ツールのCookie一覧やNetworkタブのSet-Cookieヘッダで実際の挙動を見てください。
保存はされているのに別ドメインのAPIに送信されません。
SameSite属性が原因のことが多いです。クロスサイトで送信するにはSameSite=Noneを指定し、あわせてSecure属性を付ける必要があります。iframeや別ドメイン構成では既定のLaxだと送られない点に注意してください。
ブラウザを閉じるとCookieが消えます。
ExpiresやMax-Ageを指定していないとセッションCookieになり、ブラウザ終了時に削除されます。継続して保持したい場合は明示的に有効期限を設定してください。
ローカルでは動くのに配信先でCookieが効きません。
Secure属性やSameSiteの挙動はHTTPSやドメインに依存するため、http環境とは結果が変わります。実際のHTTPSドメインで確認するのが確実です。ギガサイト便なら自動HTTPSのサブドメインで配信され、実環境に近い形で確認できます。
原因が分からないときはどこから確認すべきですか?
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。