在 CRA 中获取捆绑包后如何保留我的隐藏字段（如 api 密钥）答案

【问题标题】：How can I keep my hidden fields like api key after getting bundle in CRA在 CRA 中获取捆绑包后如何保留我的隐藏字段（如 api 密钥）
【发布时间】：2021-11-15 18:12:10
【问题描述】：

我有一个简单的界面，但我使用多个 API，所以我不想使用后端。如何在不使用后端的情况下将 my API keys 隐藏在 CRA 中。

建议为此使用环境变量，我也使用了它，如文档中所示，但这并不是我想要的。即使我使用环境变量，在“chunk.js”文件中进行简单的 CTRL + F 搜索也会显示应该保持隐藏的内容，例如我的 API 密钥。有没有办法完全防止这种情况发生？

【问题讨论】：

长话短说，如果它在前端，有人可以找到它。没有办法隐藏它。如果您有不想让其他人知道的私钥，那么您需要自己的后端。即使它只是一个超轻量级的，本质上是您的前端和您需要密钥的服务之间的代理。
我认为这是目前最有效的解决方案。

标签： javascript reactjs webpack owasp websecurity

【解决方案1】：

不，不是真的，否则他们可以使用wireshark或其他网络监控工具轻松嗅出它们。

解决这个问题的方法是制作您自己的 api，该 api 与其他 api 连接，返回所需的内容。然后他们需要为您的 api 获取一个许可证密钥，如果您希望拒绝访问您的 api 的公开交易许可证密钥，您可以从您的服务器中撤销该许可证密钥。

【讨论】：

例如，我正在使用 NASA api 来拉取当天数据的照片。不需要为此使用后端吗？或者我正在使用firebase，当我检查它时，firebase 的私钥也是可见的
@Dennis 如果您不希望公开您的 api 密钥，例如当它们不限于您的域作为来源时，那么您必须将自己的后端作为代理。
是的，我知道该怎么做。我可以使用小型快速后端服务来做到这一点，但对于像 firebase 这样的应用程序也是如此。当我在前端使用 Firebase 时，我的私钥再次暴露。
@Dennis 您还必须为此编写一个包装器，以便它与您的 api 连接，该 api 连接到 firebase。它只需要代理数据，但添加存储在服务器上的私钥。因此，“JS”会将您的 api 视为火力基地。您的 api 只会用 firebase api 的密钥替换您的 api 密钥并将其修补到 firebase，然后在返回的路上删除敏感数据，然后再将其返回到前端。

【解决方案2】：

如果你想像这样在 JS 包中使用任何 API 密钥，它将被捆绑，要么捆绑，要么不捆绑。

所以你可以：

将 API 密钥与 JS 捆绑在一起（不安全）
通过 API 端点获取 API 密钥
可以混淆客户端捆绑包中的密钥 https://github.com/anseki/gnirts ，但仍然不安全，最终有人可以解决。

【讨论】：