feat: add sockProtocol option to overlay (#242)

Co-authored-by: Michael Mok <[email protected]>

docs/API.md

@@ -82,6 +82,7 @@ interface ErrorOverlayOptions {
   sockHost?: string;
   sockPath?: string;
   sockPort?: number;
+  sockProtocol?: 'http' | 'https' | 'ws' | 'wss';
   useLegacyWDSSockets?: boolean;
 }
 ```
@@ -185,6 +186,17 @@ Type: `string`
 Set a custom path for the error overlay to listen to Webpack build messages.
 Useful if you set `devServer.sockPath` to something other than `/sockjs-node`.
 
+### `sockProtocol`
+
+Default: parsed from current url
+
+Type: `http`, `https`, `ws` or `wss`
+
+**This is relevant for `webpack-dev-server` only.**
+
+Force a protocol for the error overlay to listen for Webpack build messages.
+Useful if you want to enforce https communication, or if you're working under a non-HTTP path.
+
 #### `useLegacyWDSSockets`
 
 Default: `undefined`

lib/options.json

@@ -30,6 +30,7 @@
         "sockHost": { "type": "string" },
         "sockPath": { "type": "string" },
         "sockPort": { "type": "number", "minimum": 0 },
+        "sockProtocol": { "enum": ["http", "https", "ws", "wss"] },
         "useLegacyWDSSockets": { "type": "boolean" }
       }
     },

lib/types.js

@@ -6,6 +6,7 @@
  * @property {import('type-fest').LiteralUnion<'wds' | 'whm' | 'wps' | false, string>} [sockIntegration] Path to a JS file that sets up the Webpack socket integration.
  * @property {string} [sockPath] The socket path to use (WDS only).
  * @property {number} [sockPort] The socket port to use (WDS only).
+ * @property {'http' | 'https' | 'ws' | 'wss'} [sockProtocol] The socket protocol to use (WDS only).
  * @property {boolean} [useLegacyWDSSockets] Uses a custom SocketJS implementation for older versions of webpack-dev-server.
  */
 

lib/utils/injectRefreshEntry.js

@@ -38,6 +38,7 @@ function injectRefreshEntry(originalEntry, options) {
     options.overlay.sockHost && (resourceQuery.sockHost = options.overlay.sockHost);
     options.overlay.sockPath && (resourceQuery.sockPath = options.overlay.sockPath);
     options.overlay.sockPort && (resourceQuery.sockPort = options.overlay.sockPort);
+    options.overlay.sockProtocol && (resourceQuery.sockProtocol = options.overlay.sockProtocol);
   }
 
   // We don't need to URI encode the resourceQuery as it will be parsed by Webpack

lib/utils/normalizeOptions.js

@@ -71,6 +71,7 @@ const normalizeOptions = (options) => {
     d(overlay, 'sockHost');
     d(overlay, 'sockPath');
     d(overlay, 'sockPort');
+    d(overlay, 'sockProtocol');
     d(options, 'useLegacyWDSSockets');
 
     return overlay;

sockets/utils/getSocketUrlParts.js

@@ -82,6 +82,11 @@ function getSocketUrlParts(resourceQuery) {
   pathname = parsedQuery.sockPath || pathname;
   port = parsedQuery.sockPort || port;
 
+  // Make sure the protocol from resource query has a trailing colon
+  if (parsedQuery.sockProtocol) {
+    protocol = parsedQuery.sockProtocol + ':';
+  }
+
   return {
     auth: auth,
     hostname: hostname,

test/unit/getSocketUrlParts.test.js

@@ -179,12 +179,14 @@ describe('getSocketUrlParts', () => {
   it('should use info from resource query when available', () => {
     getCurrentScriptSource.mockImplementationOnce(() => 'http://localhost:8080');
 
-    expect(getSocketUrlParts('?sockHost=foo.com&sockPath=/socket&sockPort=9000')).toStrictEqual({
+    expect(
+      getSocketUrlParts('?sockProtocol=https&sockHost=foo.com&sockPath=/socket&sockPort=9000')
+    ).toStrictEqual({
       auth: undefined,
       hostname: 'foo.com',
       pathname: '/socket',
       port: '9000',
-      protocol: 'http:',
+      protocol: 'https:',
     });
   });
 });

test/unit/injectRefreshEntry.test.js

@@ -129,11 +129,12 @@ describe('injectRefreshEntry', () => {
           sockHost: 'localhost',
           sockPath: '/socket',
           sockPort: '9000',
+          sockProtocol: 'https',
         },
       })
     ).toStrictEqual([
       ReactRefreshEntry,
-      `${ErrorOverlayEntry}?sockHost=localhost&sockPath=/socket&sockPort=9000`,
+      `${ErrorOverlayEntry}?sockHost=localhost&sockPath=/socket&sockPort=9000&sockProtocol=https`,
       'test.js',
     ]);
   });

test/unit/normalizeOptions.test.js

@@ -28,6 +28,7 @@ describe('normalizeOptions', () => {
           sockIntegration: 'whm',
           sockPath: '/socket',
           sockPort: 9000,
+          sockProtocol: 'https:',
           useLegacyWDSSockets: true,
         },
       })
@@ -42,6 +43,7 @@ describe('normalizeOptions', () => {
         sockIntegration: 'whm',
         sockPath: '/socket',
         sockPort: 9000,
+        sockProtocol: 'https:',
         useLegacyWDSSockets: true,
       },
     });

test/unit/parseQuery.test.js

@@ -6,10 +6,13 @@ const parseQuery = require('../../sockets/utils/parseQuery');
 
 describe('parseQuery', () => {
   it('should handle valid query string', () => {
-    expect(parseQuery('?sockHost=localhost&sockPath=/__socket&sockPort=8080')).toStrictEqual({
+    expect(
+      parseQuery('?sockHost=localhost&sockPath=/__socket&sockPort=8080&sockProtocol=https')
+    ).toStrictEqual({
       sockHost: 'localhost',
       sockPath: '/__socket',
       sockPort: '8080',
+      sockProtocol: 'https',
     });
   });
 

test/unit/validateOptions.test.js

@@ -136,11 +136,11 @@ describe('validateOptions', () => {
     }).toThrowErrorMatchingInlineSnapshot(`
       "Invalid options object. React Refresh Plugin has been initialized using an options object that does not match the API schema.
        - options.overlay should be one of these:
-         boolean | object { entry?, module?, sockIntegration?, sockHost?, sockPath?, sockPort?, useLegacyWDSSockets? }
+         boolean | object { entry?, module?, sockIntegration?, sockHost?, sockPath?, sockPort?, sockProtocol?, useLegacyWDSSockets? }
          Details:
           * options.overlay should be a boolean.
           * options.overlay should be an object:
-            object { entry?, module?, sockIntegration?, sockHost?, sockPath?, sockPort?, useLegacyWDSSockets? }"
+            object { entry?, module?, sockIntegration?, sockHost?, sockPath?, sockPort?, sockProtocol?, useLegacyWDSSockets? }"
     `);
   });
 
@@ -179,7 +179,7 @@ describe('validateOptions', () => {
     }).toThrowErrorMatchingInlineSnapshot(`
       "Invalid options object. React Refresh Plugin has been initialized using an options object that does not match the API schema.
        - options.overlay should be one of these:
-         boolean | object { entry?, module?, sockIntegration?, sockHost?, sockPath?, sockPort?, useLegacyWDSSockets? }
+         boolean | object { entry?, module?, sockIntegration?, sockHost?, sockPath?, sockPort?, sockProtocol?, useLegacyWDSSockets? }
          Details:
           * options.overlay.entry should be one of these:
             false | string
@@ -224,7 +224,7 @@ describe('validateOptions', () => {
     }).toThrowErrorMatchingInlineSnapshot(`
       "Invalid options object. React Refresh Plugin has been initialized using an options object that does not match the API schema.
        - options.overlay should be one of these:
-         boolean | object { entry?, module?, sockIntegration?, sockHost?, sockPath?, sockPort?, useLegacyWDSSockets? }
+         boolean | object { entry?, module?, sockIntegration?, sockHost?, sockPath?, sockPort?, sockProtocol?, useLegacyWDSSockets? }
          Details:
           * options.overlay.module should be one of these:
             false | string
@@ -293,7 +293,7 @@ describe('validateOptions', () => {
     }).toThrowErrorMatchingInlineSnapshot(`
       "Invalid options object. React Refresh Plugin has been initialized using an options object that does not match the API schema.
        - options.overlay should be one of these:
-         boolean | object { entry?, module?, sockIntegration?, sockHost?, sockPath?, sockPort?, useLegacyWDSSockets? }
+         boolean | object { entry?, module?, sockIntegration?, sockHost?, sockPath?, sockPort?, sockProtocol?, useLegacyWDSSockets? }
          Details:
           * options.overlay.sockIntegration should be one of these:
             false | \\"wds\\" | \\"whm\\" | \\"wps\\" | string
@@ -381,6 +381,34 @@ describe('validateOptions', () => {
     `);
   });
 
+  it('should accept "overlay.sockProtocol" when it is "http"', () => {
+    expect(() => {
+      new ReactRefreshPlugin({
+        overlay: { sockProtocol: 'http' },
+      });
+    }).not.toThrow();
+  });
+
+  it('should accept "overlay.sockProtocol" when it is "https"', () => {
+    expect(() => {
+      new ReactRefreshPlugin({
+        overlay: { sockProtocol: 'https' },
+      });
+    }).not.toThrow();
+  });
+
+  it('should reject "overlay.sockProtocol" when it is not "http", "https", "ws" nor "wss"', () => {
+    expect(() => {
+      new ReactRefreshPlugin({
+        overlay: { sockProtocol: true },
+      });
+    }).toThrowErrorMatchingInlineSnapshot(`
+      "Invalid options object. React Refresh Plugin has been initialized using an options object that does not match the API schema.
+       - options.overlay.sockProtocol should be one of these:
+         \\"http\\" | \\"https\\" | \\"ws\\" | \\"wss\\""
+    `);
+  });
+
   it('should accept "overlay.useLegacyWDSSockets" when it is true', () => {
     expect(() => {
       new ReactRefreshPlugin({

types/types.d.ts

@@ -23,6 +23,10 @@ export type ErrorOverlayOptions = {
    * The socket port to use (WDS only).
    */
   sockPort?: number;
+  /**
+   * The socket protocol to use (WDS only).
+   */
+  sockProtocol?: 'http' | 'https' | 'ws' | 'wss';
   /**
    * Uses a custom SocketJS implementation for older versions of webpack-dev-server.
    */
@@ -41,6 +45,10 @@ export type NormalizedErrorOverlayOptions = {
    * The socket port to use (WDS only).
    */
   sockPort?: number | undefined;
+  /**
+   * The socket protocol to use (WDS only).
+   */
+  sockProtocol?: 'http' | 'https' | 'ws' | 'wss';
   /**
    * Uses a custom SocketJS implementation for older versions of webpack-dev-server.
    */