Web

ブロックされた Cookie を確認する方法 (Chrome の場合)

投稿日:

1. はじめに

Chrome 79 以降で、ブロックされたクッキーを確認する方法について説明します。

2. ブロックされたクッキーを確認する手順

(1) 右上のメニューから [その他のツール] – [デベロッパーツール] を開きます。

デベロッパーツールを開きます
デベロッパーツールを開きます

(2) [Network]パネルをクリックして表示します。

[Network]パネルを使います
[Network]パネルを使います

(3) この時点で、目的のWebページにアクセスします。

(4) [Network]パネルには、ブラウザがアクセスした各リソースが表示されます。

:表示する情報を「ファイルの種類」でフィルタリングすることができます。ここでは All にしていますが、Doc などでもよいでしょう。

:左パネル内からリソースを選びますが、通常は今アクセスしたページそのもの(画像ファイルやCSSファイルではなく)を指すリソースを選択します。

:[Cookies] タブを表示します。

:[show filtered out request cookies] にチェックを入れます。これにより、ブロックされたクッキーも表示されるようになります。

:クッキーが表示されますが、ブロックされたクッキーは背景が黄色になっています。

クッキーに関する情報が表示されます
クッキーに関する情報が表示されます

(5) ℹ アイコンにカーソルを合わせると、ブロックされた理由がポップアウト表示されます。

ブロックされた理由その1
ブロックされた理由その1

見にくいので、エラーの内容を以下に書いておきます。

This cookie’s domain is not configured to match the request url’s domain, even though they share a common TLD+1 (TLS+1 of foo.bar.exampl.com is example.com).

サブドメインが異なるのが原因でブロックされたようです。

もう1つ載せます。

ブロックされた理由その2
ブロックされた理由その2
This cookie’s path was not within the request url’s path.

リクエストのURLパスの中に、このクッキーにセットされたパスが含まれていないのが原因でブロックされたようです。

3. SameSite での問題を伴ったリソースのみ表示する(?)

気付いた人がいたかもしれませんが、フィルタリングの部分には [Only show requests with SameSite issues] というチェックボックスがあります (Chrome 80 から?)。

Only show requests with SameSite issues
[Only show requests with SameSite issues]

ここにチェックを入れると、名前の通り「SameSiteクッキーに関する問題を伴ったリクエストのみ表示する」という動作になるのだと思われますが、いまいちこの機能に関する詳細が分かっていません。

少し試してみたところ、以下の2つの条件を満たすクッキーを伴ったリクエストのみ表示されるようでした。

  1. SameSite属性に明示的に値がセットされている
  2. ブロックされた

4. おわりに

Chrome 80 から、SameSite属性がセットされていないクッキーは「SameSite属性として Lax という値がセットされている」という扱いになりました。これにより、クロスサイトからのクッキーは(基本的には)送信されなくなり、安全性の面での向上が見込まれます。……といった仕様変更があったために、最近 Chrome DevTools (デベロッパーツール) において、クッキーに関する部分の変更が相次いでいるものと思われます。

5. 参考

Web

HTTP クッキーをより安全にする SameSite 属性について (Same-site Cookies)

2018.12.04

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

web development

HTTPレスポンスヘッダ COEP, COOP, CORP, CORS についてのメモ

HTTP Response Header である COEP, COOP, CORP, CORS についてのメモです。

WordPress

「Build a Custom WordPress User Flow」を試してみました

目次1. はじめにソースコード2. 全体3. Part 1: Replace the Login Page使用している関数アクションフィルタ4. Part 2: New User Registrati …

Web

Mastodon(OStatus) を参考にして、理想の標準情報発信プラットフォームを考えてみました

話題の Mastodon を参考にして、私の理想とする情報発信プラットフォームについて考えてみました。 Mastodonとは? 見た目は、Twitterとほとんど同じサービスです。しかし、Twitte …

HTML

HTMLの雛形 (CSS, JavaScriptも)

HTMLの雛形 (CSS, JavaScriptも) を載せています。コピーして使えます。

Chrome

Chrome の「ピクチャー イン ピクチャー」機能を使って、YouTube の動画を最前面で再生する

目次1. Chrome の「ピクチャー イン ピクチャー」機能2. ピクチャー イン ピクチャーを行う方法3. プレイヤーの操作など3. おわりに 1. Chrome の「ピクチャー イン ピクチャー …