CloudFront+S3にIP制限とBasic認証の導入を試す
準備
「パブリックアクセスをすべて ブロック」でS3バケットを作成
以下を作成して、S3にアップロード
<p>Hello, world!</p>
cloudfrontの設定がちょっと迷子なので、これを参考にする。
S3バケットアクセスの「Origin access control settings (recommended)」はつい最近追加されたぽい。今回はOAIで進める。
Cludfrontデプロイ後、[ディストリビューションドメイン名]/first.html
にアクセスできることを確認
IP制限
Cloudfront Functionを利用する。
関数を作成して、
に記載のコードをそのまま使わせてもらう(ありがたや〜)。
IP_WHITE_LIST
の部分だけ、許可したいIPに変更。
保存して、[関数の発行]をポチる。
[関連付けの追加]をポチって、「ディストリビューション」に先程作成したCloudfrontを選択、「キャッシュビヘイビア」は「Default(*)」で関連付けを追加する。
しばらくしてから、許可していないIPからのアクセスは403エラーになることを確認。許可IPからの場合はhello world
が表示されることを確認
Basic認証
$ echo -n "lightkun:cloudfront123pass" | base64
bGlnaHRrdW46Y2xvdWRmcm9udDEyM3Bhc3M=
先程と同じように関数を作成し、
のコードをありがた〜く使わせてもらう。authStringのところは↑で作成したパスワードに変更。
保存して、[関数の発行]をポチる。
[関連付けの追加]をポチって、「ディストリビューション」に先程作成したCloudfrontを選択、「キャッシュビヘイビア」は「Default(*)」で関連付けを追加する。
しばらく待っているとBasic認証のダイアログが表示される。
lightkun
とcloudfront123pass
を入力で成功し、hello world
が表示されることを確認
Attention
↑でIP制限とBasic認証を別々の関数にしたが、1つしか関連付けできないみたい(しようとすると、既に関連付けされている関数が外れる)
イベントタイプ (ビューワーリクエスト、オリジンリクエスト、オリジンレスポンス、ビューワーレスポンス) はそれぞれ、エッジ関数の関連付けを 1 つしか持てません。
なのでIP制限+Basic認証の両方を入れるには、1つの関数で書く必要がある
IP制限+Basic認証
これで完成。[許可するIP]
は自分で設定。
function handler(event) {
var request = event.request;
var clientIP = event.viewer.ip;
var headers = request.headers;
// アクセス許可するIPを設定
var IP_WHITE_LIST = [
'[許可するIP]',
];
// クライアントIPが、アクセス許可するIPに含まれていればtrueを返す
var isPermittedIp = IP_WHITE_LIST.includes(clientIP);
// 許可していないIPの場合
if (isPermittedIp === false) {
var response = {
statusCode: 403,
statusDescription: 'Forbidden',
}
// falseの場合はViewer に対してレスポンスを返す
return response;
}
// echo -n user:pass | base64
var authString = "Basic bGlnaHRrdW46Y2xvdWRmcm9udDEyM3Bhc3M=";
if (
typeof headers.authorization === "undefined" ||
headers.authorization.value !== authString
) {
return {
statusCode: 401,
statusDescription: "Unauthorized",
headers: { "www-authenticate": { value: "Basic" } }
};
}
return request;
}