CloudFront Functionsで検証環境にBasic認証をかける

概要

CloudFrontで検証サイトを配信する場合、簡易的な認証として、Basic認証をかけたい時があると思います。
ここではその手順について説明します。
なおIaC的な仕組みは使わず、ブラウザ操作で進める場合の内容になっています。

構成

S3
CloudFront
CloudFront Functions

Basic認証用の文字列を作る

Basic認証に用いるユーザー名/パスワードを準備します。
色々なやり方があると思いますが、コマンドラインで作るなら、次のように作成できます。

echo -n "test:hoge" | base64
# dGVzdDpob2dl

パスワード生成のWebサービス等もありますが、漏洩リスクとなるためあまりお勧めできません。

CloudFront Functionsを作成する

CloudFront Functionsは、AWS CloudFrontサービスの「Functions」ないし「関数」です。
JavaScriptコードを実行することができるので、ここでBasic認証の処理を行います。
「関数」->「関数を作成」から作成し、コードを貼り付けます。

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

    var authResponse = basicAuth(request);
    if (authResponse) {
      return authResponse;
    }

    return rewriteIndexHtml(request);
}

function basicAuth(request) {
    var expected = 'Basic dGVzdDpob2dl'; // 上で生成したダミー値
    var headers = request.headers;

    if (headers.authorization && headers.authorization.value === expected) {
      return null;
    }

    return {
      statusCode: 401,
      statusDescription: 'Unauthorized',
      headers: {
        'www-authenticate': { value: 'Basic' },
        'cache-control': { value: 'no-store' }
      },
      body: 'Unauthorized'
    };
}

function rewriteIndexHtml(request) {
    var uri = request.uri;

    if (uri.endsWith('/')) {
      request.uri = uri + 'index.html';
    } else if (!uri.includes('.')) {
      request.uri = uri + '/index.html';
    }

    return request;
}

Jekyllの構成では、リクエストURIを index.html に書き換える必要があるため、rewriteIndexHtml部分で一手間かけています。

FunctionをCloudFrontのディストリビューションに関連づける

あとは「発行」メニューから、ディストリビューションのビューワーリクエストと関連づければ完了です。

動作確認

ブラウザでアクセスし、Basic認証が表示されればOKです。
念の為トップ以外のページが問題なく開けるかもよく確認しておきましょう。