フロントエンドJavaScript静的解析と解析環境Dockerfile

Jun 19, 2022 11:00 · 1713 words · 4 minute read JavaScript Security

JavaScriptでフロントエンドを開発するWebアプリが増えています。
ビルドされたフロントエンドのJavaScriptは、S3などの配信元から誰でも取得することができます。

「自分が作成したWebアプリから、意図せず公開されている情報があるのか」を確認したかったので、JavaScriptの静的解析を試してみました。
今回は下記の記事を参考にさせていただきました。

バグハンターのためのクライアントサイドJavaScriptの静的解析 - No1zy Web Security Blog (hatenablog.com)

実際にツールを使ってみた感想を残しておこうと思います。

目次

解析対象

静的解析対象のJavaScriptは、自分で開発したものを利用します。
React、Vue.js、Angular、Svelteなど、お好みの環境のチュートリアルドキュメントを参照し、解析対象データを作成してください。

自分で作成するのが面倒な方は、OWASPが脆弱性調査の練習用に公開している、下記のWebアプリを使うと良いでしょう。

今回は、作成したWebアプリにBurp Suiteというプロキシ経由でアクセスし、解析対象とするJavaScriptファイルを取得しました。

Burp Suite - Application Security Testing Software - PortSwigger

※許可なく他人の作成したWebアプリを解析した場合、訴訟に発展する可能性もあります。必ずご自身で責任が取れる範囲を調査対象としてください。

試したツール

今回試したツールはこちら。

  • js-beautify
  • relative-url-extractor
  • LinkFinder
  • ESLint

js-beautify

GitHub - beautify-web/js-beautify: Beautifier for javascript

webpackなどで作られたJavaScriptを見やすく整形してくれます。
整形されることで見やすくはなりますが、難読化されている場合はそれなりに読むのが大変です。

relative-url-extractor

GitHub - jobertabma/relative-url-extractor: A small tool that extracts relative URLs from a file.

JavaScriptを解析し、エンドポイントを抽出してくれます。
公開を意図していないAPIの情報が含まれている可能性があるので、リリース前にチェックしておくと良さそうだと感じました。

LinkFinder

GitHub - GerbenJavado/LinkFinder: A python script that finds endpoints in JavaScript files

こちらもJavaScriptを解析してエンドポイントを抽出してくれるツールです。
こちらのツールでは、エンドポイントのパスだけでなくパラメータ情報も抽出してくれるらしいのですが、今回試した範囲ではパラメータの情報は確認できませんでした。
また、調査対象によるとは思いますが、relative-url-extractorでは出力されていなかったライブラリの情報も確認できました。

ESLint

GitHub - eslint/eslint: Find and fix problems in your JavaScript code.

開発者の方にはおなじみの解析ツールです。
通常は開発中のコードに対して実行しますが、今回はWebpackが生成したJavaScriptをjs-beautifyで整形した後のデータに対して実行してみました。

結果はエラーで動かず。手元にソースコードがある場合は有用かもしれませんが、難読化やpack、unpackされた後のコードを解析するのはしんどいかもしれません。
ESLintは今まで通り開発中に利用するのが良さそうです。

解析用Dockerfile

今後も継続して調査したいと感じたので、解析用ツールを動かすDockerfileを作りました。
本来は各ツールごとにコンテナを分けるべきだとは思いますが、ものぐさなので解析用ツールキットとして一つにまとめています。

FROM ubuntu:22.04

RUN apt update && \
    apt dist-upgrade -y && \
    apt install python3 -y && \
    apt install pip -y && \
    pip install jsbeautifier && \
    apt install wget -y && \
    apt install ruby -y && \
    apt install git -y && \
    apt install nodejs -y && \
    apt install npm -y && \
    mkdir /tools && \
    mkdir /tools/relative-url-extractor && \
    mkdir /tools/eslint && \
    cd /tools/relative-url-extractor/ && wget https://raw.githubusercontent.com/jobertabma/relative-url-extractor/master/extract.rb && \
    cd /tools/ && git clone https://github.com/GerbenJavado/LinkFinder.git && \
    cd /tools/LinkFinder/ && python3 setup.py install && pip install -r requirements.txt && \
    cd /tools/eslint && npm install eslint --save-dev && echo "at first, you should exec command 'npm init @eslint/config'." > README.md

buildコマンド

$ docker image build --tag js-analyze:1.0 .

解析対象ファイルをdata/以下に置きます。

$ tree .
.
├── Dockerfile
└── data
    └── test

1 directory, 2 files

data/をmountしてコンテナ実行

$ docker container run -it --name js-analyze --mount type=bind,source="$(pwd)"/data,target=/mnt --rm js-analyze:1.0

最後に

JavaScriptで作られたフロントエンド環境の静的解析を試してみました。

「どこまでやるのか？」「どれだけやるのか？」は検討が必要ですが、「意図していないエンドポイント情報が公開されていないか？」のチェックは時々しておきたいですね。

tweet Share