【Chrome】”A cookie associated with …”の警告の内容と対処法について【開発者ツール】

こんにちは、katori@xxbicottです。
最近サイト制作をしていて、”A cookie associated with …“から始まる警告がChromeのデベロッパーツール(開発者ツール)に表示されていることに気づきました。

警告文だからそこまで気にしなくていいだろうと思いつつ、多い時で30個以上同じメッセージの警告が表示されるとやはり気になる…(´・ω・`)

テスト環境・本番環境問わず表示されるので、聞かれた時説明できるようにするべく警告の内容とその対処法を調べてみました。

先に結論を言うと、現在閲覧中のサイトはほぼ関係ありません
ブラウザに保存されているクッキーに関する警告であって、対処が必要になるのはクッキーを発行しているサービス側(例えばGoogleだったりFacebookだったり)の方です。

詳細をまとめてみたので、ご参考になれば幸いです!

(2020/3/30)最新情報を記事末尾に追記しました!

警告文について

今回の事象で表示される”A cookie associated with a 〜“から始まる警告文は2種類あって、それぞれ次のようなメッセージです。

A cookie associated with a resource at <URL> was set with ‘SameSite=None’ but without ‘Secure’. A future release of Chrome will only deliver cookies marked ‘SameSite=None’ if they are also marked ‘Secure’. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL>.

Google翻訳)
<URL>のリソースに関連付けられたCookieは、 ‘SameSite = None’で設定されていますが、’Secure’が設定されていません。 Chromeの今後のリリースでは、「SameSite = None」とマークされたCookieも「Secure」とマークされている場合にのみ配信します。 開発者ツールのCookieを[アプリケーション]> [ストレージ]> [Cookies]で確認し、詳細を<URL>で確認できます。

A cookie associated with a cross-site resource at <URL> was set without the ‘SameSite’ attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with ‘SameSite=None’ and ‘Secure’. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.≈

Google翻訳)
<URL>のクロスサイトリソースに関連付けられたCookieが、 ‘SameSite’属性なしで設定されました。 Chromeの今後のリリースでは、「SameSite = None」と「Secure」が設定されている場合にのみ、クロスサイトリクエストでCookieを配信します。 デベロッパーツールの[アプリケーション]> [ストレージ]> [Cookies]でCookieを確認し、https://www.chromestatus.com/feature/5088147346030592およびhttps://www.chromestatus.com/feature/5633521622188032.≈で詳細を確認できます。

この警告文でたくさん出てくる「cookie」(クッキー)とは、Webサイトやサービスから個人個人のブラウザへ発行される会員証のようなもの。

cookieが保存されることによって、一度ログインしたサービスではブラウザを一度閉じてもログイン状態が保持されたり、カートの中身がずっと入ったままになったりと、ユーザーがより便利に使えるよう、色々なところでcookieは使われています。

今回の警告文はcookieに関するもので、今後行われるクッキーに関するchromeのアップデートに関連した警告になっているようです。

cookieに関するアップデートとその影響

どちらの警告にも含まれている2URLはChromeの公式ページで、アップデートの内容を説明するものです。

見てみたんですがピンとこなかったので、調べて自分用に要点をまとめてみました。

今後chrome80のアップデートの概要(※前述2URLに記載の分のみ)

chrome80は2020年1月リリース予定のもの。

  1. SameSite 属性が指定されていない場合、デフォルトでcookieを「SameSite = Lax」として扱うようになる
  2. SameSite = Noneが指定されてる場合、secure属性がないcookieは使えなくなる

SameSite属性はクロスオリジンへのリクエスト送信時にcookieを付与するかどうかを指定できるもの。
値はStrict、Lax、Noneの3種類があって、Strict>Lax>Noneの順でcookieの送信条件が厳しくなりセキュアになります。
(Strictは他ドメインのサイトに一切cookieを送らないので、例えばとあるサイトでログイン中だったとしても、他サイト上から移動してきた場合未ログイン状態になる)

今回のアップデートでは、使用できるcookieの条件を厳しくすることでcookieの露出を抑え個人情報を盗られにくくする、という訳のようです。

ということで、一般のユーザーにとっては有難いだけのアップデートですが、cookieを使っているサイト・サービス側では、

  • SameSite属性が指定されていないcookie
  • SameSite属性にNoneが指定されている、かつsecure属性が付いてないcookie

などではトラッキングが出来なくなったりするので対応が必要になります。

今回の警告文はその対応を促すもので、おそらくですがアップデートの影響を受けそうなクッキーがブラウザに保存されていると、そのクッキーごとに表示されるようです。
人によってはかなりの数の警告が出るし、シークレットモード(クッキーが残らない)で見ると警告が少なめなことが分かります。


35個あった警告がシークレットモードだと7個だったり


開発者ツール>アプリケーション>[ストレージ]cookiesで今ブラウザに保存されているクッキーの一覧が見れる

警告文を消すには

これまでに書いた通り、この警告は今閲覧しているサイトの問題ではないため、サイト制作の時に自サイトと関係ないURLで警告が出ていても気にする必要はありません。

それでも自分に関係ないなら警告も非表示にしたい!という場合はクライアント側のブラウザ設定で非表示にすることができます。

  1. chrome アドレスバーにchrome://flags/と入力、実行
  2. Cookie deprecation messages」(cookie非推奨メッセージ)で検索
  3. 同名の項目を「Disable」に設定
  4. その後「Relaunch Now」をクリックして再起動

そうすると警告が表示されなくなります。

もし、cookieを使っているサービス・サイトの開発者で自サイトのURLが警告に上がっている場合は、

  1. SameSite 属性が指定されていない場合、デフォルトでcookieを「SameSite = Lax」として扱うようになる
  2. SameSite = Noneが指定されてる場合、secure属性がないcookieは使えなくなる

この二点を考慮した上でクッキーの設定の修正を行いましょう。
phpの場合はこちらのサイトが非常に分かりやすかったので、自分が作業する際は参考にしようと思っています。

さいごに

自己解釈ですがおそらくこういうことのはず。。
cookieをいじった経験が少ないので、もし理解が誤っているところがあったらフォームかtwitterで教えていただけたら嬉しいです!

当初は制作中のサイト側に問題があるのでは!?と少し不安に思っていたんですが、自分の作業範囲にどれだけ関わりがある者なのかが把握できて調べてよかったし、勉強になりました。
今後もどんどんセキュアなアップデートが行われるだろうので、知識的なアップデートも頑張りたいと思います。

(2020/3/30追記)chrome80安定板がリリースされました

上を書いた時から特に目立った仕様の変更はなく、2月から本格的に展開が始まったようです。

しかし今も変わらず大量の警告文が出ている…しかもGoogle関連のものがたくさんある…(´Д`;)?
結局ユーザー側には関係ないんですが、ちょっと疑問に思い調べたので追記します。

最近表示される警告文はこんな感じ。

A cookie associated with a cross-site resource at <URL> was set without the ‘SameSite’ attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with ‘SameSite=None’ and ‘Secure’. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.

Google翻訳)
<URL>のクロスサイトリソースに関連付けられたCookieが、 ‘SameSite’属性なしで設定されました。 Chromeは、 ‘SameSite = None’および’ Secure’が設定されている場合にのみ、クロスサイトリクエストでCookieを配信するようになったため、ブロックされました。 デベロッパーツールの[アプリケーション]> [ストレージ]> [Cookie]でCookieを確認し、<URL>および<URL>で詳細を確認できます。

警告文はちょっとだけ文章が変わってるけど内容は同じ

Google公式ブログの方には、現在警告文が表示されるケースは下記があると記載されていました。

  1. 必要な設定が行われていないクロスサイトCookieがページに含まれている場合
  2. 新しいcookieを用意していて対応済みだが、互換性を踏まえ従来のcookieを残している場合

前者は純粋にNoneでまだsecure対応していない、もしくはSameSite属性なし・値未設定でLaxでも問題ないから放置しているものかと思います。
※ SameSite属性なし・値未設定に関しては、同一サイトCookieを管理している場合でも、すべてのブラウザがデフォルトで同一サイトCookieを保護するとは限らないため、適切なSameSite値を設定することが推奨されています。

後者に関しては、Googleも一部のサービスでこの方法をとっているとのこと。
そのため警告は上がるけど、サービスは意図した通りに動作するので問題ない警告文ということになります。

3/9時点ではまだ順次適用中とのことなので、もうしばらくこの警告文と付き合っていくことになりそうですね。
今回の参考URLも下記末尾に追記しました。

参考URL

2020/3/30追記分