javascript - 对用户隐藏 React Src 直到登录

Question

因此，当我从 create-react-app 运行我的 react 应用程序的生产构建的登录屏幕时，我注意到该应用程序的所有源代码都在 static/js 文件夹中可用。基本上，在生产版本中，代码看起来与我 ide 中的代码没有任何不同。

我想知道是否有办法将其隐藏在登录屏幕后面？这样用户就不能直接访问这些文件，除非登录成功。我环顾四周，找不到任何有用的东西。

标签： javascriptnode.jsreactjsreact-router-v4

Answer 1

应该最小化生产构建中的 js 文件，这看起来与您的 IDE 中的很多不同。我假设看起来“相同”的是使用开发人员工具查看源代码。解决方案是不部署源映射文件 (*.js.map)。这些文件允许开发人员工具将最小化的代码转换回其原始外观。

删除源映射会使某人难以轻松地从代码中学习，但如果有足够的动机这样做，它当然仍然可以进行逆向工程。还有一些部分根本不会被混淆，例如 API 调用的 URL，它会为某人提供更多信息，作为黑客攻击的基础。

如果您需要阻止未登录的人看到任何版本的源代码，我建议将您的应用程序构建为两个应用程序——一个只包含登录部分，一个包含其余部分。在一个应用程序中进行代码拆分不会起到作用（至少在不使用比两个应用程序选项管理起来要复杂得多的解决方案的情况下不会），因为它只会使下载过程变得懒惰而且它仍然很漂亮某人很容易确定其他文件是什么并下载它们。但是，即使将其拆分为两个应用程序，也只有在您以不同方式托管第二个应用程序时才有帮助。这将需要服务器端保护，它只为登录用户的第二个应用程序提供 JavaScript 文件。这意味着要么为第二个应用程序使用不同的子域，要么至少在具有这些保护的服务器上使用不同的目录。您将如何实现该保护取决于您的身份验证方法的细节和所使用的技术堆栈服务器。最有可能的是，这意味着使用登录过程设置的 cookie，然后在允许将 JS 文件提供给浏览器之前，由验证 cookie 的东西提供第二个应用程序的 JS 文件。