Merge pull request #32 from nickhealy/preload

Refactor HTTP2 portion of HTTP Controller to disallow Node Integration

Author: StephWood

httpMainController.js

@@ -45,6 +45,9 @@ const protoParserFunc = require("./src/client/protoParser.js");
 
 // require menu file
 require("./menu/mainMenu");
+// require http controller file
+require('./httpMainController.js')();
+
 
 // configure logging
 // autoUpdater.logger = log;
@@ -664,3 +667,6 @@ ipcMain.on("open-gql", (event, args) => {
       });
   }
 });
+
+// export main window so we can access ipcMain from other files
+module.exports = mainWindow; 

main.js

@@ -1,16 +1,17 @@
 const { ipcRenderer, contextBridge } = require("electron");
 
 contextBridge.exposeInMainWorld("api", {
-  send: (channel, data) => {
+  send: (channel, ...data) => {
     // allowlist channels
     const allowedChannels = [
       "toMain",
       "confirm-clear-history",
       "import-proto",
       "quit-and-install",
+      'open-http',
     ];
     if (allowedChannels.includes(channel)) {
-      ipcRenderer.send(channel, data);
+      ipcRenderer.send(channel, ...data);
     }
   },
   receive: (channel, cb) => {
@@ -22,6 +23,7 @@ contextBridge.exposeInMainWorld("api", {
       "clear-history-response",
       "proto-info",
       "message",
+      'reqResUpdate'
     ];
     if (allowedChannels.includes(channel)) {
       ipcRenderer.on(channel, (event, ...args) => cb(...args));

package-lock.json

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import "../../../assets/style/App.scss";
 const { api } = window;
-// import ContentsContainer from './ContentsContainer.jsx';
+import ContentsContainer from './ContentsContainer.jsx';
 // import ReqResCtrl from '../../controllers/reqResController';
 import SidebarContainer from "./SidebarContainer.jsx";
 import UpdatePopUpContainer from "./UpdatePopUpContainer.jsx";
@@ -56,7 +56,7 @@ class App extends Component {
       <div id="app">
         <UpdatePopUpContainer />
         <SidebarContainer />
-        {/* <ContentsContainer /> */}
+        <ContentsContainer />
       </div>
     );
   }

preload.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import GraphContainer from './GraphContainer.jsx';
+// import GraphContainer from './GraphContainer.jsx';
 import ReqResContainer from './ReqResContainer.jsx';
 import NavBarContainer from './NavBarContainer.jsx';
 
@@ -12,7 +12,7 @@ class Contents extends Component {
   render() {
     return(
       <div className={'contents'}>
-        <GraphContainer/>
+        {/* <GraphContainer/> */}
         <NavBarContainer/>
         <ReqResContainer/>
       </div>

src/client/components/containers/App.jsx

@@ -77,6 +77,7 @@ const httpController = {
         clearInterval(interval);
         if (foundHTTP2Connection.status === "initialized") {
           reqResObj.connection = "error";
+          // LISTEN FOR ERROR EVENTS FROM MAIN PROCESS HERE
           store.default.dispatch(actions.reqResUpdate(reqResObj));
         }
       }, 10000);
@@ -141,7 +142,8 @@ const httpController = {
     reqResObj.connection = "pending";
     reqResObj.timeSent = Date.now();
     store.default.dispatch(actions.reqResUpdate(reqResObj));
-
+  
+    // format headers in chosen reqResObj so we can add them to our request
     const formattedHeaders = {};
     reqResObj.request.headers.forEach((head) => {
       formattedHeaders[head.key] = head.value;
@@ -150,15 +152,11 @@ const httpController = {
 
     // initiate request
     const reqStream = client.request(formattedHeaders, {
+      // do not immediately close the *writable* side of the http2 stream (i.e. what the request sends over), in case we are using a request method that sends a payload body
       endStream: false,
     });
 
-    console.log("reqStream at THIS moment : ", {
-      ...reqStream,
-    });
-
-    // endStream false means we can continue to send more data, which we would for a body;
-    // Send body depending on method;
+    // we can now close the writable side of our stream, either sending our request body or not, depending on our method
     if (
       reqResObj.request.method !== "GET" &&
       reqResObj.request.method !== "HEAD"
@@ -169,10 +167,11 @@ const httpController = {
       reqStream.end();
     }
 
-    console.log("reqStream at THIS moment : ", {
-      ...reqStream,
-    });
+    // console.log("reqStream at THIS moment : ", {
+    //   ...reqStream,
+    // });
 
+    // create an object that represents our open connection.
     const openConnectionObj = {
       stream: reqStream,
       protocol: "HTTP2",
@@ -185,11 +184,14 @@ const httpController = {
       "   openConnectionObj : ",
       JSON.parse(JSON.stringify(openConnectionObj))
     );
+
+    // this is the connection array that was passed into these controller functions from reqResController.js
     connectionArray.push(openConnectionObj);
 
     let isSSE;
 
     reqStream.on("response", (headers, flags) => {
+      // first argumnet of callback to response listener in ClientHttp2Stream is an object containing the receieved HTTP/2 Headers Object, as well as the flags associated with those headers
       isSSE = headers["content-type"].includes("stream");
 
       if (isSSE) {
@@ -201,24 +203,28 @@ const httpController = {
       }
       reqResObj.isHTTP2 = true;
       reqResObj.timeReceived = Date.now();
+      console.log('this is the time inside the response event listener : ', Date.now())
       reqResObj.response.headers = headers;
       // reqResObj.response.events = []; // passing empty array to handleSingleEvent
       // below instead of running this line. This invocation is different from
       // when it is run below to Check if the URL provided is a stream (near line 327)
 
       // if cookies exists, parse the cookie(s)
       if (setCookie.parse(headers["set-cookie"])) {
+        console.log('made it into cookies')
         reqResObj.response.cookies = this.cookieFormatter(
           setCookie.parse(headers["set-cookie"])
         );
         store.default.dispatch(actions.reqResUpdate(reqResObj));
+        // RECEIVE A "RESPONSE EVENT"
         this.handleSingleEvent([], reqResObj, headers);
       }
     });
 
     reqStream.setEncoding("utf8");
     let data = "";
     reqStream.on("data", (chunk) => {
+      console.log('is this a server sent event? ', isSSE)
       data += chunk;
       if (isSSE) {
         let couldBeEvents = true;
@@ -252,6 +258,7 @@ const httpController = {
     reqStream.on("end", () => {
       if (isSSE) {
         const receivedEventFields = this.parseSSEFields(data);
+        console.log('SSE triggered')
         receivedEventFields.timeReceived = Date.now();
         reqResObj.connection = "closed";
         reqResObj.response.events.push(receivedEventFields);
@@ -399,6 +406,8 @@ const httpController = {
     newObj.connection = "closed";
     newObj.connectionType = "plain";
     newObj.timeReceived = Date.now();
+    console.log('Date.now() inside handleSingleEvent : ', Date.now())
+    console.log('this is what was added : ', newObj.timeReceived)
     newObj.response.events.push(response);
     store.default.dispatch(actions.reqResUpdate(newObj));
   },