如何对用户隐藏React网站的bundle.js或源代码文件？

Question

我有一个基于 React 的网站，带有 Django 后端，使用 Kubernetes 和 nginx 进行部署。为了管理机密，我使用了 .env 文件，将敏感信息存储为 process.env.var_name。然而，部署后，检查网站会显示整个源代码，包括秘密及其实际值，而不是 process.env.var_name。

我尝试过在.env和package.json的构建脚本中设置“GENERATE_SOURCEMAP=false”等解决方案，成功隐藏了网站的源文件，但没有隐藏sourceTab/static/js下的bundle.js文件。

我正在寻求有关如何有效保护我的秘密并向客户隐藏源代码的建议。

要求：

确保 .env 文件中存储的敏感信息不会暴露在客户端可见的源代码中。 隐藏源代码文件（包括bundle.js），防止通过检查或其他方式访问。 最大限度地减少对现有部署设置的任何性能影响或中断。

Answer 1

无法向用户隐藏（客户端）Javascript 代码。

代码在浏览器内部运行，因此必须将其下载到客户端，因此可以通过一种或另一种方式进行检查。 您可以使代码难以阅读，但您无法隐藏它。

当人们谈论存储在

.env

文件中的秘密时，他们仅在服务器端代码中使用这些秘密，而不是在客户端代码中。

如果您需要访问某些安全的API，那么您应该从某种服务器端中间件发出关键请求，该中间件具有所有必要的权限和秘密（并且其代码对客户端不可见），并从浏览器发出请求仅适用于该中间件。