如何通过 Angular 前端从私有 S3 存储桶中安全地检索资产

Question

我有一个场景，其中有一个应用程序将用户个人资料图像上传到 AWS S3 存储桶。

• 为了防止所有用户的个人资料图片（或任何其他存储桶内容） - 存储桶是私有的，因此资产 URL 不可公开访问。

• 在应用程序的 Angular 前端，我需要检索用户个人资料图像。如果 S3 存储桶可公开访问，这很简单 - 只需指向 URL。

• 由于存储桶是私有的，我想知道在前端检索这些图像的最佳方法。对于我的特定用例，我将 best 定义为安全和高效的结合。

• 出于安全考虑，显然我不想在前端客户端中硬编码 AWS 凭证。

• 通过高效，我知道我可以设置一个后端代理， 前端会调用它——这个代理会反过来， 使用 S3 进行身份验证并将请求的资产作为对前端的响应返回 - 但这会带来明显的开销。

鉴于我提供的详细信息，我想知道上述的最佳解决方案/方法是什么？

更新： 前端单独托管在它自己的 EC2 上，与 S3 在同一个 AWS 账户下。

Answer 1

我将尝试解释两种可能的方法来实现这一点。

首先，

因为您说“用户个人资料图片” - 我假设用户已登录。 因此您可以通过“web identity federation”访问 s3 文件。 你可以使用 cognito 或者你可以直接自己做

示例The sample app authenticates users using web identity federation and Facebook login -

注意 IAM 角色的资源部分

"Resource": [
    "arn:aws:s3:::YOUR_BUCKET_NAME/facebook-${graph.facebook.com:id}/*"
]

每个用户都有自己的文件夹来存放他们的文件，因此您可以安全地保存她的文件。

第二，

现在选项一不是很简单。

简单的选择是，当您需要用户的个人资料图片时，您将 API 发送到基于 Ec2 的服务器到 create a presigned URL

这里的问题是，url在你指定的时间后过期，所以每次你必须创建它并发送到浏览器。