1. はじめに
Chrome 79 以降で、ブロックされたクッキーを確認する方法について説明します。
2. ブロックされたクッキーを確認する手順
(1) 右上のメニューから [その他のツール] – [デベロッパーツール] を開きます。
(2) [Network]パネルをクリックして表示します。
(3) この時点で、目的のWebページにアクセスします。
(4) [Network]パネルには、ブラウザがアクセスした各リソースが表示されます。
:表示する情報を「ファイルの種類」でフィルタリングすることができます。ここでは All にしていますが、Doc などでもよいでしょう。
:左パネル内からリソースを選びますが、通常は今アクセスしたページそのもの(画像ファイルやCSSファイルではなく)を指すリソースを選択します。
:[Cookies] タブを表示します。
:[show filtered out request cookies] にチェックを入れます。これにより、ブロックされたクッキーも表示されるようになります。
:クッキーが表示されますが、ブロックされたクッキーは背景が黄色になっています。
(5) ℹ アイコンにカーソルを合わせると、ブロックされた理由がポップアウト表示されます。
見にくいので、エラーの内容を以下に書いておきます。
サブドメインが異なるのが原因でブロックされたようです。
もう1つ載せます。
リクエストのURLパスの中に、このクッキーにセットされたパスが含まれていないのが原因でブロックされたようです。
3. SameSite での問題を伴ったリソースのみ表示する(?)
気付いた人がいたかもしれませんが、フィルタリングの部分には [Only show requests with SameSite issues] というチェックボックスがあります (Chrome 80 から?)。
ここにチェックを入れると、名前の通り「SameSiteクッキーに関する問題を伴ったリクエストのみ表示する」という動作になるのだと思われますが、いまいちこの機能に関する詳細が分かっていません。
少し試してみたところ、以下の2つの条件を満たすクッキーを伴ったリクエストのみ表示されるようでした。
- SameSite属性に明示的に値がセットされている
- ブロックされた
4. おわりに
Chrome 80 から、SameSite属性がセットされていないクッキーは「SameSite属性として Lax という値がセットされている」という扱いになりました。これにより、クロスサイトからのクッキーは(基本的には)送信されなくなり、安全性の面での向上が見込まれます。……といった仕様変更があったために、最近 Chrome DevTools (デベロッパーツール) において、クッキーに関する部分の変更が相次いでいるものと思われます。