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

Question

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

Answer 1

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

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

Answer 2

它非常容易并且可以隐藏完整的源代码，这些源代码会在开发人员工具中暴露给最终用户。您需要更新 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 帮助我实现了我的目标。有关更多详细信息，您也可以查看。

Answer 3

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

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

How to stop exposing source code of react in developer tools of browser?

reactjs

asp.net-core

google-developer-tools