https://devblog.thebase.in/entry/2022/09/06/110000

1614340287711564

基盤チームの右京です。

昨今はフロントエンドのアプリケーションもリッチになり、ブラウザ上で実行されるコードが行うことの範囲も増えてきました。一方で多くのことを実装できてしまうのはリスクでもあり、BASE でも問題となることがあります。

その中でも「開発環境の URL」や「デバッグ機能の存在」ような環境毎に異なる情報は、特に意図せずに漏れやすいものだと考えています。これらはコードを記述する際に、実装方法を知識として知っていればその多くが回避可能です。この記事ではその実装例を解説しています。

コードから漏れる情報

例えば、次のようなコードがあるとします。

function debug() {
  // 開発環境の host であればデバッグ機能を有効にする
  return location.host === 'dev.kankyo.com';
}

なんの変哲もないようなコードに見えますが、ブラウザ上で実行されるコードとしては非常に良くないものだと言えます。通常 JavaScript をブラウザで実行する場合、ソースコードが直接取得されるため、その内容は利用者が閲覧することできます。つまり「秘匿情報の開発環境の URL が、比較的誰でも簡単に入手できるものに記載されてしまっている」ということになります。

Minifier や Compressor を用いて難読化を行ったとしても、(このままでは)この URL の情報が消えることはありません。location.host という変数と比較をするため、"dev.kankyo.com" は実行時まで必要なコードだからです。

防ぐにはどうするか？

殆どの場合は次のうちいずれかの方法で解決できるでしょう。

1. 情報をサーバーサイドのプログラムから受け取る
2. 環境毎にビルドで使用する定数を入れ替える
3. ビルドフェーズで不要になるコードを確定して削除する

前者の 2 つは馴染みのある方法で、最後の 1 つはフロントエンド特有のものです。

1. 情報をサーバーサイドのプログラムから受け取る

HTML を配信するサーバーサイドのプログラムがある場合、環境による変化はそちらでコントロールします。今回の例では、デバッグ機能を利用したい場合にそのフラグを input で埋め込むような形にします。

<input type="hidden" id="debug" value="1">