Javascript 在登录之前对用户隐藏React Src

Javascript 在登录之前对用户隐藏React Src,javascript,node.js,reactjs,react-router-v4,Javascript,Node.js,Reactjs,React Router V4,因此,当我从createreact应用程序运行我的react应用程序的生产构建登录屏幕时,我注意到该应用程序的所有源代码都在static/js文件夹中可用。基本上,代码与我的ide中的代码在产品构建中看起来没有任何不同 我想知道是否有一种方法可以将其隐藏在登录屏幕后面?因此,除非登录成功,否则用户无法直接访问这些文件。我环顾四周,找不到任何有用的东西 生产版本中的js文件应该最小化,这将与IDE中的js文件有很大不同。我假设看起来“相同”的是使用开发人员工具查看源代码。解决方案是不部署源映射文件

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


我想知道是否有一种方法可以将其隐藏在登录屏幕后面?因此,除非登录成功,否则用户无法直接访问这些文件。我环顾四周,找不到任何有用的东西

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

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


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

要克服在产品版本中显示源代码的问题,请尝试使用

GENERATE_SOURCEMAP=false npm run build

您只能在用户的登录状态为true的情况下渲染主内容,否则会渲染登录屏幕。@stever,但这并不容易隐藏源代码。您必须进行某种代码拆分,然后安全地为捆绑包的相关部分提供服务。是什么导致了这个要求?@jornsharpe客户端不希望主应用程序的src在身份验证之前可见?安全问题?我建议你试着深入研究这个需求的基础。这仍然会让它显示出来,只是缩小了。。我想做的是只显示与登录屏幕相关的组件(在缩小的文件中),登录成功后,我想显示其他所有内容。