CloudFront Password Protect で安全なウェブサイトを構築する方法

公開: 2023-01-15

クラウド コンピューティング市場で最大の 41.5% のシェアを保持しているアマゾン ウェブ サービス (AWS) は、現在最も人気のあるクラウド コンピューティング サービスです。 これにより、企業や個人はアプリケーションやウェブサイトを Amazon のサーバーで安価にホストできます。

AWS の重要なコンポーネントの 1 つが Amazon CloudFront です。 これは、AWS がホストするウェブサイトへの訪問者の読み込み速度を最大化するために構築されたコンテンツ配信ネットワーク (CDN) です。

しかし、CloudFront を使用して、パスワードプロンプトの背後にあるウェブサイトをロックダウンできることをご存知ですか? このガイドでは、AWS CloudFront のパスワード保護機能を使用してウェブサイトを保護する方法について説明します。

  • CloudFront パスワード保護とは?
  • パスワードで CloudFront ウェブサイトを保護する方法
    • [メール保護] の使用
    • AWS S3 と Lambda を活用して Basic 認証を追加する

CloudFront パスワード保護とは?

Amazon CloudFront は、世界中のさまざまなデータセンターを通じてコン​​テンツを配信することにより、アプリケーションやウェブサイトへのユーザーのアクセスを高速化します。 ユーザーがあなたのウェブサイトにアクセスすると、そのユーザーの地理的位置に最も近いセンターからコンテンツが配信されます。 その結果、読み込み速度が速くなります。

Amazon CloudFront を使用してコンテンツを配信する限り、システムのパスワード保護機能を使用できます。 Web サイトが S3 バケットまたは EC2 インスタンス内でホストされている場合でも、システムは機能します。

これは、標準の CloudFront システムの概略図です。 これは、Web 訪問者 (右側) からのリクエストが CloudFront やその他のサブシステムを経由してオリジン (コンテンツが保存されている場所) に到達する方法を示しています。 オリジンでは、データが取得され、訪問者に返されます。

ppwp-cloudfront-password-protect-system

特に CloudFront について初めて聞いた人にとっては、混乱するかもしれません。 ただし、このチャートとその構成要素を理解することは、後のセクションで非常に重要です。

パスワードで CloudFront ウェブサイトを保護する方法

いくつかの方法を使用して、CloudFront が提供するウェブサイトにパスワード プロンプトをプッシュできます。 このガイドでは、2 つの方法を紹介します。

[メール保護] の使用

[email protected]は CloudFront の機能で、お客様の近くでカスタム コードを実行できます。 これにより、読み込みのパフォーマンスが向上します。 [email protected] の展開を選択した場合、訪問者が Web サイトのコンテンツの取得を要求するたびに、最初にこの機能を実行する必要があります。

[email protected] を変更して、ユーザーが正しいパスワードを提供した場合にのみ機能するようにすると、多かれ少なかれ Web サイトにパスワード保護層ができたことになります。

これが、この CloudFront セキュリティ メソッドの背後にある基本的な考え方です。

ppwp-ラムダエッジ

ステップ 1: [email protected] 関数をデプロイする

[email protected] は、us-east-1 リージョン (バージニア北部) にのみデプロイされる Lambda 関数です。 したがって、デプロイするには、適切なリージョンにログインする必要があります。

  1. AWS アカウントにサインインし、[関数の作成] をクリックします。
  2. 関数の名前を入力するよう求められます。 BasicAuthのような基本的なものを選択します。 ランタイムとしてNode.js 12.xを選択します。
  3. [関数の作成] ボタンを押して、作成を完了します。
  4. [ Function Code ] ウィンドウにindex.jsというファイルが表示されます。 それをクリックすると、デフォルトの Lambda コードが表示されます。 次のカスタム コードに置き換えます。
 '厳密を使用';

exports.handler = (イベント、コンテキスト、コールバック) => {

// 認証資格情報
var i = 0、authStrings = []、authCredentials = [
'user1:ユーザーパスワード',
];

// 基本認証文字列を構築します
authCredentials.forEach(要素 => {
authStrings[i] = "基本" + new Buffer(要素).toString('base64');
i++;
}
);

// リクエストとリクエストヘッダーを取得
const request = event.Records[0].cf.request;
const ヘッダー = request.headers;

// 基本認証が必要
if (typeof headers.authorization == '未定義' ||
!authStrings.includes(headers.authorization[0].value)) {

const レスポンス = {
ステータス: '401',
statusDescription: '未承認',
本文：「無許可」、
ヘッダー: {
'www-authenticate': [ {key: 'WWW-Authenticate',
値: 'Basic realm="Authentication"'} ]
}、
};

コールバック (null、応答);
}

// 認証が成功した場合、リクエスト処理を続行します
コールバック (null、要求);
};

デフォルトのログイン資格情報は、この関数の次の行に保存されます。

 'user1:ユーザーパスワード',

形式は「アカウント:パスワード」です。 好きなように変更できます。 さらに、この行を複製してログイン資格情報を追加することもできます。

5. カスタム コードが置き換えられたら、[デプロイ] をクリックしてコードをプッシュします。

6. 上部の [アクション] メニューに移動し、[新しいバージョンの公開] をクリックして、[公開] を選択します。 そこで設定を変更しないでください。

7. 画面の右上にある ARN 文字列を見つけてコピーします。 このステップは非常に重要です。 ARN 文字列は次のようになります。

 arn:aws:lambda:us-east-1:XXXXXXXXXXXX:function:basicAuth:1

ステップ 2: 信頼関係を設定する

  1. IAM コンソールに移動してログインします。
  2. [email protected] 関数の名前を入力します (前のステップのBasicAuth )。
  3. [信頼関係] タブを見つけて、[編集] をクリックします。 内部のコードを次のように置き換えます。
 {
"バージョン": "2012-10-17",
"声明"： [
{
"効果": "許可",
"主な"： {
"サービス"： [
"lambda.amazonaws.com",
「edgelambda.amazonaws.com」
]
}、
"アクション": "sts:AssumeRole"
}
]
}

4. [ Update Trust Policy ] をクリックしてプロセスを終了します。

ステップ 3: キャッシュの動作を構成する

  1. CloudFront に移動してログインします。 パスワードでロックダウンしたい CloudFront が提供する Web サイトをクリックします。
  2. [ Behaviors]を選択し、[ URL Path Pattern ] チェックボックスを見つけてオンにします。 [編集] をクリックし続けます。
  3. Lambda 関数の関連付けというセクションを見つけます。 スクロールダウン メニューを見つけて、 Select Event Type 、次にViewer Requestを検索します。 ステップ 1 でコピーした ARN 文字列を貼り付けます。
  4. はい、編集します。 この後、CloudFront が再起動して新しい設定をリロードするのに約 5 分かかります。

ステップ 4: ウェブサイトを再確認する

CloudFront の再起動後にウェブサイトにアクセスします。 ログイン プロンプトが表示されたら、成功です。

次のようになります。

ppwp-ラムダ-クラウドフロント-パスワード-保護

AWS S3 と Lambda を活用して Basic 認証を追加する

この方法では、AWS S3 と Lambda を組み合わせたアプローチを使用して、上記と同じことを達成します: ウェブサイトの基本的な認証フォームを作成します。

ステップ 1: S3 バケットを作成する

AWS S3 (Simple Storage Service) は、AWS のクラウド ストレージ ソリューションです。 あらゆる種類のデータを Amazon のサーバーに保存できます。 S3 では、「バケット」にオブジェクト (コンテンツのデータ) へのアクセスが含まれ、制御されます。

  1. AWS マネジメント コンソールからバケットを作成できます。 [ S3 ] タブをクリックしてから、[バケットを作成] をクリックします。
  2. 名前とホスティング地域を入力します (テストを容易にするために、最も近いものを選択してください)。 [作成]をクリックします。

ステップ 2: テスト ファイルを作成する

  1. スターター コードを含むシンプルなindex.htmlファイルのようなテスト ファイルを作成します。
 <h2>ハローワールド</h2>

2. [オブジェクト] メニューから、このファイルを新しく作成したバケットにアップロードできます。

ステップ 3: CloudFront ディストリビューションを生成する

  1. CloudFront のダッシュボードに移動し、 Create distributionを押します。
  2. 先ほど作成した S3 バケットとしてOrigin ドメインを選択します。 バケットのポリシーと OAI (Origin Access Identity) 設定を好みに合わせて更新します。
  3. 保護するファイルの名前 ( index.html ) をオプションの [既定のルート オブジェクト] ボックスに入力します。
  4. CloudFront ディストリビューションを作成すれば出来上がりです! これで CloudFront エンドポイントができました。

ステップ 4: カスタム Lambda 関数を作成する

  1. 次に、AWS マネジメント コンソールから [ Lambda ] タブに移動し、[関数の作成] を押します。
  2. Use a blueprintオプションを選択してCloudFrontを検索し、 CloudFront-response-generationテンプレートを選択します。 選択したら、[構成] をクリックします。
  3. 次の画面で、関数の名前 (AuthenticationTest) とロール名 (S3-Auth) を入力します。 Create the new role from AWS Policy templatesとして [ Execution Role]を選択します。
  4. 次に、作成した CloudFront エンドポイントの詳細を [配布] ボックスに貼り付けます。 [キャッシュの動作] は*のままにします。 そして最後に、 CloudFront eventでViewer requestを選択します。
  5. [デプロイ]をクリックして、新しい関数を作成します。

ステップ 5: Lambda 関数を変更する

  1. デフォルトの Lambda コードをこのカスタム コードに置き換えます。
 '厳密を使用';
exports.handler = (イベント、コンテキスト、コールバック) => {

// リクエストとリクエスト ヘッダーを取得します
const request = event.Records[0].cf.request;
const ヘッダー = request.headers;

// 認証を構成する
const authUser = 'ユーザー名';
const authPass = 'パスワード';

// 基本認証文字列を構築します
const authString = 'Basic' + new Buffer(authUser + ':' + authPass).toString('base64');

// 基本認証が必要
if (typeof headers.authorization == 'undefined' || headers.authorization[0].value != authString) {
const body = '無許可';
const レスポンス = {
ステータス: '401',
statusDescription: '未承認',
体：体、
ヘッダー: {
'www-authenticate': [{key: 'WWW-Authenticate', value:'Basic'}]
}、
};
コールバック (null、応答);
}

// 認証が通った場合はリクエスト処理を続行
コールバック (null、要求);
};

ユーザー名とパスワードは、好みに合わせて変更できます。

2. 上部のDeployをクリックしてコードを保存します。 次に、[アクション] に移動し、[email protected] にデプロイしてコードをプッシュします。

3. CloudFront エンドポイント アドレスを [配布] ボックスに貼り付け、[キャッシュ動作] を*のままにし、[ CloudFront イベント]を [ Viewer request ] として選択します。 完了すると、新しい CloudFront トリガーが作成されます。

4. 次に、デプロイして 5 分間待ちます。

5. Web サイトに再度アクセスします。 CloudFront 認証システムにより、ログイン プロンプトが表示されます。

CloudFront のパスワード保護機能を最大限に活用する

Web 管理者が Web サイトをロックダウンしたい理由はたくさんあります。 Web サイトのメンテナンス、強化されたセキュリティ、または不正アクセスに対する保護が必要である可能性があります。

いずれにせよ、このガイドが、CloudFront パスワード保護を使用してパスワード スキームを正常にデプロイするのに役立つことを願っています。

Web サイトをパスワードで保護する別の方法があります: PPWP Pro を使用します。 見てみな！