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


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

概要

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

やること

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

これは CloudFront の 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 が末尾にバージョン番号がついたものになるので、コピーしておきます。

ARN of Lmabda

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

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

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

Behavior Setting 1

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

Behavior Setting 2

この内容で Behavior を作成したら、対象となるパスに対して Invalidation を発行して、設定は完了です。


今回は Lambda@Edge で Basic 認証を実装しましたが、 Lambda が呼べるということは何でもできるということなので、色々使いみちがありそうです。

comments powered by Disqus