で認証情報はCookieに入れるのとLocalStorageに入れるのどっちがいいんだってばよ？

SPA(React + Rails)環境でCookieを使った認証機能を作ったらChromeでまともに動かなくて涙 - kappaz’s diary の続き。

結論から言うと、

• 何を選ぼうがリスクは残る
• 選んだ手法の特徴を理解した上でリスクを緩和する策を取れ
• お前の置かれた状況に応じてリスクの受容も考えろ

下記Twitterのスレッド参照。途中のダイレクトな質問をしてくれた方には深い感謝と敬意を表したい。

わかったわかったもうSPAやめよう

Auth TokenをlocalStorageに入れようが、cookieに入れようがどっちもXSS危険性には無防備 https://t.co/Z7UY2vyzi5 #Qiita

— 👹秋田の猫🐱 (@ritou) 2020年7月18日

理解している範囲だけで考えても、

• LocalStorageにJWT(Auth Token)を入れるのはXSSで直接Tokenを取られる危険性がある
• Cookieにhttp only属性を追加したところで、XSSでfetchなり何なりされたら、Cookieを用いたアクセスは悪用されてしまう

って感じで単純にどっちを選べばいいというものでもない。

おそらく完全にリスクを無くすことはできないだろう。 node_modules以下の全てのコードにXSS脆弱性が無いなどと誰が言えるだろうか。

とりあえず私はSPAでcookie使うとChromeにhttps要求されるのがくそ怠いのでLocalStorageを使います。 ってことでLocalStorageの特性とリスクと緩和策をちゃんと調べないとね。

って思っていたら以下のようなツイートをいただいた。 ありがたや。

海外の方の記事ですが、AccessTokenはin memoryでRefreshTokenはCookieで実装する案が書かれています。それぞれについて「私はこう考えている」と言うのが明確に説明されているので、目を通してはいかがでしょうか。
https://t.co/jhd5e8atCG

— 👹秋田の猫🐱 (@ritou) 2020年8月4日

次はこの内容を理解しつつ、自分なりにSPA環境でどういう認証の実装が許容されうるか考えてみよう。 まぁ私、access tokenとrefresh tokenもそんな言葉あったなぁくらいにしか理解してないんだけどね。ahaha。