【CloudFront】Basic認証を実装したい

CloudFrontにBasic認証をかけたーーい！

ということで、

S3がオリジンのCloudFrontで公開しているWEBアプリにBasic認証をかけます。

Terraformを使って設定していきます

・バージョン

$ terraform providers -version
Terraform v1.4.2
on linux_amd64
+ provider registry.terraform.io/hashicorp/aws v4.67.0

$ terraform providers -version

Terraform v1.4.2

on linux_amd64

+ provider registry.terraform.io/hashicorp/aws v4.67.0

実装方針
CloudFront Functions とは？
CloudFront Functions の料金
実装
動作確認
参考記事

実装方針

CloudFront FunctionsでBasic認証のパスワードをかける | DevelopersIO

CloudFrontで公開しているWebに対して、Basic認証をかける方法を紹介します。 Lambda Edgeを使う方法や、Origin側で認証する方法などありますが、ここでは一番手軽な CloudFront Functions を使った方法を紹介します。

上記を見ると、CloudFront Functionsで簡単に実装できるみたいです。

CloudFront Functions とは？

まずは、デフォルトディレクトリインデックスの実装に必要なCloudFront Functionsについて。

特定のイベントタイプに対して、事前に定義しているJavaScriptの関数を実行できる機能のこと。

イベントタイプには２種類あり、

ビューワーリクエスト：ビューワーからリクエストを受信したとき
ビューワーレスポンス：ビューワーにレスポンスを返す前

リクエスト(レスポンス)ヘッダーの操作やリダイレクト処理などを実現できます。

公式ドキュメントは↓です。目を通してみるといいと思います

CloudFront Functions を使用してエッジでカスタマイズする - Amazon CloudFront

CloudFront Functions を使用して、Amazon CloudFront ディストリビューションをカスタマイズします。

CloudFront Functions の料金

公式サイトより、

100 万件の呼び出しあたり 0.10 USD です (1 回の呼び出しごとに 0.0000001 USD)。

また、無料枠として

各月 2,000,000 件の CloudFront Function 呼び出し

が設けられています。

実装

事前準備

Basic認証では、

ブラウザから、ユーザ名とパスワードをコロン “:” でつなぎ Base64でエンコードして送信します。

Cloudfront Fuctions で送信された文字列（認証情報）が正しいか判断します。

そのため、Base64でエンコードされた文字列を用意しておき、JavaScript内で判定する際に使用します。

今回は、

ユーザ名：hisui

パスワード：hisuipw

具体的には下記コマンドでエンコードされた文字列を用意します

$ echo -n "hisui:hisuipw" | base64
aGlzdWk6aGlzdWlwdw==

1 2	$ echo -n "hisui:hisuipw" \| base64 aGlzdWk6aGlzdWlwdw==

この文字列を次のCloudfront Fuctions で使用します

CloudFront Functions

CloudFront Functions で実行する関数はこちらのコードをそのまま使います

jsファイルを作成し、tfファイルから参照するようにします。

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

  // echo -n user:pass | base64
  var authString = "Basic aGlzdWk6aGlzdWlwdw==";

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

  return request;
}

function handler(event) {

var request = event.request;

var headers = request.headers;

// echo -n user:pass | base64

var authString = "Basic aGlzdWk6aGlzdWlwdw==";

if (

typeof headers.authorization === "undefined" ||

headers.authorization.value !== authString

) {

return {

statusCode: 401,

statusDescription: "Unauthorized",

headers: { "www-authenticate": { value: "Basic" } }

};

}

return request;

}

authString にユーザー名, パスワードをbase64でエンコードしたものを指定し、

認証情報を送信していないもしくは、誤った認証情報を送信しているときに401を返します。

ヘッダーの”www-authenticate” に”Basic”を指定し、Basic認証を使うとブラウザに伝えます

つまり、

認証情報を送信していない初めのリクエストに対して401とBasic認証を使うことを伝えます。

２回目以降は送られてきた認証情報を判定し、

・あっている場合は、認証を通し、

・空欄もしくは間違っている場合は再度Basic認証でユーザー名とパスワードをききます

詳しく知りたい方は下記2つをご覧ください

「HTTP」の仕組みをおさらいしよう（その4）

TCP/IPの仕組みを、専用ツールを使って学習していく本連載。第5回では「認証」の仕組みについて、実際のリクエスト／レスポンスを確認しながら学びます。

HTTP認証概要 - Qiita

今更ながら、HTTPで用いられる認証方式の概要をまとめる。一般的な HTTP 認証の流れサーバーは１回目のクライアントからのリクエストに対して、 401 (Unauthorized) レスポンスを返却し、 WWW-Auth...

Terraform

resource "aws_cloudfront_distribution" "main" {

...

  default_cache_behavior {
    
   ...

    # CloudFront Functionsの紐づけ
    function_association {
      event_type   = "viewer-request"
      function_arn = aws_cloudfront_function.main.arn
    }
  }

  ...
  
}

...

# CloudFront Functions
resource "aws_cloudfront_function" "main" {
  name    = "function"
  runtime = "cloudfront-js-1.0"
  comment = "Basic認証"
  publish = true
  code    = file("./CloudFront_Functions/function.js")
}

resource "aws_cloudfront_distribution" "main" {

...

default_cache_behavior {

...

# CloudFront Functionsの紐づけ

function_association {

event_type = "viewer-request"

function_arn = aws_cloudfront_function.main.arn

}

...

}

...

# CloudFront Functions

resource "aws_cloudfront_function" "main" {

name = "function"

runtime = "cloudfront-js-1.0"

comment = "Basic認証"

publish = true

code = file("./CloudFront_Functions/function.js")

}

aws_cloudfront_distribution > default_cache_behavior ブロック内で
CloudFront Functionsを紐づけていきます

プロパティ	説明
event_type	どのイベントタイプで実行するか viewer-request に対して関数を実行します
function_arn	後ほど定義するCloudFront Functions のARNを指定します

aws_cloudfront_function にて、CloudFront Functions を定義します。

プロパティ	説明
name ※	CloudFront Functions の名前
runtime ※	ランタイム。2023/07現在、cloudfront-js-1.0 のみ指定可能
comment	コメント。
publish	関数をデプロイするかどうか。デフォルトはtrue。テストなどをしたい方はデプロイしない(false) ことも可能。
code ※	関数のソースコード。先ほど作成したjsファイルを相対パスで指定。

※ は必須項目

plan , apply

$ terraform plan
$ terraform apply -auto-approve

1 2	$ terraform plan $ terraform apply -auto-approve

ダウンタイムはなかったと思います。。。

動作確認

CloudFront のドメインにアクセスして、下記のようにBasic認証が表示されます。

ここで、

ユーザ名：hisui

パスワード：hisuipw

を入力し、認証できればOKです！

参考記事

CloudFront FunctionsでBasic認証のパスワードをかける | DevelopersIO

Basic認証 - Wikipedia

Terraform Registry

Terraform Registry