黄色のCookieのコンソールエラー

Chromeデベロッパーツールの「Console」で出てくる黄色のエラー(警告)に対処したのでメモします。

Cookieのエラー

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.

<URL>にはyahooのURL(http://yahoo.co.jp/)やGoogleのURL(https://www.google.com/、http://.google.com/、http://.google.co.jp/)など、https/http違いのURLが入っていました。

このエラー、いろいろなサイトで見られます。しかも多いと何十個とまとめて出ています。
目を瞑りたいではありますが、調べてみるといろいろ出てきました。

まさに翻訳されている記事。詳しい!ありがとうございます。

Chrome で SameSite=None に関する Cookieについての警告が表示される | ラボラジアン

【ポイントだけ翻訳】
http://example.com/ に存在するクロスサイトなリソースに関連付けられたクッキーは、SameSite 属性がついていません。今後の Chrome のリリースでは、クロスサイトなリクエストに付属させるクッキーは、SameSite=None と Secure 属性がついている場合のみ送信します。

http://example.com/ は前述の<URL>にあたります。

「yahooやGoogleのURLに存在するクロスサイトなリソース」というのは、どういうことなのでしょうか?

...結局答えが見つけられず。
おそらく知らず知らずのうちにyahooやGoogleへリクエストを送っていて、その際のCookieにSameSite=NoneとSecure属性が付いていないですよ、という警告なんだろうと思います。

Cookieについて図にまとめる

忘れそうなので調べたことを図にしてみました。

f:id:yokoyoko_115:20200712001704j:plain f:id:yokoyoko_115:20200712001721j:plain

※間違っている部分を発見したら修正します!

SameSite とは

SameSite 属性の目的は、
今開いているページのドメインから、別のドメインにリクエストを送る際に、クッキーをセットするかどうか
を制御することです。

HTTP クッキーをより安全にする SameSite 属性について (Same-site Cookies) | ラボラジアン

上の図では、あるページ内に別サイトの広告の表示をリクエストしている例ですが、サイトAからサイトBへページ遷移する際も、現在のドメインとは別のドメインへリクエストを送ることになります。

Secure属性とは

SSLというURLがHTTPSという暗号化された通信下でのみ読み取れるCookieの指定となります。

いまさら聞けないSameSite CookieとGoogle Chrome 80 | ecbeing

また、Cookieを発行するときに "secure" と指定されたクッキーのことをセキュアクッキーといいます。

ドメインでもCookieを送れるようにしますが、せめてSSL通信にしてください、というのが今回の警告です。

エラーの対処方法

そしてサイト運営側としてはどう対処すればいいのかというと、

自サイトに埋め込んだウィジェットや広告などから外部のドメインに送られるクッキーに関しては、こちらでコントロールできるものではないので何もすることはない。

最初に外部のサーバーからセットされたCookie(これがサードパーティCookie?)に対してはクライアントからは何もできない、SameSite=Noneの指定はできません、ということでしょうか。

ひとまずエラーに対しては一件落着です(具体的な対処は何もやっていない)。

余談

Cookieについて調べていたらあれこれ気になったのでメモします。

SameSite=NoneとSecure属性の警告は、CSRF対策のため?

クロスサイトリクエストフォージェリCSRF
ユーザーのCookieを利用して、あたかもユーザーが行ったかのような個人情報の設定などの処理をさせてしまう攻撃です。
攻撃者は罠を仕込んだ画像をユーザーに読み込ませたり、POSTでデータを送信させて攻撃します。 「forgery:偽造」という意味です。
リクエストの偽造ですね。

SameSite=NoneとSecureと規定すれば、HTTP通信の怪しい画像などの読み込み時のCookieの送信は防げる、ということでしょうか。

POST送信におけるCSRF対策について

Chrome 80が密かに呼び寄せる地獄 ~ SameSite属性のデフォルト変更を調べてみた - Qiita

SameSiteの設定値によって対策効果が変わってきます。
急に難しく感じました。

また、世間はプライバシーの侵害にもあたるサードパーティCookieを廃止しようという流れらしいです。

GoogleのChromeがサードパーティCookieを廃止。Webサイトへの影響は? | Webmedia

Cookieの確認方法

PCのChromeでは、アドレスバーにchrome://settings/siteData?search=Cookie と入れてアクセスすると「すべての Cookie とサイトデータ」という、ブラウザに保存されているCookieがサイトごとに確認できます。

結構な数があります。「ad」と付いているものは広告っぽいです。
そして結構どこにでも「_ga」と、AnalyticsのCookieがセットされています。

さらに!Chromeデベロッパーツールの Application > Storage > Cookies では、のページでセットされたCookieの一覧が送信先別で見れます(よく見たらアイコンがチョコチップのクッキーみたいですね)。
Secure指定があるかどうかも確認できます。

Google AnalyticsはファーストパーティCookieを利用している

どういうこと??と思いましたが、ga.js やgif画像をうまいことやり取りしているようです。

コラム - GoogleAnalyticsのCookieは、なぜサードパーティCookieではなく、ファーストパーティCookieなのか? | Nexal

AnalyticsはGoogleのサービスなので、どうなっても使えなくなることはなさそうですね。

最後に

Cookieをセットする方法まで調べたかったですが、来たる時が来るまでとっておきます。

本当はもう一つの黄色いエラーについても書こうと思っていました。
クッキーがここまで膨らむとは!