如何停止在浏览器的开发者工具中暴露 react 的源代码？答案

【问题标题】：How to stop exposing source code of react in developer tools of browser?如何停止在浏览器的开发者工具中暴露 react 的源代码？
【发布时间】：2019-11-21 07:01:48
【问题描述】：

我正在用 ASP.NET Core 和 React 开发项目。在测试中，我遇到了一个大的安全问题。 react 的源文件在谷歌开发者工具中暴露。我试过to remove webpack source maps 但那东西对我不起作用，原因是他们没有提到我们需要在哪个 webpack 文件夹中进行更改，因为有 6 个文件夹包含 webpack。我是这个堆栈的新手，不知道如何处理这个缺陷。我该如何解决这个问题？

【问题讨论】：

所有客户端代码都暴露了。就这样对待它，没有任何补救办法。在服务器端保守任何秘密。
好吧，你不能只是从浏览器中删除代码，浏览器需要代码在那里。您需要修改、缩小和捆绑您的代码。正如@Amadan 所说，任何秘密都应该在服务器上。
@Baruch：修改、缩小和捆绑可以反转（局部变量名称除外）。不应该依赖security through obscurity。任何有适度决心和能力的人都不会被缩小打败。
@Amadan 是的，客户端代码被公开，但许多逻辑驻留在客户端代码中，包括有关 cookie 的信息、存储在本地存储中的值以及这些值如何映射的逻辑也驻留在该代码中并公开完整文件将是很大的威胁
然后重新考虑要放入cookies和localsorage的内容，并将逻辑移至服务器。 没有办法来保护客户端信息。你的浏览器知道的一切，浏览器的用户也可以知道。

标签： reactjs asp.net-core google-developer-tools

【解决方案1】：

它非常容易并且可以隐藏在开发人员工具中暴露给最终用户的完整源代码。您需要从ClientApp 文件夹更新package.json 文件。

更新前

    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",    //UPDATE THIS LINE
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
    }

你需要使用下面的代码而不是上面的代码：

更新后

    "scripts": {
    "start": "react-scripts start",
    "build": "rimraf ./build && react-scripts build && rimraf ./build/**/*.map",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
    }

以上代码对我有用。这个thread 帮助我实现了我的目标。有关更多详细信息，您也可以查看。

【讨论】：

【解决方案2】：

我遇到了同样的问题。这就是我修复它的方法。在src 文件夹中创建一个名为.env 的文件，然后添加此代码GENERATE_SOURCEMAP=false。然后运行npm run build 或yarn run build。这解决了我的问题

【讨论】：

【解决方案3】：

您永远无法在浏览器上隐藏您的代码。您能做的最好的事情就是混淆您的代码。这是一个非常有用的视频，可以解释您的担忧：https://www.youtube.com/watch?v=hOtZhNb4TKg
另外，将此作为您的参考：https://reactjs.org/docs/optimizing-performance.html#use-the-production-build

上述视频的关键在于将您的业务逻辑和机密保存在始终安全的服务器上。

【讨论】：

感谢您提供视频和链接。我看过那个视频，它说我要问的是不可能的。该视频所说的最好将密码保存在服务器端。我也会检查该文档。