CloudFront FunctionsでBasic認証を設定する方法｜STG環境をアクセス制限

◷ この記事は約3分で読めます

こんにちは、 @Manabu です。

STG環境や公開前のサイトをインターネットから確認したいけど、誰でもアクセスできる状態にはしたくないことがあります。

CloudFrontを利用している場合は、CloudFront Functionsを使って簡易的なBasic認証を設定できます。

今回は、Viewer requestで認証情報を確認し、正しくない場合は401を返す方法を紹介します。

この記事は、以下のような方におすすめです。

CloudFront Functionを作成する

CloudFront Functionsのランタイムはcloudfront-js-2.0を選択し、次のコードを設定します。

var expectedAuthorization = 'Basic BASE64_ENCODED_CREDENTIALS';

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

    if (!authorization || authorization.value !== expectedAuthorization) {
        return {
            statusCode: 401,
            statusDescription: 'Unauthorized',
            headers: {
                'www-authenticate': {
                    value: 'Basic realm="staging", charset="UTF-8"'
                },
                'cache-control': {
                    value: 'no-store'
                },
                'x-robots-tag': {
                    value: 'noindex, nofollow'
                }
            },
            body: 'Authentication required.'
        };
    }

    return request;
}

BASE64_ENCODED_CREDENTIALSは、ユーザー名とパスワードを次の形式でBase64へ変換した値です。

ユーザー名:パスワード

macOSやLinuxでは、次のコマンドで作成できます。

printf '%s' 'username:password' | base64

関数をテストする

認証ヘッダーがないリクエストでは、401が返ることを確認します。

{
  "version": "1.0",
  "context": {
    "eventType": "viewer-request"
  },
  "viewer": {
    "ip": "198.51.100.1"
  },
  "request": {
    "method": "GET",
    "uri": "/",
    "querystring": {},
    "headers": {},
    "cookies": {}
  }
}

続いて、正しいAuthorizationヘッダーを含めた場合に、元のリクエストが返ることを確認します。

CloudFrontへ関連付ける

テストが完了したら関数をLIVEへ発行し、対象ビヘイビアのViewer requestへ関連付けます。

複数のビヘイビアがある場合、関数はビヘイビアごとに設定が必要です。

例えば、次のビヘイビアがある場合は両方を確認します。

• Default (*)
• /api/*

Defaultだけに設定すると、/api/*からBasic認証を回避できる可能性があります。

URL書き換えと一緒に使う場合

CloudFront Functionは、同じビヘイビアの同じイベントに複数設定できません。

すでに/article/を/article/index.htmlへ変換している場合は、Basic認証とURL書き換えを一つの関数へまとめます。

URL書き換えの方法は、以下の記事で紹介しています。

REFERENCEOACで非公開S3を使う静的サイト！CloudFront Functionでindex.htmlへ変換IT自習室↗

本番環境では関数を分ける

STG用の関数をそのまま本番へ設定すると、本番サイトにも認証画面が表示されます。

本番では、Basic認証を含まないURL書き換え専用の関数を作り、関連付ける関数を切り替えるのがおすすめです。

まとめ

今回は、CloudFront Functionsを使って、STG環境へBasic認証を設定する方法を紹介しました。

関数をLIVEへ発行することと、必要な全てのビヘイビアへ関連付けることがポイントです。

公開前のサイトを一時的に制限したい場合は、ぜひ参考にしてください。