reactjs - 如何保护公共(public)存储桶中的某些文件/对象？

Question

我想创建一个公共(public)读取 aws s3 存储桶，其中一些文件的读取受到 IAM 角色的限制。

首先:

• 我使用 amplify cli 来部署我的“静态”网站。
• 该网站是一个 React 应用
• 此应用具有公共(public)页面/React 组件和管理区域
• 我想使用 aws IAM 角色限制管理区域/管理页面/管理 react 组件

更多详细信息:

React 应用程序非常大，因此我使用 asyncComponent 功能拆分组件，例如 const Dashboard = asyncComponent(() => import('./pages/Dashboard'))因此，当我构建应用程序以拥有一个大文件时，我有几个小文件。所有这些文件都位于同一个存储桶中。

现在我想构建管理页面。始终使用 asyncComponent，我们会获得“Admin”文件的集合，并且它们托管在同一个存储桶上。但出于安全原因，我想限制对具有特定 IAM 角色(例如 AdminRole)的经过身份验证的用户的访问。

我浏览了很多来自 amplify config 或来自 cloudFormation 的 AWS::S3::Bucket 的文档，我看到了不同的东西告诉我这是可能的，但我对这个文档非常迷失。

最后我问:

如何使用 IAM 角色保护 s3 存储桶中的某些文件/对象的读取访问权限？

如何在 React 应用程序中“标记”管理组件？或者通过放大？也许使用正则表达式来匹配文件？或者指定的文件夹？为了应用此读取限制。

预先感谢您的回复。

Answer 1

Amazon S3 中的内容默认为私有(private)。

因此，您希望世界上每个人都能看到的任何内容都可以通过存储桶策略(整个存储桶或部分存储桶)或通过访问控制列表( ACL)对象本身。

要提供应仅限于特定用户的内容，请利用预签名网址。这些是有时间限制的 URL，可提供对 Amazon S3 中私有(private)对象的临时访问。它们很容易生成(无需 API 调用)。

它的工作方式是:

• 用户将使用您的应用进行身份验证
• 当他们希望访问受限内容时，应用程序将确定是否允许他们访问
• 如果允许他们访问，应用程序将生成预签名 URL。这些也可以用于 <a>和<img>标签来引用页面和图像。
• 用户将像普通网络组件一样接收/查看内容
• 一旦过了过期时间，预签名网址将不再有效

参见:Share an Object with Others - Amazon Simple Storage Service

(我不是 Amplify 人员，所以我无法谈论 Amplify 如何专门生成/使用预签名 URL。)