如何在 Docker 上部署的 React JS 应用程序中隐藏 API 密钥和机密

Question

我希望在 React 应用最终构建中不向最终用户显示密钥和机密。我找到了建议在 docker 的环境变量文件中保密的方法。 以下是到目前为止不起作用的代码。 REACT_APP_SOME_API 在 React 中不可访问，我也不确定是否使用此方法，秘密将在我不想要的最终构建中可见。

React 中的 Package.json：-

"scripts": {
     "start": "rm -rf dist && webpack-dev-server --mode development --open --hot --port 8090",
     "docker": "rm -rf dist && webpack --mode production && make docker-run",
     "docker-push": "rm -rf dist && webpack --mode production && make docker-push --"
 },

生成文件：-

docker:
    docker build -t app .

docker-run: docker
    docker run -it --env-file ./config.env -p "80:80" app

docker-push: TAG ?= latest
docker-push: docker
    docker tag $(NAME) $(DOCKER_REPO):$(TAG)
    docker push $(DOCKER_REPO):$(TAG)

config.env:-

REACT_APP_SOME_API=This-should-be-accessible-in-react-app

React 应用中的 App.js：-

return(
    <>{process.env.REACT_APP_SOME_API}< />//This outputs undefined if console.log
);

Answer 1

您一开始就不应该将 API 密钥放在客户端应用程序中。 API 密钥用于服务器到服务器的通信。如果有一些秘密，您可以在用户作为令牌登录时将其存储在会话存储中。

Answer 2

如React documentation React 应用程序没有隐藏代码。您必须为它编写一个后端（所有隐藏部分都在其中），它提供您的 React 应用程序可以查询的公共接口。 你可以尝试混淆代码，但你不能隐藏它。

这就是为什么某些 API 要求您还为其提供域的原因，因此它提供了另一层限制，即人们可以在何处使用您的 API 密钥，即使在发布时也是如此。

Answer 3

如果您的 React 应用程序使用了某些东西，最终用户始终可以访问它。即使谈论编译为汇编的程序，它们仍然可以被反编译。

根据经验，不要公开不应公开给最终用户的 API 密钥。

Answer 4

在源目录中为不同的环境创建文件，如下所示：

• env.dev
• env.production

在您的环境文件中定义不同的 Key，例如：

REACT_APP_SOME_API="http://test.com"

在运行时运行命令从不同文件中读取密钥：

"start": "sh -ac '. $(pwd)/env.development; rm -rf dist && webpack-dev-server --mode development --open --hot --port 8090'"

您可以通过以下方式访问应用程序中的密钥

process.env.REACT_APP_SOME_API

希望对你有帮助。