Vue のフロントエンドとバックエンドの分離プロジェクトの浸透アイデア

序章

現在の開発環境では、フロントエンド機能の記述を実現するために Vue.js を選択するメーカーが増えており、成熟したフロントエンドフレームワークはバックエンドコードによって実現される機能をすでに実現できるため、バックエンドは現在、フロントエンドが同時に呼び出すと便利な API インターフェイスとドキュメントの提供のみを担当します。この記事では、フロントエンドとバックエンドが分離されているWebサイトに対するペネトレーションテストの実施方法を中心に紹介しますが、ペネトレーションテストをいかに効率的に実施するかが重要な課題となっています。

一連の考え

一般的なフロントエンドとバックエンド分離 Web サイトのアーキテクチャは基本的に Nginx + Vue.js + Java (Tomcat/SpringBoot) であり、 記述された Vue コードは WebPack パッケージ化されてリリースされ、ブラウザエンジンがページを動的に解析してレンダリングできます。システムインターフェイス、js、css がパッケージ化および圧縮されていることがわかりますが、これは通常の読み取りが困難です。

WebPack でパッケージ化された js ファイルの命名規則は次のとおりです。模块名称+ 模块内容Hash值

例えば：app.1b9d4d540cea3c00d632V2.0.2_1610699496426.js

一般的な浸透のアイデアは、一般に次のとおりです。

未承認の API インターフェイスを見つけて、システムユーザーアカウントのパスワードなどの情報を取得するなど、今後使用する機密情報を取得します。
ファイルのアップロードの検索、アバターの変更、その他の機能などの機能を分析するために、不正な API インターフェイスを見つけます。
不正な API インターフェイスを見つけて、SQL インジェクション、XSS、SSRF、コマンド実行、XXE、Fastjson、Shiro などの一般的なテストの実行を試みます。

パッケージ化されたjsファイル。

アクティブなAPIインターフェースの取得

1. Chrome ブラウザのプラグイン findsomething を使用して、API インターフェイスをすばやく抽出します。

2. URLfiner を通じて取得する go run main.go -a "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36" -u http://www.xxxxxx.cn -o . -m 2 -t 20

パラメータの説明

-a は ua ヘッダーを指定します
-u 指定 URL
-o は出力を指定します
-m クロールの深さ
-t スレッドをクロールする

パッシブ API インターフェースの取得

Q: API インターフェイスを受動的に取得するのはなぜですか?

A: webpack は、チャンクの非同期ロードやプリフェッチなど、パフォーマンスとロード時間を考慮します
。パッケージ化プロセス中に、モジュールはチャンクに結合され、チャンクはチャンクグループに結合され、相互接続されたモジュールのグラフを形成します。
チャンクには 2 つの形式があります。Initial
(初期化) は、エントリの開始点にあるメインチャンクです。このチャンクには、エントリポイントに指定されたすべてのモジュールとその依存関係が含まれます。non-initial は遅延ロードできるブロックです

具体的な説明は次のとおりです:
一部のフロントエンドアプリケーションには、異なる chunk.js に対応する異なるメニューがあります。
たとえば、システムのデフォルトでは、ユーザーはいくつかのメニューのみを表示します。2 つの chunk.js が読み込まれますが、
他のメニューにアクセスすると、、ロードされた新しいchunk.js

比較は次のとおりです。https:
//a.testivy.cn/#/job にアクセスして、次のように js をロードします
。app.261acb1e.chunk.js
main.24f96504.chunk.js
ですが、https://a.testivy にアクセスすると.cn/# /widget によって読み込まれる js は次のとおりです:
app.261acb1e.chunk.js
main.24f96504.chunk.js
app.281d33fb.chunk.js

がもう 1 つ見つかりました app.281d33fb.chunk.js と言われればこの時点ではアクティブなコレクションを使用します。このアンロードされた JS は収集できない可能性があるため、パッシブに取得されます。

HaE burpsuite プラグイン: このプラグインを有効にした後は、パスワードのリセットボタン、ログインボタン、登録ボタンなどの Web サイトをクリックするだけです。これらのボタンをクリックすると、アンロードされた chunk.js ファイルが読み込まれる可能性があります。 burpsuite に移動して、HaE と一致するいくつかのインターフェイスリークを確認します

ホストをフィルタリングします。

JS ファイルによってリークされた API インターフェイスを見てください。

次に、アクティブおよびパッシブに収集された API インターフェースを txt ファイルに整理して保存し、それを使用してhttpx タイトルやサーバーなどの Web 情報を検出し、API インターフェースが認証されているかどうかを判断します。

./httpx -l url.txt -sc -title -cl -location

パラメータの説明

-l はファイルを指定します
-sc ステータスコードの表示ステータスコード
-title タイトルを表示
-cl 本体の長さを表示します
-location 301 リダイレクトが返された場合、301 リダイレクトのアドレスを表示します。

何千もの花の中に少し緑。

APIインターフェースが認証されていないため、情報漏洩が発生します。

他のすべてのインターフェイスは 401 として開きます。

このインターフェイスを使用して、漏洩した js ファイルのアドレスをクエリします。

キーコードを抽出すると、Oe.get("".concat(Se(),"/api/xxx/xxx/xxx/v1/user/all"),e,"json")それが get リクエストであることがわかります。見つかった API インターフェイスが次のような場合、/api/xxx/xxx/xxx/v1/file/uploadこのケースは通常 post リクエストであるため、次を参照してリクエストの本文コンテンツパラメータを見つけることができます。 js ファイルを作成してアップロードパッケージを構築し、ファイルのアップロードを実現します。

チップ

1. 通常のシナリオでは、フロントエンドプロジェクトはパブリックネットワーク上に構築され、API インターフェイス、つまりバックエンドサーバーは内部ネットワーク上にデプロイされますが、多くの場合、開発者は API を使用します。管理とデバッグを容易にするために、バックエンドをパブリックネットワーク上に構築するデータ管理を容易にするために、サーバー上にバックエンド管理インターフェースを構築しますこの場合、バックエンドサーバーの IP が漏洩する可能性が一定の確率で発生するため、 js ファイル内の API インターフェイスを見つけるだけでなく、IP とドメイン名の取得も試みます。

2. サーバーは複数のポートを開いています。フロントエンドサービスはポート 80 に構築され、バックエンド API サービスはポート 8080 に構築されています。この場合、以前に収集した API インターフェイスを使用して認証と情報漏洩を実行します。ポート 80 では実行できません。そのため、Tomcat、Springboot などの他のポートで Web サービスが実行されているかどうかを確認できます。これらのポートについては、API インターフェイスパスの実行を試みることができます。思わぬ利益が得られるかもしれません。

この記事で使用したツール

HaE：https://github.com/gh0stkey/HaE
URLFinder：https://github.com/pingc0y/URLFinder
FindSomething: https://chrome.google.com/webstore/detail/findsomething/kfhniponecokdefffkpagipffdefeldb
Httpx：https://github.com/projectdiscovery/httpx