S3＋CloudFrontによる静的サイトにLambda@Edgeを設定(2)

S3＋CloudFrontといった構成で構築した静的Webサイトに、Lambda@Edgeを使って、Basic認証を追加してみました。

---

前回は、Lambda@Edgeを使って、URL(URI)を書き換え、index.htmlを表示するようにしました。
今回は、Lambda@Edgeで、Basic認証を実現しましょう。

なお、下記の記事などを参考にしました。
Amazon CloudFrontとAWS Lambda@EdgeでSPAのBasic認証をやってみる

Basic認証のために、「ビュワーリクエスト」で、次の処理を行ないます。

1. Authorization ヘッダの内容が、あらかじめ設定したユーザー名・パスワードと合致した場合は、処理を実行
2. 合致しない場合は、ステータスコード401を返し、Basic認証を要求

具体的には、次のようなコードになります。

Lambda@Edgeのコード

'use strict';
exports.handler = async (event, context) => {
    const request = event.Records[0].cf.request;
    const headers = request.headers;
    const authUser = 'username';
    const authPass = 'password';
    const authString = 'Basic ' + new Buffer.from(authUser + ':' + authPass).toString('base64');

    if (typeof headers.authorization == 'undefined' || headers.authorization[0].value != authString) {
        const body = 'Unauthorized';
        const response = {
            status: '401',
            statusDescription: 'Unauthorized',
            body: body,
            headers: {
                'www-authenticate': [{key: 'WWW-Authenticate', value:'Basic'}]
            },
        };
        return response;
    }
    return request;
};

username と password は、認証に使いたいユーザー名とパスワードに置き換えてください

前回と同様、ランタイムは Node.js 10.x としました。実行ロールは、前回に作成したものを指定しました。
「アクション」⇒「新しいバージョンを発行」と操作して、作成されたバージョンに対し、トリガーとして「ビュワーリクエスト」を設定しました。

デプロイ完了後、アクセスすると、ユーザー名とパスワードを入力するダイアログが表示されます。あらかじめ設定したユーザー名・パスワードを入力すると、サイトにアクセスが可能です。

このような感じで、比較的簡単にBasic認証を実現することができました。