如何在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应用程序没有隐藏，code.You必须为它编写一个后端(所有隐藏部分都在那里)，它提供了React应用程序可以查询的公共接口。您可以尝试混淆代码，但不能将其隐藏。

这就是为什么有些API还要求你提供一个域，所以它对人们可以在哪里使用你的API密钥提供了另一层限制，即使在发布的时候也是如此。

Answer 3

如果您的react应用程序使用了某些内容，则最终用户始终可以访问它。即使在讨论编译成汇编的程序时，它们仍然可以反编译。

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