Use Protocol Interceptors to Load Captcha Page

This commit adds a protocol interceptor to load our captcha html instead of the regular html for other sites.

This commit also updates the captcha server middleware stack to better handle loading assets such as images/styling/js while still redirecting everything else to the captcha html page.

Issue: #204

packages/frontend/lib/_electron/captchaServerManager.js

@@ -4,6 +4,8 @@ const path = require('path');
 
 const express = require('express');
 const bodyParser = require('body-parser');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { protocol } = require('electron');
 
 const nebulaEnv = require('./env');
 
@@ -29,18 +31,24 @@ class CaptchaServerManager {
      */
     this._port = 0;
 
-    const rootDir = nebulaEnv.isDevelopment() ?
-      path.join(__dirname, '../../public') :
-      path.join(__dirname, '../../build');
+    const rootDir = nebulaEnv.isDevelopment()
+      ? path.join(__dirname, '../../public')
+      : path.join(__dirname, '../../build');
 
     // initialize express app
     const app = express();
     app.use(bodyParser.json());
     app.use(bodyParser.urlencoded({ extended: true }));
-    app.use(express.static(rootDir));
-    app.get('/', (req, res) => {
+    app.use((req, res, next) => {
+      // If the request if for any assets/styles/js requested, fetch it using the static file handler
+      if (/\.(js|json|css|png|svg|icns|ico)$/.test(req.originalUrl)) {
+        next();
+        return;
+      }
+      // Redirect all other requests to the captcha html
       res.sendFile(path.join(rootDir, 'captcha.html'));
     });
+    app.use(express.static(rootDir));
     this._app = app;
   }
 
@@ -64,6 +72,17 @@ class CaptchaServerManager {
     this._server = https.createServer(httpsOptions, this._app).listen();
     this._port = this._server.address().port;
     this._app.set('port', this._port);
+    // Setup the protocol interceptor
+    protocol.interceptHttpProtocol('http', async (req, callback) => {
+      if (!this._server || !req.url.startsWith('http://checkout.shopify.com')) {
+        callback(req);
+        return;
+      }
+      callback({
+        ...req,
+        url: req.url.replace('http://checkout.shopify.com', `https://127.0.0.1:${this._port}`),
+      });
+    });
     console.log(`[INFO]: Captcha Server started listening on port: ${this._port}`);
   }
 
@@ -75,6 +94,8 @@ class CaptchaServerManager {
     this._server.close();
     this._server = null;
     this._port = 0;
+    // Remove the protocol interceptor
+    protocol.uninterceptProtocol('http');
     console.log('[INFO]: Captcha server stopped');
   }
 }

packages/frontend/lib/_electron/windowManager.js

@@ -62,22 +62,10 @@ class WindowManager {
     /**
      * IPC Function Definitions
      */
-    context.ipc.on(
-      IPCKeys.RequestCreateNewWindow,
-      this._onRequestCreateNewWindow.bind(this),
-    );
-    context.ipc.on(
-      IPCKeys.RequestSendMessage,
-      this._onRequestSendMessage.bind(this),
-    );
-    context.ipc.on(
-      IPCKeys.RequestGetWindowIDs,
-      this._onRequestGetWindowIDs.bind(this),
-    );
-    context.ipc.on(
-      IPCKeys.RequestCloseWindow,
-      this._onRequestWindowClose.bind(this),
-    );
+    context.ipc.on(IPCKeys.RequestCreateNewWindow, this._onRequestCreateNewWindow.bind(this));
+    context.ipc.on(IPCKeys.RequestSendMessage, this._onRequestSendMessage.bind(this));
+    context.ipc.on(IPCKeys.RequestGetWindowIDs, this._onRequestGetWindowIDs.bind(this));
+    context.ipc.on(IPCKeys.RequestCloseWindow, this._onRequestWindowClose.bind(this));
     context.ipc.on(
       IPCKeys.RequestCloseAllCaptchaWindows,
       this._onRequestCloseAllCaptchaWindows.bind(this),
@@ -157,7 +145,7 @@ class WindowManager {
                 this._context._session.fromPartition(`${w.id}`),
               ),
             );
-            w.loadURL(`https://127.0.0.1:${serverPort}/captcha.html`);
+            w.loadURL('http://checkout.shopify.com');
           }
           break;
         }