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

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

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

## 3rd party cookie

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

1. [参考メモ/ファーストパーティCookie, サードパーティCookie の参考URL](https://qiita.com/msakamoto_sf/items/60f19939a35d1d6ab2bc)
2. [3rd party Cookie いただきます](http://www.techscore.com/blog/2016/06/24/3rd-party-cookie/)
3. [Google、Safari のプライバシー機能を迂回して Cookie をセット、トラッキングに利用](https://japanese.engadget.com/2012/02/17/google-cookie-safari/)
4. [サードパーティCookieの歴史と現状 Part1 前提知識の共有](http://d.hatena.ne.jp/mala/20111125/1322210819)



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

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

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

> さて、このような状況のなか、デフォルトでサードパーティ Cookieのセットをブロックする珍しいブラウザが [Safari](https://japanese.engadget.com/tag/Safari/) です。

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



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

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



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

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



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

```js
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だと同じやり方で取得できるのだが）



## 解決策

[これ](https://superuser.com/questions/1292504/how-to-allow-third-party-cookies-in-safari-11-0-3-13604-5-6) で解決。またもや Stack overflow 先生

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32540/7bf21173-c1fd-b092-fceb-3db729d24527.png)

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



## Safariで開発するときの設定

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

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



## 次回

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

## シリーズ

- [Vue.jsでSPA - [1] Element UIでベースの画面をつくる](https://qiita.com/narutaro/items/50d0e4714f93279502c9)
- [Vue.jsでSPA - [2] Element UIで各ペインの画面をつくる](https://qiita.com/narutaro/items/9abbf7881f692c985484)
- [Vue.jsでSPA - [3] vue-routerでルーティング ](https://qiita.com/narutaro/items/74178f4ea031b0ccfa44)
- [Vue.jsでSPA - [4] コンポーネントにしてみる ](https://qiita.com/narutaro/items/df793bb34129d113d9f2)
- [Vue.jsでSPA - [5] リアクティブになってる？](https://qiita.com/narutaro/items/bed4eab6e53e3b46c0b2)
- [Vue.jsでSPA - [6] サーバからのデータ取得](https://qiita.com/narutaro/items/82f4d9635c398524431c)
- [Vue.jsでSPA - [7] Vueからサーバデータ取得](https://qiita.com/narutaro/items/91da194788318c226e0e)
- [Vue.jsでSPA - [8] バックエンドとうまくやっていこうとして試したこと](https://qiita.com/narutaro/items/3b7135eed8f6e930a0e6)
- [Vue.jsでSPA - [9] 今更ながらCORSとそのエラーの回避方法](https://qiita.com/narutaro/items/26e4cbec386bc054bbd7)
- [Vue.jsでSPA - [10] Safari..お前か...3rd party cookie](https://qiita.com/narutaro/items/e53f653d73a6934046d0)
- [Vue.jsでSPA - [11] Element UIでログイン画面](https://qiita.com/narutaro/items/010009c0198371fee658)
- [Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移](https://qiita.com/narutaro/items/fca953b3b2ed5c63360c)
- [Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす](https://qiita.com/narutaro/items/bdc0e25c22369466bed3)
- [Vue.jsでSPA - [14] Vue.jsとOnsenUIを使ったオレオレなショッピングカートチュートリアル](https://qiita.com/narutaro/items/9502b90b565366911c57)
- [Vue.jsでSPA - [15] 世界中の人とミーティング時間を決める時に便利なやつ](https://qiita.com/narutaro/items/d6431f54050504bf1551)
- [Vue.jsでSPA - [16] へー、FirebaseでWebアプリのログインってこうやるのか](https://qiita.com/narutaro/items/3c37fe6c3b19a6143a07)