SPAでログイントークンを扱う方法のベストプラクティスはありますか？

Question

現在Vueでフロントシステムの開発を行っています。

ログインでアカパスを入力してバックエンドからトークンを取得してフロントからは各種APIをログイン時に取得したトークンを使って叩いています。

現状そのトークンはlocal storageに保存しています。
しかしそれだと残り続けるためセキュリティー上やや危ないという事でどうすべきか悩んでいます。

session storageだと複数タブで使う際に再度トークンの取得が必要になってしまう為不便で却下しました。

そこで　こちら で紹介されている様に一定時間が経ったら削除される様に実装するのが良いかと検討してます。

この様にトークンを保存するというスキームは良くあると思いますが、一般的なベストプラクティスはあるのでしょうか？

ご教示いただけますと幸いです。

因みにvuex-persistedstateを仕様してvuexのstoreをlocal storageに保存しています。

Comments

[退会済みユーザー]

> 現状そのトークンはlocal storageに保存しています。
しかしそれだと残り続けるためセキュリティー上やや危ないという事でどうすべきか悩んでいます。

これは何を危惧していますか？
ブラウザに保存したものが盗まれることを前提としているのであれば、アプローチは全く別角度からすることになると思います。

[Hayato1201]

XSSやCSRFを危惧しています。
ですので色々見てみて確かに「一定時間が経ったら削除される様」というアプローチではあまり意味ないと思ってました。。。

そこでcookie上にトークンを保存する方針にしようかと思っているのですがいかがでしょうか？またそれに伴い下記に質問を掲載しているのですがそちらももしご確認いただけると大変ありがたいです・・・
https://teratail.com/questions/351718

Answer 1

想定されている脅威に対してはこの質問と回答が参考になると思います。
JWTなどのTokenをlocalstrage(HTML5の)に保管することについて

ただ、本質問の回答にはなっていないので、もう少し質問を整理された方が良い回答が付くかと。