Question

我想在React应用的最终版本中保持密钥和秘密不向最终用户显示。我找到了建议在docker环境变量文件中保密的方法。以下是到目前为止无法正常运行的代码。 mysql -h mydemoserver.mysql.database.azure.com -u myadmin@mydemoserver -p在React中也无法访问，我不确定是否使用此方法，秘密在最终版本中会是我不想要的。

React中的Package.json：-

REACT_APP_SOME_API

Makefile：-

"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 --"
 },

config.env：-

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)

React应用中的App.js：-

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

Answer 1

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

这就是为什么某些API要求您还为其提供域的原因，从而为人们在哪里使用您的API密钥（即使已发布）也提供了另一层限制。

Answer 2

如果您的React应用程序使用了某些内容，则最终用户始终可以对其进行访问。即使在谈论编译为汇编的程序时，它们仍然可以反编译。

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

Answer 3

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

env.dev
环境生产

在环境文件中定义不同的密钥，例如：

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

希望有帮助。

Answer 4

您永远不应首先将API密钥放在客户端应用程序中。 API密钥是服务器到服务器通信的意思。如果有秘密，则可以在用户以令牌身份登录时将其存储在会话存储中。

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

4 个答案: