Edited at

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

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

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


3rd party cookie

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


  1. 参考メモ/ファーストパーティCookie, サードパーティCookie の参考URL

  2. 3rd party Cookie いただきます

  3. Google、Safari のプライバシー機能を迂回して Cookie をセット、トラッキングに利用

  4. サードパーティCookieの歴史と現状 Part1 前提知識の共有

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


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

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

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


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


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

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

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



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


  2. 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 先生

image.png

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


Safariで開発するときの設定

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

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


次回

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


シリーズ