SPAでjwtを扱う場合について

Question

フロントを Vue や React などSPAで作り、でバックからログイン時にjwtを受け取ってそれを用いてバック側のAPIを叩く様な仕組みの際にjwtを local storage 等に保存するのはセキュリティ上良くない、その代わりとして　cookie　（httpOnly） に保存する方が良いというのはよく目にしますが、その場合、そのトークンの保存をする処理を実装するのはフロント側というよりバック側になるのでしょうか？

httpOnlyだとJSからアクセスできない、という事はそれを取得して投げるという処理をjavascript(VueやReact)側から行うのは無理なのでは？と思うのですがどうなのでしょうか？

こちらのブログではReact × Expressの場合のjwtの保存について書かれていました。

こちらを参考にするとバック側（Express）の処理としてset-cookieを行ったりしていますが、基本的にはこの様にバック側でトークンの保存処理を実行するというのがjwtをcookieに保存する構成の実装方法として一般的なのでしょうか？

この辺りについて知見がない為ご教示いただけると幸いです。

Answer 1

httpOnlyだとJSからアクセスできない、という事はそれを取得して投げるという処理をjavascript(VueやReact)側から行うのは無理なのでは？と思うのですがどうなのでしょうか？

cookieはリクエスト時にヘッダに付与されます。
よって、cookieにセットされているデータをフロント側で取り出して別の形で付与してサーバへリクエストする必要はありません。
そのようにしていたらlocalStorageと変わりませんよね。
そして、httpOnly属性でセットされているとjs側では読み取れません。が、サーバへは送信されているためサーバ側でその値を取り出してあげるという流れになります。
(このページとかで開発者ツールのNetworkタブを覗いてもらうと、Request Headersにcookieが付与されている通信が確認できます。)

基本的にはこの様にバック側でトークンの保存処理を実行する

サーバ側で保存処理を行うわけではありません。
サーバはあくまで「〇〇というcookieをセットしといてー」というレスポンスヘッダを返すだけです。
レスポンスを受け取ればヘッダに従ってcookieは保存されます。(ブラウザがやってくれる)

Comments

[Hayato1201]

丁寧な回答ありがとうございます！助かります。

>レスポンスを受け取ればヘッダに従ってcookieは保存されます。(ブラウザがやってくれる)
ブラウザがやってくれるためフロント側のコードでは特にcookieに保存する様な処理を記述しなくても保存できているという認識で良いですかね？（参考のブログのコードもaxiosでクッキーを有効にするくらいの記述しかしていなかったので）

local storageを使う場合はフロント側で当然トークンを保存する様な処理を記述していましたがcookieの場合は実際はクライアント側は保存処理は行なっているけれどコード上は特に明示的に処理を記述する必要もないという感じなんですかね？

[p19ljk]

>>cookieの場合は実際はクライアント側は保存処理は行なっているけれどコード上は特に明示的に処理を記述する必要もないという感じなんですかね？

簡単に言うとそんな感じですかね。
イメージとしてはcookieはサーバ側がクライアント側に覚えておいて欲しいデータを格納する場所です。
なので、(基本的には)クライアント側は意識をしなくても勝手に保存されるし勝手に送信されます。