生产模式下禁止React Developer Tools、Redux DevTools的使用

一、React Developer Tools和Redux DevTools的使用思考

React Developer Tools、Redux DevTools 可以给开发人员在研发阶段调试程序带来极大的方便。
但是,很多人忽略了一点:上了生产环境后,把一些代码细节轻易让外部人员获取,并不是好事。

解决方案就是:生产环境下,将DevTools禁止使用。

二、 禁止React Developer Tools

以下是实现的代码

1
2
3
4
5
6
7
// 项目入口文件index.tsx
import {
disableReactDevTools
} from '@utils/js/other';
if(process.env.NODE_ENV == 'production'){
disableReactDevTools();
}
1
2
3
4
5
6
7
8
9
10
11
// @utils/js/other.ts
export const disableReactDevTools = (): void => {
const noop = (): void => undefined;
const DEV_TOOLS = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;

if (typeof DEV_TOOLS === 'object') {
for (const [key, value] of (<any>Object).entries(DEV_TOOLS)) {
DEV_TOOLS[key] = typeof value === 'function' ? noop : null;
}
}
};

禁止思路如下:

  • 在页面的React加载完成之前(所以要在入口文件提前执行),执行以下代码
1
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}

这样可以阻止devtools访问React上下文

  • 在此基础上,遍历所有window.__REACT_DEVTOOLS_GLOBAL_HOOK__下挂载的方法,将其重置为空函数。
  • 有些浏览器是访问不到windwo.__REACT_DEVTOOLS_GLOBAL_HOOK__的,所以要进行安全防护。

综合以上3点,就可以得出disableReactDevTools方法。

另外,只在生产环境禁止,则需要读取process.env.NODE_ENV的值,进行判断。符合要求,则执行disableReactDevTools方法。

三、禁止Redux DevTools

Redux DevTools的作者做得比较全面,已经给出了标准的解决方案。

具体实现步骤如下:

  • 设置'process.env.NODE_ENV': JSON.stringify('production')
  • 使用redux-devtools-extension/developmentOnly引入方法

以下是我的项目代码片断:

1
2
3
4
5
6
7
8
9
10
import {
composeWithDevTools
} from 'redux-devtools-extension/developmentOnly';

// other code...
const store = createStore(
rootReducer,
composeWithDevTools(middlewareEnhancer)
);
// other code...

四、不好的真实项目例子

腾讯云-华佗诊断分析系统

五、参考

[1] Flag to disable devtools
[2] Redux DevTools的README.md