From bd3fdfab3ffd70f367cc885d28e75f75d4366f2a Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Wed, 24 Jun 2020 17:10:51 -0700
Subject: [PATCH 01/12] Add support for SSL

Add support for SSL
---
 packages/react-devtools-core/src/standalone.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 5a6d8320e29e4..71a7d059cf14e 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -242,8 +242,10 @@ function connectToSocket(socket: WebSocket) {
   };
 }
 
-function startServer(port?: number = 8097) {
-  const httpServer = require('http').createServer();
+function startServer(port?: number = 8097, httpsOptions?: object = {}) {
+  const httpServer = httpsOptions ?
+    require('https').createServer(httpsOptions) :
+    require('http').createServer();
   const server = new Server({server: httpServer});
   let connected: WebSocket | null = null;
   server.on('connection', (socket: WebSocket) => {

From 43bf6c713b557ec2c4b2cb8adfe42a428870a244 Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Wed, 24 Jun 2020 17:23:30 -0700
Subject: [PATCH 02/12] Update README.md

---
 packages/react-devtools-core/README.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
index f26c24bd8058f..112cff1bf67fd 100644
--- a/packages/react-devtools-core/README.md
+++ b/packages/react-devtools-core/README.md
@@ -38,6 +38,22 @@ require("react-devtools-core/standalone")
   .startServer(port);
 ```
 
+Renders DevTools interface into a DOM node over SSL.
+
+```js
+const options = {
+  key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
+  cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
+};
+
+require("react-devtools-core/standalone")
+  .setContentDOMNode(document.getElementById("container"))
+  .setStatusListener(status => {
+    // This callback is optional...
+  })
+  .startServer(port, options);
+```
+
 Reference the `react-devtools` package for a complete integration example.
 
 ## Development

From f2ef6c820e62f3aff3df4227ed86389aab82611e Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Wed, 24 Jun 2020 22:45:18 -0700
Subject: [PATCH 03/12] Add SSL support to backend

Add SSL support to backend
---
 packages/react-devtools-core/src/backend.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
index ec9253b5f94ae..1e468247b830b 100644
--- a/packages/react-devtools-core/src/backend.js
+++ b/packages/react-devtools-core/src/backend.js
@@ -55,12 +55,14 @@ export function connectToDevTools(options: ?ConnectOptions) {
   const {
     host = 'localhost',
     nativeStyleEditorValidAttributes,
+    secure = false,
     port = 8097,
     websocket,
     resolveRNStyle = null,
     isAppActive = () => true,
   } = options || {};
 
+  const protocol = secure ? 'wss' : 'ws';
   let retryTimeoutID: TimeoutID | null = null;
 
   function scheduleRetry() {
@@ -80,7 +82,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
   let bridge: BackendBridge | null = null;
 
   const messageListeners = [];
-  const uri = 'ws://' + host + ':' + port;
+  const uri = protocol + '://' + host + ':' + port;
 
   // If existing websocket is passed, use it.
   // This is necessary to support our custom integrations.

From d011ce35ecbcc42f82b5e2ae727afa6abd175df7 Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Wed, 24 Jun 2020 22:55:29 -0700
Subject: [PATCH 04/12] Add SSL support

Add SSL support
---
 .../react-devtools-core/src/standalone.js     |  7 +++---
 packages/react-devtools/app.html              | 24 +++++++++++++++----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 71a7d059cf14e..6b268e96a9cf1 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -242,10 +242,11 @@ function connectToSocket(socket: WebSocket) {
   };
 }
 
-function startServer(port?: number = 8097, httpsOptions?: object = {}) {
-  const httpServer = httpsOptions ?
+function startServer(port?: number = 8097, host?: string = 'localhost', secure?: boolean = false, httpsOptions?: object) {
+  const httpServer = secure ?
     require('https').createServer(httpsOptions) :
     require('http').createServer();
+  const wsProtocol = secure ? 'wss' : 'ws';
   const server = new Server({server: httpServer});
   let connected: WebSocket | null = null;
   server.on('connection', (socket: WebSocket) => {
@@ -300,7 +301,7 @@ function startServer(port?: number = 8097, httpsOptions?: object = {}) {
         '\n;' +
         backendFile.toString() +
         '\n;' +
-        'ReactDevToolsBackend.connectToDevTools();',
+        `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', protocol: '${wsProtocol}'});`,
     );
   });
 
diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html
index 75fc137a3af0a..2af5d16a3c61a 100644
--- a/packages/react-devtools/app.html
+++ b/packages/react-devtools/app.html
@@ -146,11 +146,27 @@
     </div>
     <script>
       const {clipboard} = require("electron");
-      const port = process.env.PORT || 8097;
+      const secure = process.env.SECURE && process.env.SECURE === 'true';
+      const host = process.env.HOST || 'localhost';
+      const protocol = secure ? 'https' : 'http';
+      const port = Number(process.env.PORT || 8097);
       const localIp = require("ip").address();
+      const defaultPort = (port === 443 && secure) || (port === 80 && !secure);
+      const server = defaultPort ? `${protocol}://${host}` : `${protocol}://${host}:${port}`;
+      const serverIp = defaultPort ? `${protocol}://${localIp}` : `${protocol}://${localIp}:${port}`;
       const $ = document.querySelector.bind(document);
       const $promptDiv = $("#box-content-prompt");
       const $confirmationDiv = $("#box-content-confirmation");
+      const fs = require('fs');
+      let options = {};
+
+      if (process.env.KEY) {
+        options.key = fs.readFileSync(process.env.KEY);
+      }
+      if (process.env.CERT) {
+        options.cert = fs.readFileSync(process.env.CERT);
+      }
+
       let timeoutID;
 
       function selectAllAndCopy(event) {
@@ -184,12 +200,12 @@
       });
 
       const $localhost = $("#localhost");
-      $localhost.innerText = `<script src="http://localhost:${port}"></` + 'script>';
+      $localhost.innerText = `<script src="${server}"></` + 'script>';
       $localhost.addEventListener('click', selectAllAndCopy);
       $localhost.addEventListener('focus', selectAllAndCopy);
 
       const $byIp = $("#byip");
-      $byIp.innerText = `<script src="http://${localIp}:${port}"></` + 'script>';
+      $byIp.innerText = `<script src="${serverIp}"></` + 'script>';
       $byIp.addEventListener('click', selectAllAndCopy);
       $byIp.addEventListener('focus', selectAllAndCopy);
 
@@ -211,7 +227,7 @@
             element.innerText = status;
           }
         })
-        .startServer(port);
+        .startServer(port, host, secure, options);
     </script>
   </body>
 </html>

From 3e0d5dd159581882561ef5373e78aa1f9a2d7aa1 Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Wed, 24 Jun 2020 22:59:44 -0700
Subject: [PATCH 05/12] Update README.md

---
 packages/react-devtools-core/README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
index 112cff1bf67fd..5274811240e40 100644
--- a/packages/react-devtools-core/README.md
+++ b/packages/react-devtools-core/README.md
@@ -38,20 +38,23 @@ require("react-devtools-core/standalone")
   .startServer(port);
 ```
 
-Renders DevTools interface into a DOM node over SSL.
+Renders DevTools interface into a DOM node over SSL using a custom host name (Default is localhost).
 
 ```js
+const host = 'dev.server.com';
+const secure = true;
 const options = {
   key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
   cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
 };
 
+
 require("react-devtools-core/standalone")
   .setContentDOMNode(document.getElementById("container"))
   .setStatusListener(status => {
     // This callback is optional...
   })
-  .startServer(port, options);
+  .startServer(port, host, secure, options);
 ```
 
 Reference the `react-devtools` package for a complete integration example.

From 2951bf3874e274ace4fad594df6e699c8a8172ca Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Wed, 24 Jun 2020 23:11:12 -0700
Subject: [PATCH 06/12] Update standalone.js

---
 packages/react-devtools-core/src/standalone.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 6b268e96a9cf1..c2be16bd460da 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -246,7 +246,6 @@ function startServer(port?: number = 8097, host?: string = 'localhost', secure?:
   const httpServer = secure ?
     require('https').createServer(httpsOptions) :
     require('http').createServer();
-  const wsProtocol = secure ? 'wss' : 'ws';
   const server = new Server({server: httpServer});
   let connected: WebSocket | null = null;
   server.on('connection', (socket: WebSocket) => {
@@ -301,7 +300,7 @@ function startServer(port?: number = 8097, host?: string = 'localhost', secure?:
         '\n;' +
         backendFile.toString() +
         '\n;' +
-        `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', protocol: '${wsProtocol}'});`,
+        `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', secure: ${secure}});`,
     );
   });
 

From 6314d65606c574add1193f3063e916049a902311 Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Wed, 24 Jun 2020 23:30:39 -0700
Subject: [PATCH 07/12] Run prettier

---
 packages/react-devtools-core/src/standalone.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index c2be16bd460da..ad22edfe890ad 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -242,10 +242,15 @@ function connectToSocket(socket: WebSocket) {
   };
 }
 
-function startServer(port?: number = 8097, host?: string = 'localhost', secure?: boolean = false, httpsOptions?: object) {
-  const httpServer = secure ?
-    require('https').createServer(httpsOptions) :
-    require('http').createServer();
+function startServer(
+  port?: number = 8097,
+  host?: string = 'localhost',
+  secure?: boolean = false,
+  httpsOptions?: object,
+) {
+  const httpServer = secure
+    ? require('https').createServer(httpsOptions)
+    : require('http').createServer();
   const server = new Server({server: httpServer});
   let connected: WebSocket | null = null;
   server.on('connection', (socket: WebSocket) => {

From 0f655c748927ad48edc38f9b696d0525ca692a37 Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Wed, 24 Jun 2020 23:57:18 -0700
Subject: [PATCH 08/12] Fix flow errors

---
 packages/react-devtools-core/src/backend.js    | 1 +
 packages/react-devtools-core/src/standalone.js | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
index 1e468247b830b..f50552121c686 100644
--- a/packages/react-devtools-core/src/backend.js
+++ b/packages/react-devtools-core/src/backend.js
@@ -24,6 +24,7 @@ type ConnectOptions = {
   host?: string,
   nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,
   port?: number,
+  secure?: boolean,
   resolveRNStyle?: ResolveNativeStyle,
   isAppActive?: () => boolean,
   websocket?: ?WebSocket,
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index ad22edfe890ad..d0c295745d00b 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -242,11 +242,16 @@ function connectToSocket(socket: WebSocket) {
   };
 }
 
+type ServerOptions = {
+  key?: string,
+  cert?: string
+};
+
 function startServer(
   port?: number = 8097,
   host?: string = 'localhost',
   secure?: boolean = false,
-  httpsOptions?: object,
+  httpsOptions?: ServerOptions,
 ) {
   const httpServer = secure
     ? require('https').createServer(httpsOptions)
@@ -305,7 +310,7 @@ function startServer(
         '\n;' +
         backendFile.toString() +
         '\n;' +
-        `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', secure: ${secure}});`,
+        `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', secure: ${secure? 'true' : 'false'});`,
     );
   });
 

From 2a5c2f039f9a7216e74a20c88c9f5ff84f688bfb Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Thu, 25 Jun 2020 00:04:48 -0700
Subject: [PATCH 09/12] Update standalone.js

---
 packages/react-devtools-core/src/standalone.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index d0c295745d00b..53d3853ef01ac 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -244,7 +244,7 @@ function connectToSocket(socket: WebSocket) {
 
 type ServerOptions = {
   key?: string,
-  cert?: string
+  cert?: string,
 };
 
 function startServer(
@@ -310,7 +310,9 @@ function startServer(
         '\n;' +
         backendFile.toString() +
         '\n;' +
-        `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', secure: ${secure? 'true' : 'false'});`,
+        `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', secure: ${
+          secure ? 'true' : 'false'
+        });`,
     );
   });
 

From 6946b0c15b6441c66120c5d3df2c752546e8791b Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Fri, 26 Jun 2020 12:09:49 -0700
Subject: [PATCH 10/12] Address review comments, add error handling, minor
 fixes

Address review comments, add error handling, minor fixes
---
 packages/react-devtools-core/README.md        |  3 +-
 packages/react-devtools-core/src/backend.js   |  6 ++--
 .../react-devtools-core/src/standalone.js     | 10 +++---
 packages/react-devtools/app.html              | 31 +++++++++++--------
 4 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
index 5274811240e40..1f36059202f61 100644
--- a/packages/react-devtools-core/README.md
+++ b/packages/react-devtools-core/README.md
@@ -42,7 +42,6 @@ Renders DevTools interface into a DOM node over SSL using a custom host name (De
 
 ```js
 const host = 'dev.server.com';
-const secure = true;
 const options = {
   key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
   cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
@@ -54,7 +53,7 @@ require("react-devtools-core/standalone")
   .setStatusListener(status => {
     // This callback is optional...
   })
-  .startServer(port, host, secure, options);
+  .startServer(port, host, options);
 ```
 
 Reference the `react-devtools` package for a complete integration example.
diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
index f50552121c686..6581101b5b977 100644
--- a/packages/react-devtools-core/src/backend.js
+++ b/packages/react-devtools-core/src/backend.js
@@ -24,7 +24,7 @@ type ConnectOptions = {
   host?: string,
   nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,
   port?: number,
-  secure?: boolean,
+  useHttps?: boolean,
   resolveRNStyle?: ResolveNativeStyle,
   isAppActive?: () => boolean,
   websocket?: ?WebSocket,
@@ -56,14 +56,14 @@ export function connectToDevTools(options: ?ConnectOptions) {
   const {
     host = 'localhost',
     nativeStyleEditorValidAttributes,
-    secure = false,
+    useHttps = false,
     port = 8097,
     websocket,
     resolveRNStyle = null,
     isAppActive = () => true,
   } = options || {};
 
-  const protocol = secure ? 'wss' : 'ws';
+  const protocol = useHttps ? 'wss' : 'ws';
   let retryTimeoutID: TimeoutID | null = null;
 
   function scheduleRetry() {
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 53d3853ef01ac..817b34386c205 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -250,10 +250,10 @@ type ServerOptions = {
 function startServer(
   port?: number = 8097,
   host?: string = 'localhost',
-  secure?: boolean = false,
   httpsOptions?: ServerOptions,
 ) {
-  const httpServer = secure
+  const useHttps = !!httpsOptions;
+  const httpServer = useHttps
     ? require('https').createServer(httpsOptions)
     : require('http').createServer();
   const server = new Server({server: httpServer});
@@ -310,9 +310,9 @@ function startServer(
         '\n;' +
         backendFile.toString() +
         '\n;' +
-        `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', secure: ${
-          secure ? 'true' : 'false'
-        });`,
+        `ReactDevToolsBackend.connectToDevTools({port: ${port}, host: '${host}', useHttps: ${
+          useHttps ? 'true' : 'false'
+        }});`,
     );
   });
 
diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html
index 2af5d16a3c61a..7296a3fff12a0 100644
--- a/packages/react-devtools/app.html
+++ b/packages/react-devtools/app.html
@@ -145,27 +145,32 @@
       </div>
     </div>
     <script>
+      const fs = require('fs');
+      let options = {};
+      let useHttps = false;
+
+      try {
+        if (process.env.KEY && process.env.CERT) {
+          options.key = fs.readFileSync(process.env.KEY);
+          options.cert = fs.readFileSync(process.env.CERT);
+          useHttps = true;
+        }
+      } catch (err) {
+        console.error('Failed to process SSL options - ',err);
+        options = {};
+      }
+
       const {clipboard} = require("electron");
-      const secure = process.env.SECURE && process.env.SECURE === 'true';
       const host = process.env.HOST || 'localhost';
-      const protocol = secure ? 'https' : 'http';
+      const protocol = useHttps ? 'https' : 'http';
       const port = Number(process.env.PORT || 8097);
       const localIp = require("ip").address();
-      const defaultPort = (port === 443 && secure) || (port === 80 && !secure);
+      const defaultPort = (port === 443 && useHttps) || (port === 80 && !useHttps);
       const server = defaultPort ? `${protocol}://${host}` : `${protocol}://${host}:${port}`;
       const serverIp = defaultPort ? `${protocol}://${localIp}` : `${protocol}://${localIp}:${port}`;
       const $ = document.querySelector.bind(document);
       const $promptDiv = $("#box-content-prompt");
       const $confirmationDiv = $("#box-content-confirmation");
-      const fs = require('fs');
-      let options = {};
-
-      if (process.env.KEY) {
-        options.key = fs.readFileSync(process.env.KEY);
-      }
-      if (process.env.CERT) {
-        options.cert = fs.readFileSync(process.env.CERT);
-      }
 
       let timeoutID;
 
@@ -227,7 +232,7 @@
             element.innerText = status;
           }
         })
-        .startServer(port, host, secure, options);
+        .startServer(port, host, options);
     </script>
   </body>
 </html>

From 97f474e6f7ba0083064c17df7f5ca517b06db504 Mon Sep 17 00:00:00 2001
From: Ittai Baratz <ibaratz@adobe.com>
Date: Fri, 26 Jun 2020 12:14:46 -0700
Subject: [PATCH 11/12] Enforce options undefined for http

---
 packages/react-devtools/app.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html
index 7296a3fff12a0..c822764bea5f0 100644
--- a/packages/react-devtools/app.html
+++ b/packages/react-devtools/app.html
@@ -146,7 +146,7 @@
     </div>
     <script>
       const fs = require('fs');
-      let options = {};
+      let options;
       let useHttps = false;
 
       try {
@@ -156,8 +156,8 @@
           useHttps = true;
         }
       } catch (err) {
-        console.error('Failed to process SSL options - ',err);
-        options = {};
+        console.error('Failed to process SSL options - ', err);
+        options = undefined;
       }
 
       const {clipboard} = require("electron");

From 529a9d5c288537b28c096a7de0fd73b8add1baec Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Mon, 6 Jul 2020 10:08:48 -0400
Subject: [PATCH 12/12] Added `useHttps` docs

---
 packages/react-devtools-core/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
index 1f36059202f61..9b0963de9310e 100644
--- a/packages/react-devtools-core/README.md
+++ b/packages/react-devtools-core/README.md
@@ -21,6 +21,7 @@ Be sure to run this function *before* importing e.g. `react`, `react-dom`, `reac
 The `config` object may contain:
 * `host: string` (defaults to "localhost") - Websocket will connect to this host.
 * `port: number` (defaults to `8097`) - Websocket will connect to this port.
+* `useHttps: boolean` (defaults to `false`) - Websocked should use a secure protocol (wss).
 * `websocket: Websocket` - Custom websocket to use. Overrides `host` and `port` settings if provided.
 * `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
 * `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.