🍢

プロキシ自動設定ファイルを使ってドメイン & ポート制限をシミュレートする

2022/02/14に公開

network

proxy

pac

tech

ユーザーが社内ネットワーク環境にいる状態でアプリが動作するか検証するために、利用できるドメインやポートに制限をかけたい場合があります。

Charlesなどのローカルプロキシを使う、プロキシサーバーを立てる、WAFを使うなどの案がありましたが、下記全てを満たしたうえで手軽にできる方法がありませんでした。

検証したいサービスのIPアドレスが動的なため、ドメイン単位で制限したい
サブドメインが動的なため、ワイルドカード(*)を使いたい
解放したいポートを範囲指定したい(10000 ~ 20000など解放したい範囲が広い)
設定ファイルをチームで共有したい

そんな中、プロキシ自動設定ファイル（PACファイル）を使えばよさそうということが分かり、試してみることにしました。

プロキシ自動設定ファイル（PACファイル）って何？

PACファイル自体の説明は下記が詳しいです。

注意点はログの出力にconsole.log()ではなくalert()を使用する点です。
また、URL()コンストラクタは使用できなかったので、正規表現でパースしています。

function FindProxyForURL(url, host) {
  if (
    !dnsDomainIs(host, ".example.com")
  ) {
    return "DIRECT";
  }

  const portStr = url.match(/:[1-9][0-9]+/);
  if (!portStr) {
    // URL内にportが無ければそのまま返す
    return "DIRECT";
  }

  const port = Number(portStr[0].slice(1));
  alert(`host:${host} port:${port}`);

  if (!Number.isInteger(port)) {
    // 値が不正な場合は何もせずにそのまま返す
    return "DIRECT";
  }

  const allowedPorts = [1111, 2222, 3333]; // 許可したいポート
  const a = allowedPorts.includes(port);
  const b = isMatchPortByRange(port, 4000, 5000); // 許可したいポートの範囲指定
  const isMatchAnyPorts = a || b;

  if (!isMatchAnyPorts) {
    return "PROXY localhost:3333";
  }

  return "DIRECT";
}

function isMatchPortByRange(port, min, max) {
  return port >= min && port <= max;
}

デバッグ方法

Firefoxを例にします。

PACファイルを読み込む

ブラウザの「設定」から「ネットワーク設定」内にある「接続設定」ボタンを押します。
下記の画面の通り「プロキシ自動設定スクリプトURL」に作成したPACファイルを指定します。
(ファイルを更新した場合は「再読み込み」ボタンを押せば反映されます)

ログを確認する

alert()を含めログは通常の開発者ツールではなく、ブラウザコンソールに出力されます。
Macの場合、メニューから ツール > ブラウザーツール > ブラウザーコンソール で開くことができます。

プロキシ自動設定ファイル（PACファイル）って何？

デバッグ方法

PACファイルを読み込む

ログを確認する

Discussion