如何使用 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。 看看这个！