React などで SPA のサイトを作り、そのサイトはすべてログイン必須(ログイン前に見えるのは基本ログイン画面のみ)という前提です。
これまで、ログイン前とログイン後で別のアプリとして作っていたのですが、本来は同じアプリなのに、別に作るのは無駄も多く 1 つのアプリとしてログイン前後もページ遷移なしにしたいと考えています。
機能的には Router で対応でき、世間でもそういうのが多いように思います。
しかし、その場合はログインする前でもログインにしか見えないソースコードが見えてしまうと思います。
API を通してデータの取得や更新を行うので、実際のデータを見たり更新処理はできませんが、どういう画面なのかがわかれば隠しているのにどういうサービスで何ができるのかがわかってしまうと思います。
また、 minify 済みとは言え、ソースコードを読めば POST するデータの構造や Header でどういうトークンを送っているなどの仕組みが見えてしまいます。
コードスプリッティングと遅延ロードを使えば、ログイン前のバンドルに含まれなくはできますが、分割されたモジュールごとにサーバサイドでアクセス制限の仕組みを作らない限りログイン後にロードするモジュールの URL にアクセスすれば見れてしまいます。
URL がわからないなら大丈夫と言えるかもしれませんが、実際には他人に見せたくないものを URL を複雑にするのではなく、認証したり IP 制限で対処することが多いように URL がわからないだけでは安心とは言えないと思います。
アクセス制限をかけれるならかけたいと思いますが、ビルド時に出力されるファイル名はランダムかハッシュ値で複雑になっていますし、それをビルドのたびにどれがログイン後にしか見えてはいけないものだと判断してサーバサイドのアクセス制限を書き換えて、というのは現実的に思えません。
正規表現などで自動判定も頑張ればできなくはないように思いますが、スマートなやり方には思えません。
一応、これまでの「別アプリとして作る」であればビルド時の出力フォルダが違うので単純にフォルダ単位のアクセス制限で済みました。
対処方法がないのか調べては見たのですが、このように 1 アプリとしている場合の例では特にアクセス制限を考慮しているものは見当たりませんでした。
世間の SPA のサイトは有名どころも含めログイン前でもソースコードが見えるような作りで問題なしとしているのでしょうか?
あなたの回答
tips
プレビュー