SPAで個人情報を扱うフォームを開発する際の値の引き回しについて

Question

React.js (Next.js) で個人情報を扱うフォームを開発しています。

以前、ライトな情報のフォームを開発した際には、React.createContext などでコンポーネント・ページ間で値を管理するようにして実装していました。

しかし、個人情報などを扱うフォームを開発する上で状態管理のライブラリに保存してページ間で引き回すというのはセキュリティ的にどうなのかという質問をされ、あまり自身がそのへんの知識がなかったため、最終的にバックエンド（PHP）でセッションに値を保存、CSRFなどはトークンを使うなどで解決する、という手法になりました。

結果的に、SPAの仕組みをうまく使えずにかなり効率の悪い開発になってしまったので、以前やっていた方法が安全かどうか、安全でなければよりベターな方法を教えていただきたいです。

以前やっていた方法

入力画面送信時に状態管理に入力された内容を保存
↓
確認画面では状態管理の値を参照、表示
↓
入力画面に戻った時には状態管理の値をinputに入力しておく
↓
送信時は状態管理から値を取り出し、APIでPOSTする（ヘッダーにAPI keyを含める形で送信、API keyは環境変数にしておき、外部から読まれないようにする）

Comments

[hoshi-takanori]

SPA の場合、見た目的にはページ遷移しているように見えますが、ブラウザ内部の挙動としては最初のページのまま表示を切り替えているだけに過ぎません。ので、SPA であること自体はセキュリティの問題にはならないと思います。むしろ、ページ切り替えの際にサーバーとの間で情報をやり取りする方が危険性は増すのでは。とはいえ、適切に実装すれば大丈夫なはずですし、SPA でもまずいやり方で実装すれば問題は起こりうるので、SPA のセキュリティを適切に評価できないのであれば採用を諦めるという判断もありでしょうね…。