Prevent React dev tools from changing props/state

Question

Is there a way to prevent any prop/state change from front-end on production?

I tried following but it completely disables the dev tools:

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
  for (let [ key, value ] of Object.entries(
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__
  )) {
     window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] =
       typeof value === 'function' ? () => {} : null;
  }
}

Encrypt it? I mean, once stuff is on the client (e.g., browser), it's pretty much out of your hands. — Dave Newton, Apr 18 '18 at 19:21
Because you need the devtools to modify anything on the frontend... Once you have the source code served to the browser, non much can be done compadre. — WilomGfx, Apr 18 '18 at 21:37

Kyle Richardson · Answer 1 · 2018-04-18T21:35:01.773

I use the following bit of code in my Meteor application that uses React 16.3 as the UI library.

The window.__ALLOW_REACT_DEVTOOLS__ is just a flag I set in the SSR html sent from the server because this line of code needs to preclude any React code, and I need it before process.env is available in the browser. On the server I set that value to false in production.

<script>
  if (
    !window.__ALLOW_REACT_DEVTOOLS__ &&
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ &&
    typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object"
  ) {
    for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
      window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
    }
  }

  delete window.__ALLOW_REACT_DEVTOOLS__;
</script>

The key to making this work is that it is loaded BEFORE React.

This will completely disable React-Devtools. When you click on the devtools tab it will just say 'Looking for React...'.

score 0 · Answer 2 · answered Sep 28 '18 at 07:47

Okay, found a way to keep even that function from getting injected/involved.

I just changed the disabler code to this:

// disable react-dev-tools for this project

 if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
        for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
            window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
        }
    }

Prevent React dev tools from changing props/state

2 Answers2