はじめに

前回の記事では、AWS WAFによるBasic認証を行いました。
今回は、CloudFront + S3バケットで構成されるフロントエンドに対して、CloudFront FunctionsによってBasic認証を行いたいと思います。

その前に、CloudFront Functionsってなんだろう？って話なんですが、ユーザに近い場所で任意の関数(コード)を実行できる機能って感じです。

※CloudFrontとS3バケットは既に作成済みの前提で話を進めます

CloudFrontにBasic認証をかける方法としては、他にも以下があります。

Lambda@Edge(CloudFront + Lambda)
AWS WAF

Lambda@EdgeとCloudFront Functionsの違いは、こちらの記事がわかりやすいと思います

アクセスしてみる(Basic認証設定前)

まず、Basic認証設定前にアクセスすると、まだ何も制限してないためHelloと表示するだけの画面が表示されます

Basic認証の設定

関数の作成

では、CloudFront Functionsを作っていきます
左メニューの関数から関数を作成をクリックします

名前は任意の関数名にします。今回はbasic-authenticationとでもしておきます
Runtimeに今回はcloudfront-js-2.0を選択します

関数コードの実装

Basic認証用に以下のコードを記載し、変更を保存をクリックします。
処理としては

ユーザ名がhoge、パスワードがhugaのBasic認証をかける
一致しない場合は、401エラーを返す
になります

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

  // echo -n hoge:huga | base64
  var authString = 'Basic aG9nZTpodWdh';

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

  return request;
}

保存しただけだと実際にデプロイされていないので、関数を発行をクリックします。
※これをしなかったため、保存したのに反映されない、って最初はなりました...

CloudFrontに紐づけ

関数は作りましたが、まだCloudFrontディストリビューションに紐づいていないので、関連付けを追加をクリックします

ディストリビューションに関連付けるCloudFrontを設定します
イベントタイプにViewer requestを選択します
キャッシュビヘイビアにDefault(*)を選択します
関連付けを追加をクリックして、完了です

アクセスしてみる(Basic認証設定後)

さぁ、Basic認証がちゃんとかかったかアクセスしてみましょう。
ちゃんとBasic認証のダイアログが出ましたね
間違った情報を入力すると、401エラーが返ってくることも確認出来ました

おわりに

今回はCloudFrontを使ってBasic認証を行う方法について紹介しました。
フロントエンドの構成がCloudFront + S3の場合は、この方法でBasic認証を行うのが良さそうですね