如何在Chrome、火狐、Edge等浏览器中隐藏React应用的源代码？

需要首先明确：前端代码最终都需要下载到客户端浏览器执行，不存在100%完全隐藏、完全无法被逆向的方案，以下方案可以大幅提高代码被获取、被逆向的成本，满足绝大多数场景的防护需求。

1. 关闭生产环境Source Map #

你在浏览器中能看到完整可读的React源码，90%以上的情况是生产打包时附带了Source Map文件导致的，关闭即可解决绝大多数问题，不同项目的配置方式如下：

• Create React App 项目：打包时执行 GENERATE_SOURCEMAP=false npm run build，或在项目根目录.env文件中添加配置 GENERATE_SOURCEMAP=false，打包后不会生成.map后缀的Source Map文件。
• Vite 项目：在 vite.config.js/vite.config.ts 中添加配置：

  export default defineConfig({
    build: {
      sourcemap: false
    }
  })
  

• Next.js 项目：在 next.config.js 中添加配置 productionBrowserSourceMaps: false。

2. 额外对代码做混淆处理 #

在默认的打包压缩基础上，可以添加代码混淆工具进一步降低代码可读性，提高逆向门槛：

• 可以使用 javascript-obfuscator 工具对打包后的JS代码做字符串加密、控制流扁平化、死代码注入等处理，webpack项目可以安装 webpack-obfuscator 插件集成到打包流程，Vite项目可以使用 vite-plugin-obfuscator 插件。

注意：过度混淆会导致代码运行性能下降，建议只对核心业务逻辑部分做混淆，不要全局全量开启混淆。

3. 核心逻辑迁移到后端实现 #

这是唯一能保证核心逻辑完全不泄露的方案：所有涉密的核心规则、算法、付费校验、权限判断等逻辑，不要放在前端实现，全部迁移到后端服务，前端仅负责请求接口获取结果后渲染页面即可。

4. 辅助防护手段（仅防普通用户） #

可以添加基础的拦截规则，防止普通用户轻易查看代码，该手段对有开发基础的人员无效：

• 通过JS监听 contextmenu、keydown 事件，拦截右键菜单、F12、Ctrl+Shift+I、Ctrl+U等打开开发者工具、查看页面源码的快捷键。

内容的提问来源于stack exchange，提问作者Ranjit Das 1620631642