雑多なブログ

音楽や語学、プログラム関連の話題について書いています

フロントエンドの学習を進めていて湧いた疑問

最近、vue.jsを学習している。

こういったフロントエンドのフレームワークでSPAを構築するイメージはなんとなく湧いてきたのだけど、それと同時に1つ疑問が湧いた。

メンバーサイトのコンテンツどうやって秘匿する?

現時点での自分が思い浮かぶ方法は次の通り

  • SSR
  • API経由でメンバーコンテンツを取得
  • CDNを使う(Cloud Frontの署名付きURLやCookieを使う想定)
  • 難読化
  • ノーガード
  • MPA

難読化

正直秘匿できていないので論外だと思うけれど、機密性の低い情報しかhtmlに書かれていないのであれば、これで良いかもしれない。 サーバサイドから読み取って動的に表示する部分だけ、適切に制御できていれば不都合はないかもね。

SSR

現時点で知識がないのでなんともに言えないけど、サーバサイドでフロントエンドのレンダリングを行うので、ユーザーに不要なソースをカットして必要なソースだけ返す形で対処できるのかな? 一般的なSSRの仕組みだとどうなっているのかな? 要検証。

API経由でメンバーコンテンツを取得する

見せたくないテキストデータ、画像などすべてをAPIを介して行えば、一応コンテンツを秘匿する事はできる。

ただ、めちゃくちゃめんどくさそう。

そして、人為的なミスでフロントエンドのソースに秘匿コンテンツをハードコーディングしてしまう可能性もあるので、しんどい気がする。

CDNを使う

CDNを使って、認証済みユーザーにのみ、画像や動画、jsやcssを返すような仕組みを利用する。Cloud Frontの署名付きCookie、署名付きURLしか使った事がないけど、他にも似たような仕組みはあると思う。

ただ、ページ内の細かい文言のデータをどうやって取り扱うかは、ベット考える必要がある。全段のAPI経由での取得と組み合わせる形にになるかな?

ノーガード

中途半端に難読化する位ならノーガードでも良いかもしれない(笑)

MPA

そもそも、SPAではなくて、MPAとして構築して、従来的にテンプレートをサーバサイドでレンダリングして出力する形で良いのでは?とさえ思えてきてしまった。

SSRするにしても、 サーバサイドの実装に利用している言語と、フロントエンドのレンダリング用に使用する言語が別になる事だってあり得るだろうし、そんな事を考え出すとめんどくせー!となってしまう。

まとめ

実際の業務でこういう事態に直面すると、胃が痛くなると思うので、有る程度対処方法を用意しておきたいところ。

この記事書いてる時点では、頭の中のもやもやを文章化するにとどまっているので、もうしばらく対処法を探っていこうと思う。