[DevTools] upgrade electron to latest version & security improvements (#26337)

## Summary

resolves #25667
This PR also resolves several security issues in the standalone app

## How did you test this change?

Tested locally `yarn start` in react-devtools package. Everything works
normal

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1204123419819195

Author: mondaychen

packages/react-devtools/app.html

@@ -156,28 +156,11 @@
       </div>
     </div>
     <script>
-      const fs = require('fs');
-      let options;
-      let useHttps = false;
+      // window.api is defined in preload.js
+      const {electron, readEnv, ip, getDevTools} = window.api;
+      const {options, useHttps, host, protocol, port} = readEnv();
 
-      try {
-        if (process.env.KEY && process.env.CERT) {
-          options = {
-            key: fs.readFileSync(process.env.KEY),
-            cert: fs.readFileSync(process.env.CERT)
-          };
-          useHttps = true;
-        }
-      } catch (err) {
-        console.error('Failed to process SSL options - ', err);
-        options = undefined;
-      }
-
-      const {clipboard} = require("electron");
-      const host = process.env.HOST || 'localhost';
-      const protocol = useHttps ? 'https' : 'http';
-      const port = Number(process.env.PORT || 8097);
-      const localIp = require("ip").address();
+      const localIp = ip.address();
       const defaultPort = (port === 443 && useHttps) || (port === 80 && !useHttps);
       const server = defaultPort ? `${protocol}://${host}` : `${protocol}://${host}:${port}`;
       const serverIp = defaultPort ? `${protocol}://${localIp}` : `${protocol}://${localIp}:${port}`;
@@ -193,7 +176,7 @@
           range.selectNodeContents(element);
           selection.removeAllRanges();
           selection.addRange(range);
-          clipboard.writeText(event.target.textContent);
+          electron.clipboard.writeText(event.target.textContent);
 
           const $promptDiv = $("#box-content-prompt");
           const $confirmationDiv = $("#box-content-confirmation");
@@ -221,7 +204,7 @@
         const link = $('#rn-help-link');
         link.addEventListener('click', event => {
           event.preventDefault();
-          require('electron').shell.openExternal(link.href);
+          electron.shell.openExternal(link.href);
         });
 
         const $localhost = $("#localhost");
@@ -241,17 +224,8 @@
       // Initially attach the listeners
       attachListeners();
 
-      let devtools;
-      try {
-        devtools = require("react-devtools-core/standalone").default;
-      } catch (err) {
-        alert(
-          err.toString() +
-            "\n\nDid you run `yarn` and `yarn run build` in packages/react-devtools-core?"
-        );
-      }
-      window.devtools = devtools;
-      window.server = devtools
+      window.devtools = getDevTools();
+      window.server = window.devtools
         .setContentDOMNode(document.getElementById("container"))
         .setDisconnectedCallback(attachListeners)
         .setStatusListener(function(status) {

packages/react-devtools/app.js

@@ -27,8 +27,10 @@ app.on('ready', function () {
     frame: false,
     //titleBarStyle: 'customButtonsOnHover',
     webPreferences: {
-      nodeIntegration: true,
-      nodeIntegrationInWorker: true,
+      contextIsolation: true, // protect against prototype pollution
+      enableRemoteModule: false, // turn off remote
+      sandbox: false, // allow preload script to access file system
+      preload: join(__dirname, 'preload.js'), // use a preload script to expose node globals
     },
   });
 

packages/react-devtools/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "cross-spawn": "^5.0.1",
-    "electron": "^11.1.0",
+    "electron": "^23.1.2",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
     "react-devtools-core": "4.27.2",

packages/react-devtools/preload.js

@@ -0,0 +1,41 @@
+const {clipboard, shell, contextBridge} = require('electron');
+const fs = require('fs');
+const {address} = require('ip');
+
+// Expose protected methods so that render process does not need unsafe node integration
+contextBridge.exposeInMainWorld('api', {
+  electron: {clipboard, shell},
+  ip: {address},
+  getDevTools() {
+    let devtools;
+    try {
+      devtools = require('react-devtools-core/standalone').default;
+    } catch (err) {
+      alert(
+        err.toString() +
+          '\n\nDid you run `yarn` and `yarn run build` in packages/react-devtools-core?',
+      );
+    }
+    return devtools;
+  },
+  readEnv() {
+    let options;
+    let useHttps = false;
+    try {
+      if (process.env.KEY && process.env.CERT) {
+        options = {
+          key: fs.readFileSync(process.env.KEY),
+          cert: fs.readFileSync(process.env.CERT),
+        };
+        useHttps = true;
+      }
+    } catch (err) {
+      console.error('Failed to process SSL options - ', err);
+      options = undefined;
+    }
+    const host = process.env.HOST || 'localhost';
+    const protocol = useHttps ? 'https' : 'http';
+    const port = +process.env.PORT || 8097;
+    return {options, useHttps, host, protocol, port};
+  },
+});