CloudFront FunctionsでBasic認証のパスワードをかける

CloudFrontで公開しているWebに対して、Basic認証をかける方法を紹介します。 Lambda Edgeを使う方法や、Origin側で認証する方法などありますが、ここでは一番手軽な CloudFront Functions を使った方法を紹介します。
2021.09.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

前提

  • すでに、CloudFrontの設定は済んでいる
  • Origin側との接続も済んでいる

準備:パスワードの文字列作成

まず、パスワードの文字列を作ります。

以下のパスワードを作ることを想定しています。

ID:classmethod
Password:0912cm

CloudShellが使えるリージョンに行きます。ここでは Tokyo リージョンを使用します。

以下のように入力

echo -n "classmethod:0912cm" | base64

出てきた文字列を記録します。

Y2xhc3NtZXRob2Q6MDkxMmNt


CloudFront Functions の作成

CloudFront から Functions に行きます。


Create Functionをクリックします。


Functionの名前を決めます。任意の名前で大丈夫ですが、ここでは「s3-cf-keisuke-function」という名前にしています。


Buildの中で、Function codeを入力します。 6行目のauthStringの中で先程の作成した文字列を入力しています。

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

  // echo -n user:pass | base64
  var authString = "Basic Y2xhc3NtZXRob2Q6MDkxMmNt";

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

  return request;
}

Save changesをクリックします。


Publishタブに移動し、Publishします。


ここでどのDistributionにこの Function を使うかの設定も可能なのですが、どうもここで設定すると、どのURLでBasic認証をかけているかが直感的ではない気がするので、ここでは設定しません。

Distribution の設定

CloudFront の Distributions に移動します。 該当 Distribution を開きます。

Behaviorタブから該当Behaviorを選択し、Editをクリックします。


画面一番下にスクロールして、Viewer Requestを設定します。 CloudFront Functionsを選択し、該当のFuncionここでは「s3-cf-keisuke-function」を選びます。 Save Changesをクリックします。


テスト

ここでは、 https://s3-cf-keisuke-web.cmth.work という名前で Distribution が設定されているものとします。

下記のように、ログイン画面が表示されます。

最初に入力した、IDとPasswordでログインできれば成功です。


まとめ

1つしかユーザー情報を設定できないものの、設定の手軽さと、動作の軽量さがあり、とてもとても便利な方法だと思います。