CloudFront + S3 で構築したページに Basic 認証をかける

2018-11-01

CloudFront + S3 で構築したページに Basic 認証をかけたい場面が出てきたので調べてみると、特に難しいことをする必要なく実装できそうでした。今回はその作業メモです。

概要

冒頭にも書きましたが、　CloudFront + S3 で構築して公開しているページの、特定のパスに対して Basic 認証をかけます。今回は、このブログの /about/ に Basic 認証をかけると想定します。

やること

Lambda で Basic 認証用のスクリプトを作成
CloudFront で /about/* のパス宛に Behavior を作成する

これは CloudFront の Lambda@Edge という機能を使っています。

Lambda@Edge -ユーザーに近いロケーションでコードを実行-

1. Lambda で Basic 認証用のスクリプトを作成

このスクリプトは バージニア北部 (us-east-1) に作成する必要があるので、マネジメントコンソールの右上から、リージョンを変更しておきます。

Lambda は下記の要領で作成します。

名前: CFBasicAuthenticattion (任意)
ランタイム : Node.js 8.10
ロール : 1 つ以上のテンプレートから新しいロールを作成します。
- ロール名 : lambda_edge_exection (任意)
- ポリシーテンプレート : 基本的な Lambda@Edge のアクセス権限

スクリプトは lmakarov/lambda-basic-auth.js を使います。

'use strict';
exports.handler = (event, context, callback) => {

    // Get request and request headers
    const request = event.Records[0].cf.request;
    const headers = request.headers;

    // Configure authentication
    const authUser = 'user';
    const authPass = 'pass';

    // Construct the Basic Auth string
    const authString = 'Basic ' + new Buffer(authUser + ':' + authPass).toString('base64');

    // Require Basic authentication
    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'}]
            },
        };
        callback(null, response);
    }

    // Continue request processing if authentication passed
    callback(null, request);
};

下記の部分を、Basic 認証のユーザ・パスワードに書き換えます。

// Configure authentication
const authUser = 'user';
const authPass = 'pass';

右上の [保存] を押して、その横にある [アクション] から 新しいバージョンを発行 します。
すると、右上の ARN が末尾にバージョン番号がついたものになるので、コピーしておきます。

2. CloudFront で `/about/*` のパス宛に Behavior を作成する

CloudFront のコンソールで該当の Distribution を選択して、 Behaviors のタブから [Create Behavior] を押して新しい Behavior を作ります。

Path Pattern には、Basic 認証をかけたいパスを入力します。今回は /about/ 以下が対象なので、 /about/* と入力します。

途中の設定は適宜必要な値に設定して、一番下にある Lambda Function Associations で、リクエスト時の挙動を設定します。
CloudFront Event は、ユーザがアクセスしたときなので Viewer Request を選択、 ARN には、先程コピーした Lambda の ARN (arn:aws:lambda...) を入力します。