Vue.jsでSPA - [10] Safari..お前か...3rd party cookie #Safari

チェックボックス一つで丸一日ハマった話でも書こうかと思う

第8回、第9回と「ブラウザ周りのややこしいセキュリティ的なチェックを回避しながら、如何に開発を前にすすめるか」をやってきたが、もう一つ抜けていた。それがサードパーティークッキー（ 3rd party cookie ）。ここでけっこうハマって、またもや Yak Shaving 開始。もはやVue.jsとかあまり関係なくなってきているが負けずに進める。

3rd party cookie

3rd party cookieの詳細は以下を読みます。どうやらみんなから嫌われているもののようです

上記の、3つ目からの引用：

サードパーティー Cookie というものがあります。詳しい説明はリンク先「サードパーティ Cookie の歴史と現状」に譲りますが、おおまかに言えば閲覧しているウェブサイトのドメインと送受信する Cookie がファーストパーティ、閲覧中のドメインとは別のところから呼び出される Cookie がサードパーティです。

このサードパティー Cookie はどこからでも利用できるユーザのトラッキング手段としてたいへん強力なため、多数の広告サービスなどで利用されています。多くのブラウザではこうしたトラッキングを拒否する手段として、サードパーティ Cookie のブロック設定が提供されていますが、一方で広告以外でもサードパーティ Cookie に依存したサービスが少なくないため（「いいね！」とか）、デフォルトでブロックするブラウザは少数派です。Google Chrome はもちろんブロックなんてとんでもありませんし、Firefox や Opera もデフォルトでブロックせず、IE はブロック回避のテクニックが確立しています。ここまで前置き。

さて、このような状況のなか、デフォルトでサードパーティ Cookieのセットをブロックする珍しいブラウザが Safari です。

あ... 俺、Safari 使ってたわ....

なにがうまくいかないのか

SafariのDeveloper consoleで見ると、ユーザ認証して持ってきたHTTPクッキー（具体的にはSet-cookie の値）が正しく取得できているのに、Cookie を取得した後の実際のリソースを要求するリクエストヘッダーにその値が含まれない（Safariが捨てているようだ）ため、リクエストに失敗する（ログイン画面に戻される）

ググると、類似の事象で困っている人たちがいるのだが、大抵は以下の対策にヒットする（が、この辺りはすでにやっている）：

fetch を使っているなら、リクエストのオプションにcredentials: include を指定せよ。Cookie取れてからじゃなくて、初回の認証の時からだ
xhr or jQuery なら withCredentials: true だ

また Cookie-set ヘッダの値がどこで抜け落ちるのかを見てやろうと

fetch(login_url, opt).then(function(response) {
  console.log('header:' + response.headers.get('Server')); // 取得できる = Apache 
  console.log('cookie-header:' + response.headers.get('Set-Cookie')); // 取得できない = null 
});

とかやってみるけど、Cookie-set ヘッダだけは null 。ようわからんがCookieヘッダだけはブラウザの console.log でアクセスできなくてつまる（nodeだと同じやり方で取得できるのだが）

解決策

これで解決。またもや Stack overflow 先生

この、Prevent cross-site tracking のチェックを外す。これで3rd party cookieを受け入れるようになる（この画面も過去からバージョンアップでコロコロかわってるので今後は知らん）

Safariで開発するときの設定

SafariはChromeやFirefoxと比べて、オレオレ証明書やCORSのチェックは比較的ゆるいがこれにつられてSafari選ぶときは、3rd party cookieの設定はデフォで全否定なので上記の設定を忘れずに。

しかし、セキィリティ周りはブラウザごとに癖がありすぎだな… Safariもなんかせめて Warning だすとか気ぃつかえんのか？ちょと、第8回からここまでハマった内容を結果だけ見易くまとめたくなってきたが需要あるかな？

次回

クッキーまわり動くようになったので、ログイン画面でもつくるかな

Vue.jsでSPA - [10] Safari..お前か...3rd party cookie

3rd party cookie

なにがうまくいかないのか

解決策

Safariで開発するときの設定

次回

シリーズ