fix(setupWorker): prevent WorkerChannel access in fallback mode (#2594)

Author: kettanaito

src/browser/setupWorker/glossary.ts

@@ -25,10 +25,6 @@ export type SetupWorkerInternalContext = {
   emitter: Emitter<LifeCycleEventsMap>
   keepAliveInterval?: number
   workerChannel: WorkerChannel
-  supports: {
-    serviceWorkerApi: boolean
-    readableStreamTransfer: boolean
-  }
   fallbackInterceptor?: Interceptor<HttpRequestEventMap>
 }
 

src/browser/setupWorker/setupWorker.ts

@@ -14,7 +14,6 @@ import { SetupApi } from '~/core/SetupApi'
 import { mergeRight } from '~/core/utils/internal/mergeRight'
 import type { LifeCycleEventsMap } from '~/core/sharedOptions'
 import type { WebSocketHandler } from '~/core/handlers/WebSocketHandler'
-import { supportsReadableStreamTransfer } from '../utils/supportsReadableStreamTransfer'
 import { webSocketInterceptor } from '~/core/ws/webSocketInterceptor'
 import { handleWebSocketEvent } from '~/core/ws/handleWebSocketEvent'
 import { attachWebSocketLogger } from '~/core/ws/utils/attachWebSocketLogger'
@@ -23,6 +22,7 @@ import { DeferredPromise } from '@open-draft/deferred-promise'
 import { createFallbackRequestListener } from './start/createFallbackRequestListener'
 import { printStartMessage } from './start/utils/printStartMessage'
 import { printStopMessage } from './stop/utils/printStopMessage'
+import { supportsServiceWorker } from '../utils/supports'
 
 export class SetupWorkerApi
   extends SetupApi<LifeCycleEventsMap>
@@ -60,11 +60,6 @@ export class SetupWorkerApi
       workerChannel: new WorkerChannel({
         worker: workerPromise,
       }),
-      supports: {
-        serviceWorkerApi:
-          'serviceWorker' in navigator && location.protocol !== 'file:',
-        readableStreamTransfer: supportsReadableStreamTransfer(),
-      },
     }
   }
 
@@ -117,7 +112,7 @@ export class SetupWorkerApi
 
     // Use a fallback interception algorithm in the environments
     // where the Service Worker API isn't supported.
-    if (!this.context.supports.serviceWorkerApi) {
+    if (!supportsServiceWorker()) {
       const fallbackInterceptor = createFallbackRequestListener(
         this.context,
         this.context.startOptions,
@@ -159,7 +154,7 @@ export class SetupWorkerApi
     this.context.workerStoppedAt = Date.now()
     this.context.emitter.removeAllListeners()
 
-    if (this.context.supports.serviceWorkerApi) {
+    if (supportsServiceWorker()) {
       this.context.workerChannel.removeAllListeners('RESPONSE')
       window.clearInterval(this.context.keepAliveInterval)
     }

src/browser/setupWorker/start/createRequestListener.ts

@@ -1,13 +1,16 @@
 import { Emitter } from 'rettime'
 import { StartOptions, SetupWorkerInternalContext } from '../glossary'
 import { deserializeRequest } from '../../utils/deserializeRequest'
+import { supportsReadableStreamTransfer } from '../../utils/supports'
 import { RequestHandler } from '~/core/handlers/RequestHandler'
 import { handleRequest } from '~/core/utils/handleRequest'
 import { RequiredDeep } from '~/core/typeUtils'
 import { devUtils } from '~/core/utils/internal/devUtils'
 import { toResponseInit } from '~/core/utils/toResponseInit'
 import { isHandlerKind } from '~/core/utils/internal/isHandlerKind'
 
+const SUPPORTS_READABLE_STREAM_TRANSFER = supportsReadableStreamTransfer()
+
 export const createRequestListener = (
   context: SetupWorkerInternalContext,
   options: RequiredDeep<StartOptions>,
@@ -58,7 +61,7 @@ export const createRequestListener = (
              * @note Safari doesn't support transferring a "ReadableStream".
              * Check that the browser supports that before sending it to the worker.
              */
-            if (context.supports.readableStreamTransfer) {
+            if (SUPPORTS_READABLE_STREAM_TRANSFER) {
               const responseStreamOrNull = response.body
 
               event.postMessage(

src/browser/utils/supportsReadableStreamTransfer.ts renamed to src/browser/utils/supports.ts

@@ -1,3 +1,16 @@
+/**
+ * Checks if the Service Worker API is supproted and available
+ * in the current browsing context.
+ */
+export function supportsServiceWorker(): boolean {
+  return (
+    typeof navigator !== 'undefined' &&
+    'serviceWorker' in navigator &&
+    typeof location !== 'undefined' &&
+    location.protocol !== 'file:'
+  )
+}
+
 /**
  * Returns a boolean indicating whether the current browser
  * supports `ReadableStream` as a `Transferable` when posting

src/browser/utils/workerChannel.ts

@@ -1,6 +1,8 @@
+import { invariant } from 'outvariant'
 import { Emitter, TypedEvent } from 'rettime'
 import { isObject } from '~/core/utils/internal/isObject'
 import type { StringifiedResponse } from '../setupWorker/glossary'
+import { supportsServiceWorker } from '../utils/supports'
 
 export interface WorkerChannelOptions {
   worker: Promise<ServiceWorker>
@@ -65,6 +67,8 @@ export type WorkerEventResponse = {
   PASSTHROUGH: []
 }
 
+const SUPPORTS_SERVICE_WORKER = supportsServiceWorker()
+
 export class WorkerEvent<
   DataType,
   ReturnType = any,
@@ -121,6 +125,10 @@ export class WorkerChannel extends Emitter<WorkerChannelEventMap> {
   constructor(protected readonly options: WorkerChannelOptions) {
     super()
 
+    if (!SUPPORTS_SERVICE_WORKER) {
+      return
+    }
+
     navigator.serviceWorker.addEventListener('message', async (event) => {
       const worker = await this.options.worker
 
@@ -139,6 +147,11 @@ export class WorkerChannel extends Emitter<WorkerChannelEventMap> {
    * This triggers the `message` event listener on ServiceWorkerGlobalScope.
    */
   public postMessage(type: OutgoingWorkerEvents): void {
+    invariant(
+      SUPPORTS_SERVICE_WORKER,
+      'Failed to post message on a WorkerChannel: the Service Worker API is unavailable in this context. This is likely an issue with MSW. Please report it on GitHub: https://github.com/mswjs/msw/issues',
+    )
+
     this.options.worker.then((worker) => {
       worker.postMessage(type)
     })