More than 3 years have passed since last update.

CloudFrontとLambdaでBasic認証設定してみた

Last updated at 2020-09-25Posted at 2020-09-25

こんにちは
「あつまれどうぶつの森」のためにswitchの販売抽選に応募するが当たらず「あつもり」ブームも過ぎていたことに最近気付いたstreampackのrisakoです
そして9月も後半！だんだん涼しくなってきて過ごしやすくなってきましたね！

今回のテーマは「Basic認証」です
これまでなかなか触れることがなかったので、初めて設定してみた記念にQiitaに残そうと思います。
#Basic認証とは？
Web上で利用できる認証システムのことです。
Basic認証が設定されているページにアクセスすると、ブラウザ上にユーザー名とパスワードを入力するポップアップが表示されます。
私はBasic認証を意識する前に数回web上でみたことがあるので、多くの人が見たことがあるのではないでしょうか？

Safariだとこのようなポップアップが出てきます!

#事前に用意するもの

S3 bucketに保存したhtmlなど

Basic認証で保護したいwebページなどをS3bucketに保存しておきます。

#まず初めにCloudFront設定
デフォルトの設定から変更が必要な箇所のみ記載します。
###Origin Settings

Origin Domain Name：webページで保存したS3bucketを指定します

###Default Cache Behavior Settings

Viewer Protocol Policy ：Redirect HTTP to HTTPS
Cache and origin request settings：Use legacy cache settings
Cache Based on Selected Request Headers：Whitelist
Whitelist Headers：Access-Control-Request-Headers・Access-Control-Request-Method・Origin
Object Caching：全てのTTLを0にする

###Distribution Settings

Default Root Object：S3に保存しているwebページをしていると、CloudFrontのURLから直で行けるので便利です。例えば、https://CF-URL/test.html と指定しなくてもhttps://CF-URL だけで、test.htmlが表示されます。

#次にLambda設定
Lambda@edgeを使用できるリージョンは米国東部（バージニア北部）のみなのでリージョンを移動します。

任意の関数名を入力します。
ランタイム：Node.js 12.x
実行ロール：Basic認証用に作成したものとわかるように命名します。仮に（test-basic-role）とします。
ポリシーテンプレート：「基本的なLambda@Edgeのアクセス権限（CloudFrontトリガーの場合」を選択

Lambda関数が作成できたら、コードを書いていきます
参考記事のコードを使わせてもらっています。
下記の箇所を自分の設定したいユーザー名とパスワードに変更してください。
ここで設定したユーザー名とパスワードがbasic認証で使用するものになります。

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

'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);
};

コードを保存したら、右上に表示される「アクション」から「Lambda@Edgeへのデプロイ」に進みます。