localStrage及びCookieへの個人情報の一時的な保存について

Question

localstrage及びクッキーへの個人情報の保存のセキュリティリスクについて、お聞きしたいことがあります。
現在は、フロントエンド(Vue)とバックエンド(Laravel)を完全に分けた形で、データの取得はAPIを通じて行っており、認証方法もJWT認証にて開発を行っています。
現状、画面間でのデータの持ち越しを行う際に、問題が出てきてしまいまして、それぞれのページで入力した情報を元に最終的に入力内容を確認する画面に一覧で表示したいと考えています。
しかし、途中のページでリロードしてしまった際に、Vueのストアへの保存ではデータが消えてしまい、最初のページから入力をし直さなければならなくなってしまいます。
ここで、クッキーやlocalstrageへの保存を検討したのですが、入力する内容に利用者の名前や携帯番号が含まれる為、セキュリティ的なリスクが発生するのではないかとの心配があります。
もし、クッキーやlocalstorageへのセキュリティリスクを軽減する方法や、他の代替できる手段がありましたら、教えて頂けましたら幸いです。

Comments

[yuma.inaura]

こんな記事もありますね

>重要なデータを保存する必要があるなら、常にサーバーサイドセッションを使うべきです。
https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851

[ruuuu]

>こんな記事もありますね
ありがとうございます！
参考にさせて頂きます

Answer 1

Teratailではどうしているか確認してみると、

• 新規質問の場合 → 離脱アラートが表示され、強行すると質問文は消える
• 回答の場合 → 回答分はlocalStorageに保存され、離脱アラートは表示されない

質問と回答で処理を分けている理由は謎ですが、ヒントにはなります。
Teratailだと、質問・回答に個人情報を載せることは推奨されていないので、localStorageに回答を一時的に保存することはありかなと思います。いずれ公開されるはずの情報ですしね。質問文をlocalStorageに保存しない理由を深読みすると、たまに秘密情報（パスワード類など）を質問文に含めてしまう人がいるから、かも…違うかもしれません。

ご懸念のように、CookieやlocalStorageはクロスサイトスクリプティング(XSS)などで漏洩懸念があるために、秘密情報を保存することは推奨されていません。とくに、Vue.jsから参照するとなると、CookieにHttpOnly属性をつけないでしょうから、なおさらです。localStorageの方は有効期間を設定することができないという問題もあります。

回答としては、Teratailが新規質問の際に実装するように離脱アラートをつけるというのはどうでしょうか。リロードや戻るボタンの対応としては、これで十分かと思います。

Comments

[ruuuu]

ご回答ありがとうございます。
離脱アラートを使用する方法は考えつかなかったのですが、かなり良い方法と感じ大変参考になりました。
自分が思いついたのは、いくつかの入力項目の中でメールアドレスや携帯番号などの重要な個人情報以外はlocalstrageへ保存し、それ以外の項目はlocalstrageへ保存し一からの入力ではなくさせるとい方法でした。
しかし、複数ページともなると色々と考慮することが増えそうですし、ご回答頂きました離脱アラートにする方向で検討してみたいと思います。