開発中と本番環境にリリースした際に求められる機能の違いを穴埋めするために、開発モードと本番モードによるビルドを対応しているフレームワークが多数存在します。
今回はその中でもvue.jsを開発モードでビルドして公開してしまった際のリスクの一例をCELTFを利用して実際に体験します。
注： CELTF の "ToDo管理サービス" に関する解析方法を含みます。
開発モード、本番モードのビルドの違い
開発モードによるビルド
開発モードによるビルドを行うと、デバッグを行うためのツールなど開発を便利にするための機能が含まれている事が多々あります。
開発中は便利な反面、もしその状態で本番環境にリリースしてしまうと、攻撃者に対しても脆弱性調査を容易にする機能を提供してしまう事になります。
また、コード内のコメントも開発モードによるビルドでは残ってしまうため、細かい内部仕様をコメントに記載している場合などは、自ら脆弱性を公開してしまうリスクにつながります。
本番モードによるビルド
本番モードのビルドの場合、開発モードで含まれていたデバッグ機能などは含まれなくなります。
また、コメントなどの機能提供に不要なコードは削除される事が一般的です。
加えて、フレームワークによっては難読化などのセキュリティ強化に関する機能が提供される事もあります。
CELTFを利用して実際に体験する
開発モードでビルドされた脆弱性のあるページにアクセス
今回はCELTFの練習サイトである「ToDo管理サービス」の特権管理画面を利用して体験します。
脆弱性のあるページにアクセスするためには、推測可能なURLのセキュリティリスクを参考にしてください。
開発モードでビルドされた事を確認する
開発モードでビルドされた事を確認する方法はいくつかありますが、今回はChromeのデバッグモードから「Console」を表示し、DevToolsの呼び出しに失敗している事を確認します。
開発モードでビルドされたページにアクセスし、デバッグモードからConsoleを確認します。
「DevTools failed ...」と記載のある部分から、「webpack:///node_modules/vuex-persistedstate/dist/vuex-persistedstate.es.js.map」が呼び出されようとしている事がわかります。
これは開発モードでビルドされている事でJavaScript内のsourceURLが残っており、SourceMapファイルの読み込みを試みてファイルが存在せず警告メッセージが表示されています。
今回はコンソールの警告メッセージを確認しましたが、JavaScriptファイルの難読化/圧縮の可否などでも容易に確認する事ができます。
コメントを確認する
次にHTMLファイル内のコメントを確認します。
Chromeのデバッグ画面から「Elements」を開き、「html」のタグを右クリックし「Expand recursively」を押下します。
これで現在表示されているページのすべてのHTMLが表示されます。
今回は特権管理画面のIDとパスワードをコメントで残してしまっていたため、IDとパスワードが流出してしまうという脆弱性になります。
本番モードによるビルドではコメントが削除される仕様から、センシティブな情報をコメントで残しているケースがありますが、ビルド方法を間違えるとこのような脆弱性を引き起こす危険性があります。
おわりに
今回は開発モードによってビルドされたものを公開する危険性について解説しました。
CI/CDなどを利用し、本番環境には必ず本番モードでビルドされるようにするなど、万が一に備えリスクを考慮した運用を検討する必要があります。
