如何向用戶隱藏 javascript（本機反應）應用程序中的 S3 密鑰？

Question

我有一個應用程序可以將文件上傳到 S3 存儲桶作為其功能的一部分。 我已經讓應用程序正常工作，但存儲桶的密鑰在應用程序文件中，因此如果有足夠的動力，用戶可以只看到密鑰。 我已經將密鑰配置為具有有限的權限，但我該怎么做才能防止用戶完全看到密鑰或至少混淆它們？

Answer 1

如果您的應用程序的前端需要讀取它們，您幾乎無法對用戶隱藏它們。

根據您的用例，您可以查看一些場景。

首先，您可以使用臨時憑證替換永久憑證，為此您可以使用AWS Cognito服務。

通過使用它，您可以基於以下方法之一生成臨時憑證：

• 如果用戶必須登錄，他們可以附加到一個 cognito 用戶，該用戶將為他們生成臨時憑據。
• Cognito 還支持匿名用戶（訪客用戶），該用戶也授予臨時憑證。

如果應用程序主要基於編寫，您可以采用的另一種方法是使用預簽名的 S3 URL 上傳對象。 這會將 API 網關與 Lambda 結合起來為您生成它，因此不會在前端存儲任何憑據。 有關如何處理該方法的更多信息，請查看本文。

Answer 2

您需要預先簽名的 URL 來提供上傳功能而不暴露密鑰。 假設您有一個后端，例如 Lambda 函數，它具有允許上傳對象的密鑰。

您需要一個應用程序可以訪問的后端端點。 然后生成一個簽名的 URL：

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

在應用程序方面，從后端獲取此簽名 URL（我不了解 React Native，此代碼是為瀏覽器編寫的，但如果需要，可以輕松將其修改為其他環境）：

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,
});

您可以設置許多微妙的東西來確保它的安全。 有關更多信息和示例代碼，請參閱本文。