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

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

関連記事

no image

Webサイトのスタイルガイド作成

参考 Webデザインのスタイルガイドの作り方 | UX MILK

Chrome

誤って Chrome を閉じた後で、さっきまで開いていたページを開く

誤って Chrome を閉じた後で、さっき開いていたページを開く方法を紹介します。

Web

JSFiddle を使って HTML/CSS/JavaScript をウェブページに埋め込む

JSFiddle というサービスを使って、ウェブページに HTML/CSS/JavaScript を埋め込んでみましょう。 目次1. JSFiddle とは?2. ウェブページに埋め込む手順(1) ア …

Web

画面上に日付のないWebページの日付を調べる

画面上に日付のないのWebページの日付を調べる。

ただ今、本ウェブサイトを改造しています

現在、このウェブサイトを改造しています。 今回、WordPress の「Attitude」というテーマを使ってみたのですが、評判が良いだけあって使いやすいです。デザインがすっきりしていてシンプルなのも …