javascript - 在用户登录之前隐藏 React Src

Question

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

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

Answer 1

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

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

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