如何向用户隐藏javascript本地本机应用程序中的S3键？

如何解决如何向用户隐藏javascript本地本机应用程序中的S3键？

我有一个应用程序可以将文件上传到S3存储桶，这是其功能的一部分。我已经使该应用程序正常工作，但是存储桶的密钥位于应用程序文件中，因此，只要有足够的动力，用户就可以看到这些密钥。我已经将密钥配置为具有有限的权限，但是我该怎么做以防止用户完全看到密钥或至少混淆密钥呢？

解决方法

如果应用程序的前端需要读取它们，您几乎无法对用户隐藏它们。

根据您的用例，您可以查看几种情况。

首先，您可以将永久凭证替换为临时凭证，为此，您可以使用服务AWS Cognito。

使用此方法，您可以基于以下一种方法generate temporary credentials：

• 如果用户必须登录，则可以将其附加到将为其生成临时证书的Cognito用户。
• Cognito还支持匿名用户（来宾用户），该用户还授予临时凭据。

如果应用程序主要是基于写入的，则可以采用的另一种方法是使用预签名的S3 URL上载对象。这会将API网关与Lambda结合起来为您生成此消息，因此前端不会存储任何凭据。请查看this article，以获取有关如何处理该方法的更多信息。

,

您需要使用预签名的URL来提供上载功能而不暴露密钥。假设您有一个后端，例如Lambda函数，其后端具有允许上传对象的键。

您需要在后端可以找到该应用程序的端点。然后生成一个签名的URL：

const url = s3.createPresignedPost({
    Bucket: <bucket>,Fields: {
        key: <filename>,},});

在应用程序方面，从后端获取此签名的URL（我不知道React本机，此代码是为浏览器编写的，但是如果需要，可以很容易地将其修改为其他环境）：

const url = await (await fetch("<backend url>")).json();

使用文件创建表单：

const formData = new FormData();
formData.append("Content-Type",file.type);
Object.entries(data.fields).forEach(([k,v]) => {
    formData.append(k,v);
});
formData.append("file",file); // must be the last one

然后发送文件：

await fetch(data.url,{
    method: "POST",body: formData,});

您可以设置很多细微的东西来确保它的安全性。有关更多信息和示例代码，请参见this article。