CloudFront Functionsではヘッダーの先頭が大文字変換されるので気をつけよう

今回の記事では、CloudFront Functionsを使用してIP制限を行う際に発生したヘッダー名の変換問題について詳しく解説します。

#Amazon CloudFront

#CloudFront Functions

塚本太朗

2024.08.30

 1行まとめCloudFront Functionsを経由すると example-header-name => Example-Header-Name に変換される
 はじめに最近、CloudFront Functions を使ってIP制限を行っていた際に、フロントエンドから送信されたリクエストのヘッダー名が小文字から大文字に変換されるという問題に直面しました。この問題により、予期せぬ動作が発生し、解決に時間がかかりました。
この記事では、問題の詳細と再現方法について詳しく解説します。
 AWSドキュメントの情報開発者ガイドにも以下の通り記載があります。
headers オブジェクトには、リクエストのヘッダー 1 つにつき 1 つのフィールドが含まれます。ヘッダー名は、イベントオブジェクトでは小文字に変換されます。また、関数コードで追加する場合、ヘッダー名を小文字にする必要があります。CloudFront Functions がイベントオブジェクトを HTTP リクエストに変換し直すと、ヘッダー名の各単語の最初の文字が大文字になります。各単語はハイフン (-) で区切られます。例えば、関数コードが example-header-name という名前のヘッダーを追加した場合、CloudFront がこれを HTTP リクエストで Example-Header-Name に変換します。
仕様は記載の通りなので、本記事の続きでは実際に変換される様子を確かめていきます。
 検証 構成今回はヘッダー情報を確認するために、Lambdaでリクエスト情報をログ出力します。

なお、本記事ではAPIGateway, Lambdaなどの設定手順は省略します。
CDKによる全体の実装は以下リポジトリにあげています。
https://github.com/engineer-taro/cloudfront-functions-uppercase
 CloudFront Functionsの設定何も値を変えずにそのままオリジンに対してリクエストを通過させるCloudFront Functionsを実装します。
function handler(event) {
  const request = event.request;

  /** 本来はこの辺りIP制限などの処理を挟む */

  return request;
}
APIGatewayの前段に配置するCloudFrontを作成し、関数を紐付けます。
 ログ出力を行うLambdaの実装Lambdaの実装は以下のようになります。

ヘッダーをログ出力するだけです。
import { APIGatewayProxyHandler } from 'aws-lambda';

export const handler: APIGatewayProxyHandler = async (event, _context) => {
  console.log(event.headers);

  return {
    statusCode: 200,
    body: JSON.stringify({
      message: 'Hello, CDK!',
    }),
  };
};
 curlコマンドでAPI実行しログを確認するCloudFrontを経由せず、APIGatewayのドメインへ直接リクエストした結果がこちらです。
curl -H "hoge-fuga: value" https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/sample 
CloudFront Functionsを紐付けた、CloudFrontへリクエストした結果がこちらです。
curl -H "hoge-fuga: value" https://xxxxxxxxxx.cloudfront.net/sample 
ヘッダーのhoge-fuga > Hoge-Fuga に変換されていることが確認できました。
 まとめ今回の記事では、CloudFront Functionsを使用してIP制限を行う際に発生したヘッダー名の変換問題について詳しく解説しました。具体的には、フロントエンドから送信されたリクエストのヘッダー名が小文字から大文字に変換される現象を確認し、その影響と対策について検証しました。
AWSのドキュメントにも記載されている通り、CloudFront Functionsはヘッダー名を小文字に変換し、再度HTTPリクエストに変換する際に各単語の最初の文字を大文字にします。この仕様により、予期せぬ動作が発生する可能性があるため、この点を考慮して実装を行う必要があります。