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

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

関連記事

Chrome

Chrome で複数のユーザーを使い分ける方法

目次1. Chrome のユーザー(プロフィール)について2. ユーザー(プロフィールお)毎に管理できるもの3. ユーザーのデータ(プロフィール)がある場所4. ユーザーの管理ユーザー管理ユーザー名と …

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …

Web Components

Web Components でスタイルシートを再利用する

Constructable Stylesheet Objects の使い方を説明します。

Google

Google マップの地図をウェブページに埋め込む手順

Google マップの地図を、ウェブページに埋め込む手順について説明します。 手順自体は簡単なのですが、Google マップの仕様が時々変わり、操作手順もその影響を受けることがあるため、現時点(201 …

DokuWiki

DokuWiki Wrapプラグインの使い方

DokuWiki を使う上で、外せない Wrapプラグイン の使い方について書きます。 目次1. DokuWiki の Wrapプラグインとは?2. 基本的な使い方<div> タグと&lt …