AWSでBasic認証をかけるには？CloudFront編　～100本ノックしてみたい中堅エンジニア【AWS】～ 7/100

Posted at 2024-09-19

はじめに

前回の記事では、AWS WAFによるBasic認証を行いました。
今回は、CloudFront + S3バケットで構成されるフロントエンドに対して、CloudFront FunctionsによってBasic認証を行いたいと思います。

その前に、CloudFront Functionsってなんだろう？って話なんですが、ユーザに近い場所で任意の関数(コード)を実行できる機能って感じです。

※CloudFrontとS3バケットは既に作成済みの前提で話を進めます

CloudFrontにBasic認証をかける方法としては、他にも以下があります。

Lambda@Edge(CloudFront + Lambda)
AWS WAF

Lambda@EdgeとCloudFront Functionsの違いは、こちらの記事がわかりやすいと思います

アクセスしてみる(Basic認証設定前)

まず、Basic認証設定前にアクセスすると、まだ何も制限してないためHelloと表示するだけの画面が表示されます

Basic認証の設定

関数の作成

では、CloudFront Functionsを作っていきます
左メニューの関数から関数を作成をクリックします

名前は任意の関数名にします。今回はbasic-authenticationとでもしておきます
Runtimeに今回はcloudfront-js-2.0を選択します

関数コードの実装

Basic認証用に以下のコードを記載し、変更を保存をクリックします。
処理としては

ユーザ名がhoge、パスワードがhugaのBasic認証をかける
一致しない場合は、401エラーを返す
になります

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

  // echo -n hoge:huga | base64
  var authString = 'Basic aG9nZTpodWdh';

  if (typeof headers.authorization === 'undefined' || headers.authorization.value !== authString) {
    return {
      statusCode: 401,
      statusDescription: 'Unauthorized',
      headers: { 'www-authenticate': { value: 'Basic' } },
    };
  }

  return request;
}