はじめに

S3とCloudFrontで静的Webホスティングを実施する案件に携わりました。
セキュリティを担保するためにCloudFront FunctionsによるBasic認証の実装が必要だったので、関数を作成しました。
CloudFront FunctionsによるBasic認証は初めてだったため、今後実装される方の為に忘備録としてサンプルを紹介させて頂きます。

本記事は関数の内容紹介がメインとなり、AWSコンソール上の設定は割愛させて頂きます。
AWSコンソールの設定手順はこちら。

Basic認証サンプル紹介

実際にプロジェクトで実装した普通のBasic認証と指定したページのみのBasic認証、それぞれのサンプルにつきそれぞれ紹介します。

パスワードのbase64変換

base64に変換したパスワードが必要なため、先にbase64でパスワードを変換する方法につき紹介します。
AWSコンソールでCloudShellを起動して以下のコマンドを実行します。

echo -n "変換するパスワード" | base64

普通のBasic認証

まずは普通のBasic認証のサンプルにつき紹介します。
全てのページに適用されるので、どのページにアクセスしてもユーザー名とパスワード名の入力が求められます。

function handler(event) {
  var request = event.request;
  var headers = request.headers;

  // echo -n user:pass | base64
  var authString = "Basic base64に変換したパスワード";

  if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
  ) {
    return {
      statusCode: 401,
      statusDescription: "Unauthorized",
      headers: { "www-authenticate": { value: "Basic" } }
    };
  }

  return request;
}

指定したページのみのBasic認証

次は指定したページのみのBasic認証のサンプルを紹介します。
こちらは指定したページにアクセスしたらBasic認証が求められる仕様です。

function handler(event) {
  var request = event.request;
  var headers = request.headers;
  var uri = request.uri;

  if (!uri.includes('/ページ名')) {
    return request;
  }

  // echo -n user:pass | base64
  var authString = "Basic base64に変換したパスワード";

  if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
  ) {
    return {
      statusCode: 401,
      statusDescription: "Unauthorized",
      headers: { "www-authenticate": { value: "Basic" } }
    };
 }

普通のBasic認証に以下のコードを追加します。

 if (!uri.includes('/ページ名')) {
    return request;
  }

さいごに

CloudFront Functionsのサンプルを紹介させて頂きました。
Basic認証を実装する際、参考にしてください。

参考資料

Basic認証 – Wikipedia
https://ja.wikipedia.org/wiki/Basic%E8%AA%8D%E8%A8%BC

チュートリアル: Functions を使用したシンプルな CloudFront 関数の作成
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/functions-tutorial.html