Zenn
😺

AWS CloudFrontとS3を使用した静的サイトのbasic認証設定

2024/10/10に公開
AWS
CloudFront
cloudfrontfunction
tech

概要

CloudFrontFunctionを使用してbasic認証を適用するための設定になります。
テストアップ中でまだ未公開の場合などに利用できます。
※CloudFrontとs3を使用した、静的サイトの設定は別で手順を作成していますので、以下を参照してください
https://zenn.dev/zizo_kuma/articles/1b26776a6325c1

1. CloudFrontFunctionを作成

CloudFrontの関数画面から関数を作成ボタンをクリックし、
名前を入力し、関数を作成ボタンをクリックしてください。
構築タブでコードを入力し、変更を保存ボタンをで保存してください。
4-1

コードの内容になります。
PCのterminalで、echo -n user:pass | base64を実行して64エンコードした内容を authString の箇所に入力してください。

function handler(event) {
  var request = event.request;
  var headers = request.headers;
  var uri = request.uri;
  var newuri = uri;
  var response = {};
  var params = '';

  // echo -n user:pass | base64
  var authString = "Basic [base64でエンコードした内容を入力]";

  // ---------Basic認証チェック
  if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
  ) {
    return {
      statusCode: 401,
      statusDescription: "Unauthorized",
      headers: { "www-authenticate": { value: "Basic" } }
    };
  }

  return request;
}


発行タブで、関数を発行ボタンをクリックすると、CloudFrontで利用できるようになります。
4-2

2. CloudFrontにCloudFrontFunctionを適用する

CloudFrontのコンソールから対象のDistributionを選択し、
Behaviorsタブから、behaviorを選択、Editボタンをクリックする。
編集画面が表示されるので、関数の関連付けのエリアで、
ビューワーリクエスト項目で、CloudFrontFunctionsを選択し、先ほど作成した関数を指定し保存してください。
4-3

3. Basic認証の確認

CloudFrontのドメインにアクセスし、basic認証を求められれば完了です。
4-4

Discussion