如何使用 CloudFront 密碼保護構建安全網站

已發表: 2023-01-15

亞馬遜網絡服務 (AWS) 以 41.5% 的份額佔據云計算市場的最大份額，是當今最受歡迎的雲計算服務。 它允許企業和個人以低廉的價格在亞馬遜的服務器上託管他們的應用程序和網站。

AWS 的關鍵組件之一是 Amazon CloudFront。 它是一個內容分發網絡 (CDN)，旨在最大限度地提高 AWS 託管網站的任何訪問者的加載速度。

但是您知道您可以使用 CloudFront 在密碼提示後鎖定您的網站嗎？ 本指南將向您展示如何使用 AWS CloudFront 密碼保護功能來保護您的網站。

  • 什麼是 CloudFront 密碼保護？
  • 如何使用密碼保護 CloudFront 網站
    • 使用[電子郵件保護]
    • 利用 AWS S3 和 Lambda 添加基本身份驗證

什麼是 CloudFront 密碼保護？

Amazon CloudFront 通過全球各個數據中心交付內容，加快用戶對您的應用程序和網站的訪問速度。 當用戶訪問您的網站時，內容將從最接近其地理位置的中心傳送。 結果，這加快了加載速度。

只要您使用 Amazon CloudFront 分發內容，就可以使用系統的密碼保護功能。 如果您的網站託管在 S3 存儲桶或 EC2 實例中，系統仍然有效。

這是標準 CloudFront 系統的示意圖。 它描述了來自 Web 訪問者（右側）的請求如何通過 CloudFront 和其他子系統到達來源（存儲內容的位置）。 在源頭，數據被檢索並流回訪問者。

ppwp-cloudfront-密碼保護系統

它可能看起來令人困惑，尤其是對於剛剛第一次聽說 CloudFront 的人來說。 但了解此圖表及其組成部分對於後面的部分至關重要。

如何使用密碼保護 CloudFront 網站

您可以使用多種方法將密碼提示推送到您的 CloudFront 服務的網站上。 我們將在本指南中向您展示 2 種方法。

使用 [電子郵件保護]

[email protected]是 CloudFront 的一項功能，可讓您在離客戶更近的地方運行自定義代碼。 這樣，加載性能就會提高。 如果您選擇部署 [email protected]，每當訪問者請求檢索您網站的內容時，他們都必須先通過此功能。

如果您將 [email protected] 修改為僅在用戶提供正確密碼時才工作，那麼您的網站或多或少會有一個密碼保護層。

這就是此 CloudFront 安全方法背後的基本理念。

ppwp-lambda-edge

第 1 步：部署 [email protected] 函數

[email protected] 是僅在 us-east-1 區域（北弗吉尼亞）部署的 Lambda 函數。 因此，要部署它，您必須登錄到正確的區域：

  1. 登錄您的 AWS 帳戶，然後單擊創建函數。
  2. 系統將提示您輸入函數的名稱。 選擇基本的東西，比如BasicAuth 。 作為運行時，選擇Node.js 12.x 。
  3. 按創建函數按鈕完成創建。
  4. 您現在將在函數代碼窗口中看到一個名為index.js的文件。 單擊它，您將看到一個默認的 Lambda 代碼。 將其替換為此自定義代碼：
 '使用嚴格';

exports.handler = (event, context, callback) => {

// 身份驗證憑據
var i = 0, authStrings = [], authCredentials = [
'用戶1：用戶密碼'，
];

// 構造基本 Auth 字符串
authCredentials.forEach(元素 => {
authStrings[i] = "Basic " + new Buffer(element).toString('base64');
我++；
}
);

// 獲取請求和請求頭
const request = event.Records[0].cf.request;
const headers = request.headers;

// 需要基本身份驗證
if (typeof headers.authorization == 'undefined' ||
!authStrings.includes(headers.authorization[0].value)) {

常量響應 = {
狀態：'401'，
statusDescription: '未經授權',
正文：'未經授權'，
標題：{
'www-authenticate': [ {key: 'WWW-Authenticate',
價值：'基本領域=“身份驗證”'}]
},
};

回調（空，響應）；
}

// 如果認證通過則繼續請求處理
回調（空，請求）；
};

默認登錄憑據存儲在該函數的以下行中：

 '用戶1：用戶密碼'，

格式為“賬號:密碼” 。 您可以將其更改為任何您想要的。 另外，您還可以通過複製此行來添加更多登錄憑據。

5. 替換自定義代碼後，單擊部署以推送代碼。

6. 導航到頂部的“操作”菜單，單擊“發布新版本”，然後選擇“發布”。 不要更改那裡的任何設置。

7. 找到屏幕右上角的 ARN 字符串並將其複制。 這一步很關鍵。 ARN 字符串如下所示：

 arn:aws:lambda:us-east-1:XXXXXXXXXXXX:函數:basicAuth:1

第二步：建立信任關係

  1. 轉到 IAM 控制台並登錄。
  2. 輸入您的 [email protected] 函數的名稱（上一步中的BasicAuth ）。
  3. 找到Trust relationships選項卡並單擊Edit 。 用這個替換裡面的代碼：
 {
"版本": "2012-10-17",
“陳述”： [
{
"效果": "允許",
“主要的”： {
“服務”： [
“lambda.amazonaws.com”，
“edgelambda.amazonaws.com”
]
},
“行動”：“sts：AssumeRole”
}
]
}

4. 單擊更新信任策略完成該過程。

第 3 步：配置緩存行為

  1. 轉到 CloudFront 並登錄。單擊您想要使用密碼鎖定的 CloudFront 服務的網站。
  2. 選擇Behaviors ，找到URL Path Pattern複選框，然後選中它。 繼續點擊編輯。
  3. 查找名為Lambda Function Associations的部分。 查找向下滾動菜單並蒐索Select Event Type ，然後搜索Viewer Request 。 粘貼您之前在步驟 1 中復制的 ARN 字符串。
  4. 點擊是的，編輯。 此後，CloudFront 將需要大約 5 分鐘時間重新啟動並重新加載新設置。

第 4 步：重新檢查網站

CloudFront 重新啟動後訪問您的網站。 如果您收到登錄提示，那麼您就成功了。

它應該看起來像這樣：

ppwp-lambda-cloudfront-密碼保護

利用 AWS S3 和 Lambda 添加基本身份驗證

在這種方法中，我們將使用 AWS S3 和 Lambda 的組合方法來完成與我們上面所做的相同的事情：為網站製作一個基本的身份驗證表單。

第 1 步：創建 S3 存儲桶

AWS S3 (Simple Storage Service) 是 AWS 的雲存儲解決方案。 它使您能夠在亞馬遜的服務器上存儲任何類型的數據。 在 S3 中，“桶”包含並控制對對象（您的內容的數據）的訪問。

  1. 您可以通過 AWS 管理控制台創建存儲桶。 單擊S3選項卡，然後單擊創建存儲桶。
  2. 輸入名稱和託管區域（選擇離您最近的一個以便於測試）。 單擊創建，就是這樣！

第 2 步：製作測試文件

  1. 創建一個測試文件，例如一個簡單的index.html文件，其中包含起始代碼。
 <h2>你好世界</h2>

2. 您可以通過“對象”菜單將此文件上傳到新創建的存儲桶中。

第 3 步：生成 CloudFront 發行版

  1. 導航到 CloudFront 的儀表板並按下Create distribution 。
  2. 選擇Origin 域作為您剛剛創建的 S3 存儲桶。 根據您的喜好更新存儲桶的策略和 OAI（原始訪問身份）設置。
  3. 在可選的默認根對象框中輸入您希望保護的文件的名稱 ( index.html )。
  4. 創建 CloudFront 分配，瞧！ 您現在擁有一個 CloudFront 端點。

第 4 步：創建自定義 Lambda 函數

  1. 現在，從您的 AWS 管理控制台，導航到Lambda選項卡並按Create function 。
  2. 選擇使用藍圖選項並蒐索CloudFront ，然後選擇CloudFront-response-generation模板。 選擇後單擊“配置”。
  3. 在下一個屏幕中，輸入函數名稱 (AuthenticationTest) 和角色名稱 (S3-Auth)。 選擇Execution Role作為Create the new role from AWS Policy templates 。
  4. 接下來，將您剛剛創建的 CloudFront 端點的詳細信息粘貼到分發框中。 在緩存行為中，將其保留為* 。 最後，在CloudFront 事件中，選擇查看器請求。
  5. 單擊Deploy以創建新函數。

第 5 步：修改 Lambda 函數

  1. 使用此自定義代碼替換默認的 Lambda 代碼。
 '使用嚴格';
exports.handler = (event, context, callback) => {

// 獲取請求和請求頭
const request = event.Records[0].cf.request;
const headers = 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 = '未經授權';
常量響應 = {
狀態：'401'，
statusDescription: '未經授權',
身體：身體，
標題：{
'www-authenticate': [{key: 'WWW-Authenticate', value:'Basic'}]
},
};
回調（空，響應）；
}

// 如果認證通過則繼續請求處理
回調（空，請求）；
};

您可以根據自己的喜好更改用戶名和密碼。

2. 單擊頂部的部署以保存代碼。 然後，轉到Actions和Deploy to [email protected]以推送代碼。

3. 將 CloudFront 端點地址粘貼到Distribution框中，將Cache behavior保留為* ，並選擇CloudFront event作為Viewer request 。 完成後，將創建一個新的 CloudFront 觸發器。

4. 然後，部署它並等待 5 分鐘。

5. 再次訪問您的網站。 它現在應該向您顯示一個登錄提示，由 CloudFront 身份驗證系統提供。

充分利用 CloudFront 密碼保護功能

網絡管理員想要鎖定其網站的原因有很多。 這可能是因為他們的網站需要維護、增強安全性或防止未經授權的訪問。

無論如何，希望本指南可以幫助您使用 CloudFront 密碼保護成功部署密碼方案。

還有另一種密碼保護網站的方法：使用 PPWP Pro。 看看這個！