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サイトを作っています

いろいろなツール(Webページ上で提供できるツールに限ります)を公開するサイトを作っています。 Tools on Web https://tools.laboradian.com/ 載せているツールは …

Web

Firefox で DNS-over-HTTPS (DoH) を有効にする方法

Firefox で DNS-over-HTTPS (DoH) を有効にする方法について説明しています。

web development

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する方法を紹介します。

Chrome

Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える

目次1. Chrome のローカルオーバーライド機能とは?2. 使い方1. この機能で使用するローカル側のフォルダーを指定します2. 置き換えるファイルを指定します3. ファイルを編集します3. Ov …

プライバシー

「Web閲覧履歴をもとにした広告配信」についての調査結果

上の記事で興味深いアンケートが行われていました。 「Web閲覧履歴などをもとにカスタマイズされた広告が配信されていると認識している人」がそのような広告に対してどう思っているかについて聞いたところ、以下 …