CloudFrontを使ってTerraMap APIにリクエストする #JavaScript

この記事を作成した背景

外部APIにリクエストする際、APIキーをセットするタイプのAPIだとJavaScriptから直接リクエストしたときにAPIキーが見えてしまうためセキュアではなく、無駄なリクエストを消費する懸念があります。
サーバーサイドプログラムを実装し、APIキーをセットしてプロキシサーバーとして利用することもプログラム実装や環境構築の手間がかかります。
地図システム開発支援Web APIであるTerraMap APIはAPIキーをセットするタイプのAPIであり、サーバーサイドプログラムの実装や自前でインフラ構築することなく、容易にTerraMap APIにリクエストする方法を考えてみました。

概要説明

今回はCloudFrontをリバースプロキシとして利用してTerraMap APIにリクエストし、エリア取得APIと統計データ一覧取得APIのレスポンスを取得するようにしてみました。CloudFrontにはJavaScriptでアクセスするようにします。

JavaScript　→　CloudFront　→　TerraMap API

CloudFrontの設定

はじめにCloudFrontの設定を行っていきます。

CloudFrontの初期画面で「CloudFrontディストリビューションを作成」を押下します。
次の画面でディストリビューションを設定します。
設定を一つずつ見ていきます。
オリジンドメインはTerraMap APIのドメインを指定します。※画像のドメインはダミーです。
プロトコルをHTTPSのみとしHTTPSを使用してオリジンにアクセスするようにしておきます。

オリジンパスはTerraMap APIのパスを指定します。「/api」と入力します。

今回はヘッダーにAPIキーを設定するので「ヘッダーを追加」を押下し、ヘッダー名と値を入力しておきます。

許可するメソッドを指定します。今回はすべてのHTTPメソッドを許可にしておきます。

TerraMap APIにはGETメソッドでリクエストするAPIもあり、クエリ文字列の受け渡しも必要となります。クエリ文字列をAPIに受け渡すにはキャッシュポリシーでキャッシュを有効にする必要があります。
キャッシュを適切に設定してオリジンへのリクエストを抑制できることがCloudFrontの魅力の一つですが、今回はキャッシュを目的としていないのでTTLはすべて最小限の1としました。TTLの設定は用途によりますが、TerraMap APIのデータは修正や更新があることを考慮して短く設定してください。
そしてキャッシュポリシー設定のクエリ文字列は「すべて」を選択しておきます。

異なるオリジンからアクセスする場合、レスポンスヘッダーポリシーを作成してCORSを有効にします。
今回、その他の項目はデフォルトのままにしました。「ディストリビューションを作成」を押下してCloudFrontの設定は完了です。

CloudFrontのセキュリティに関する設定　

APIキーの隠蔽はできましたが、JavaScriptからのリクエストだとURLが見え第3者にリクエストを消費される懸念が残ります。
今回は設定を行いませんが、以下のような方法でセキュリティを保つことができます。

CloudFrontで署名つきURLやCookieを活用してアクセス制限する
CloudFront FunctionやLambda@Edgeを活用して独自ロジックによる制御を行う
WAFを活用してコンテンツへのアクセスを制御する
Cognitoを使用して特定の人だけがアクセスできるようにする

参考情報
署名付き URL と署名付き Cookie を使用したプライベートコンテンツの提供
 関数を使用してエッジでカスタマイズ
 AWS WAF を使用してコンテンツへのアクセスの管理
 Lambda@Edgeを利用してCloudFrontにCognito認証をかける

JavaScriptからCloudFrontにアクセスする

続いてさきほど設定したCloudFrontにJavaScriptからアクセスするようにします。
コードは以下にように作成します。
今回はTerraMap APIのエリア取得APIと統計データ一覧取得APIにリクエストします。
エリア取得APIは指定地点から半径1km円と共有部分がある町丁目のポリゴンと令和2年国勢調査（2020年国勢調査）の人口総数を取得します。統計データ一覧取得APIは2021バージョン、町丁目、令和2年国勢調査（2020年国勢調査）に合致する統計データ一覧を取得します。

index.js

const requestBody = {
  layer_id: "00104",
  area_type: "circle",
  center_lat: 35.681236,
  center_lng: 139.767125,
  radius: [1000],
  stats: [
    {
      stat_id: "001012000",
      stat_item_id: [15776],
    },
  ],
  output: "polygon,data",
};

// さきほど設定したCloudFrontのディストリビューションドメイン名を指定します。
const url = `https://distribution_domain_name`;

function fetchAreaApi() {
  fetch(`${url}/area`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(requestBody),
  })
    .then((response) => response.json())
    .then((jsondata) => {
      const result = document.querySelector("#result");
      result.innerText = JSON.stringify(jsondata);
    })
    .catch((error) => {
      console.log(error);
    });
}

const params = {
  // 渡したいパラメータをJSON形式で書く
  layer_id: "00104",
  layer_version: "202101",
  stat_id: "001012000",
};
const queryParams = new URLSearchParams(params);

// 統計データ取得
function fetchStatsApi() {
  fetch(`${url}/stats?${queryParams}`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((response) => response.json())
    .then((jsondata) => {
      const result = document.querySelector("#result");
      result.innerText = JSON.stringify(jsondata);
    })
    .catch((error) => {
      console.log(error);
    });
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>TerraMap API・CloudFrontリクエスト</title>
  </head>
  <body>
    <script src="./index.js"></script>
    <h1>TerraMap API・CloudFrontリクエスト</h1>
    <button onclick="fetchAreaApi()">エリア取得</button>
　　<button onclick="fetchStatsApi()">統計データ一覧取得</button>
    <h2>結果表示</h2>
    <div id="result"></div>
  </body>
</html>

「エリア取得」を押下するとエリア取得APIのレスポンスを確認することができます。

「統計データ一覧取得」を押下すると統計データ一覧取得APIのレスポンスを確認することができます。