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

Webページ中の特定の文字列をURLで指定する(Text Fragments)

Webページ中の特定の文字列をURLで指定する Text Fragments について説明します。

SQLite

PHP から SQLite を使う手順

PHP から SQLite を使う手順について説明します。

Web Vitals

highlight.js のハイライト処理を Web Workers で実行する

highlight.js のハイライト処理を Web Workers で実行する方法を紹介します。

Chrome

ブックマークレットで画面上の色を取得する(Eye Dropper APIを利用)

画面上の色を取得するブックマークレットを紹介します。

MathJax を試してみました。

MathJax は、HTML上で数式を美しく表示するための JavaScriptライブラリです。 基本的な使い方は、 HTMLファイルに以下を記述して MathJax.js を読み込みます。HTMLフ …