CloudFront+S3構成でのBasic認証(CloudFrontFunctions版)

CloudFront + S3の構成でBasic認証を入れる作業があったので、方法を残しておきます。

やりたいこと

S3でホスティングした静的ページに対してBasic認証をしたい。
ただ、Lambda@Edgeまでは利用したくはない。
(Lambda@Edgeでも可能)

手順1

CloudFrontFunctionsを利用します。

CloudFront > 関数を選択

手順2

「関数を作成」からjsの関数を作成していく

手順3

コードを記述

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

  var authHeader = headers['authorization'];
  var validUser = 'user'; // ユーザID
  var validPass = 'password'; // パスワード
  var expected = 'Basic ' + encodeBase64(validUser + ':' + validPass);

  if (!authHeader || authHeader.value !== expected) {
    return {
      statusCode: 401,
      statusDescription: 'Unauthorized',
      headers: {
        'www-authenticate': { value: 'Basic realm="Restricted Area"' }
      }
    };
  }
}

function encodeBase64(str) {
  var base64 = '';
  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';

  for (var i = 0; i < str.length;) {
    var a = str.charCodeAt(i++) || 0;
    var b = str.charCodeAt(i++) || 0;
    var c = str.charCodeAt(i++) || 0;

    var enc1 = a >> 2;
    var enc2 = ((a & 3) << 4) | (b >> 4);
    var enc3 = ((b & 15) << 2) | (c >> 6);
    var enc4 = c & 63;

    if (!b) enc3 = enc4 = 64;
    else if (!c) enc4 = 64;

    base64 += chars.charAt(enc1) + chars.charAt(enc2) +
              chars.charAt(enc3) + chars.charAt(enc4);
  }

  return base64;
}

手順4

作成した関数を公開する

手順5

CloudFrontにの「ビヘイビア」で関連付けを行う

まとめ

今までLambda@Edgeを利用してBasic認証を追加していたが、今回はCloudFrontFunctionsを試しで利用してみました。
簡単に利用できたので、今後もどんどん使っていきたいと思います