在项目根目录中使用 .env 的 REACTJS 中的环境变量有多安全？

Question

我正在使用 REACT 18.2，并且我有一个包含 REACT_APP_API_URL 和 REACT_APP_API_SECRET 的 .env 文件，因此我可以在 API 调用期间使用它们。

在我执行npm run build并运行应用程序后，变量process.env.REACT_APP_API_URL在 JS API 调用中成功地在应用程序中使用。

我尝试取出该process.env.REACT_APP_API_URL代码并在浏览器控制台中运行，但出现了 null 。我还搜索了源文件，也没有找到该 .env 变量的实际值。

所以我想问题是，现在是否可以将秘密变量存储在项目的根 .env 文件中，而不存在在用户可访问的源文件中可用的风险。如果仍然存在问题，如何在浏览器检查中找到该信息？

注意：我的 package.json 中有以下包，但不导入它们或设置配置文件。

“webpack”：“^ 5.64.4”，“webpack-dev-server”：“^ 4.6.0”，“webpack-manifest-plugin”：“^ 4.0.2”，“workbox-webpack-plugin”：“ ^6.4.1", "dotenv": "^10.0.0", "dotenv-expand": "^5.1.0",

Answer 1

如果应用程序在前端运行，并且前端需要 才能process.env.REACT_APP_API_URL运行，则无法对其保密。任何有兴趣的人都可以轻松访问在前端运行的任何内容，只要他们足够关心打开开发工具并浏览您的代码。绝对对客户保密的唯一方法就是从一开始就不要将其发送给他们。例如，在某些情况下，您可以通过让客户端向您的后端发出请求，并向其他 API 发出请求来调用您的后端，然后将响应回显给客户端来保密。

如果仍然存在问题，如何在浏览器检查中找到该信息？

通过打开浏览器开发工具，转到源代码，然后浏览各种脚本。