rewrite sandbox to just require :blob permission

Author: silesky

packages/signals/signals-example/src/lib/analytics.ts

@@ -2,7 +2,11 @@
 // You only want to instantiate SignalsPlugin in a browser context, otherwise you'll get an error.
 
 import { AnalyticsBrowser } from '@segment/analytics-next'
-import { SignalsPlugin, ProcessSignal } from '@segment/analytics-signals'
+import {
+  SignalsPlugin,
+  SignalsPluginSettingsConfig,
+  ProcessSignal,
+} from '@segment/analytics-signals'
 
 export const analytics = new AnalyticsBrowser()
 if (!process.env.WRITEKEY) {
@@ -29,11 +33,20 @@ const processSignalExample: ProcessSignal = (
   }
 }
 
+const getQueryParams = () => {
+  const params = new URLSearchParams()
+  const sandboxStrategy = params.get('sandboxStrategy')
+  return {
+    sandboxStrategy:
+      sandboxStrategy as SignalsPluginSettingsConfig['sandboxStrategy'],
+  }
+}
 const isStage = process.env.STAGE === 'true'
 
+const queryParams = getQueryParams()
 const signalsPlugin = new SignalsPlugin({
   ...(isStage ? { apiHost: 'signals.segment.build/v1' } : {}),
-  sandboxStrategy: 'global',
+  sandboxStrategy: queryParams.sandboxStrategy ?? 'iframe',
   // processSignal: processSignalExample,
 })
 

packages/signals/signals/src/core/middleware/event-processor/index.ts

@@ -6,10 +6,9 @@ import { SignalEventProcessor } from '../../processor/processor'
 import {
   normalizeEdgeFunctionURL,
   GlobalScopeSandbox,
-  WorkerSandbox,
-  IframeSandboxSettings,
   SignalSandbox,
   NoopSandbox,
+  IframeSandbox,
 } from '../../processor/sandbox'
 
 export class SignalsEventProcessorSubscriber implements SignalsSubscriber {
@@ -36,12 +35,7 @@ export class SignalsEventProcessorSubscriber implements SignalsSubscriber {
       sandboxSettings.processSignal
     ) {
       logger.debug('Initializing sandbox: iframe')
-      sandbox = new WorkerSandbox(
-        new IframeSandboxSettings({
-          processSignal: sandboxSettings.processSignal,
-          edgeFnDownloadURL: normalizedEdgeFunctionURL,
-        })
-      )
+      sandbox = new IframeSandbox(normalizedEdgeFunctionURL)
     } else {
       logger.debug('Initializing sandbox: global scope')
       sandbox = new GlobalScopeSandbox({

packages/signals/signals/src/core/processor/__tests__/sandbox-settings.test.ts

@@ -1,6 +1,9 @@
-import { IframeSandboxSettings, IframeSandboxSettingsConfig } from '../sandbox'
+import {
+  IframeWorkerSandboxSettings,
+  IframeSandboxSettingsConfig,
+} from '../sandbox'
 
-describe(IframeSandboxSettings, () => {
+describe(IframeWorkerSandboxSettings, () => {
   const edgeFnResponseBody = `function processSignal() { console.log('hello world') }`
   const baseSettings: IframeSandboxSettingsConfig = {
     processSignal: undefined,
@@ -12,7 +15,7 @@ describe(IframeSandboxSettings, () => {
     ),
   }
   test('initializes with provided settings', async () => {
-    const sandboxSettings = new IframeSandboxSettings({ ...baseSettings })
+    const sandboxSettings = new IframeWorkerSandboxSettings({ ...baseSettings })
     expect(baseSettings.edgeFnFetchClient).toHaveBeenCalledWith(
       baseSettings.edgeFnDownloadURL
     )
@@ -25,7 +28,7 @@ describe(IframeSandboxSettings, () => {
       processSignal: undefined,
       edgeFnDownloadURL: 'https://foo.com/download',
     }
-    new IframeSandboxSettings(settings)
+    new IframeWorkerSandboxSettings(settings)
     expect(baseSettings.edgeFnFetchClient).toHaveBeenCalledWith(
       'https://foo.com/download'
     )
@@ -40,7 +43,7 @@ describe(IframeSandboxSettings, () => {
       processSignal: undefined,
       edgeFnDownloadURL: undefined,
     }
-    const sandboxSettings = new IframeSandboxSettings(settings)
+    const sandboxSettings = new IframeWorkerSandboxSettings(settings)
     expect(await sandboxSettings.processSignal).toMatchInlineSnapshot(
       `"globalThis.processSignal = function() {}"`
     )

packages/signals/signals/src/core/processor/sandbox.ts

@@ -180,12 +180,12 @@ export type IframeSandboxSettingsConfig = Pick<
   'processSignal' | 'edgeFnFetchClient' | 'edgeFnDownloadURL'
 >
 
-const consoleWarnProcessSignal = () =>
-  console.warn(
-    'processSignal is not defined - have you set up auto-instrumentation on app.segment.com?'
-  )
+const PROCESS_SIGNAL_UNDEFINED =
+  'processSignal is not defined - have you set up auto-instrumentation on app.segment.com?'
 
-export class IframeSandboxSettings {
+const consoleWarnProcessSignal = () => console.warn(PROCESS_SIGNAL_UNDEFINED)
+
+export class IframeWorkerSandboxSettings {
   /**
    * Should look like:
    * ```js
@@ -227,10 +227,10 @@ export interface SignalSandbox {
 }
 
 export class WorkerSandbox implements SignalSandbox {
-  settings: IframeSandboxSettings
+  settings: IframeWorkerSandboxSettings
   jsSandbox: CodeSandbox
 
-  constructor(settings: IframeSandboxSettings) {
+  constructor(settings: IframeWorkerSandboxSettings) {
     this.settings = settings
     this.jsSandbox = new JavascriptSandbox()
   }
@@ -343,3 +343,186 @@ export class NoopSandbox implements SignalSandbox {
   }
   destroy(): void {}
 }
+
+/**
+ * window.addEventListener('message', async (event) => {
+  const { type, payload } = event.data
+  if (type === 'execute') {
+    try {
+      const { signal, signals, analytics, SignalType, EventType, NavigationAction } = payload
+      await processSignal(signal, { analytics, signals, SignalType, EventType, NavigationAction })
+      event.source.postMessage({ type: 'result', payload: analytics.getCalls() }, '*')
+    } catch (err) {
+      event.source.postMessage({ type: 'error', error: err.message }, '*')
+    }
+  }
+})
+
+window.parent.postMessage('iframe_ready', '*')
+ */
+
+const noramizeMethodCallsWithArgResolver = (
+  methodCalls: AnalyticsMethodCalls
+) => {
+  const normalizedRuntime = new AnalyticsRuntime()
+  Object.entries(methodCalls).forEach(([methodName, calls]) => {
+    calls.forEach((args) => {
+      // @ts-ignore
+      normalizedRuntime[methodName](...args)
+    })
+  })
+  return normalizedRuntime.getCalls()
+}
+export class IframeSandbox implements SignalSandbox {
+  private iframe: HTMLIFrameElement
+  private iframeReady: Promise<void>
+  private _resolveReady!: () => void
+  edgeFnUrl: string
+
+  constructor(edgeFnUrl: string) {
+    this.edgeFnUrl = edgeFnUrl
+    this.iframe = document.createElement('iframe')
+    this.iframe.id = 'segment-signals-sandbox'
+    this.iframe.style.display = 'none'
+    this.iframe.src = 'about:blank'
+    document.body.appendChild(this.iframe)
+    this.iframeReady = new Promise((res) => {
+      this._resolveReady = res
+    })
+
+    void window.addEventListener('message', (e) => {
+      if (e.source === this.iframe.contentWindow && e.data === 'iframe_ready') {
+        this.iframe.contentWindow!.postMessage(
+          {
+            type: 'init',
+          },
+          '*'
+        )
+        this._resolveReady()
+      }
+    })
+
+    const doc = this.iframe.contentDocument!
+    doc.open()
+    doc.write(
+      `<!DOCTYPE html><html><head><script id="edge-fn" src=${this.edgeFnUrl}></script></head><body></body></html>`
+    )
+    doc.close()
+
+    // External signal processor script
+    // Inject runtime via Blob (CSP-safe)
+    const runtimeJs = `
+     const signalsScript = document.getElementById('edge-fn')
+     signalsScript.onload = () => {
+       window.parent.postMessage('iframe_ready', '*')
+      }
+ 
+      class AnalyticsRuntimeProxy {
+        constructor() {
+          this.calls = new Map();
+        }
+        getFormattedCalls() {
+          return Object.fromEntries(this.calls); // call in {track: [args]} format
+        }
+        createProxy() {
+          return new Proxy({}, {
+            get: (_, methodName) => {
+              return (...args) => {
+                if (!this.calls.has(methodName)) {
+                  this.calls.set(methodName, []);
+                }
+                this.calls.get(methodName).push(args);
+              };
+            },
+          });
+        }
+      }
+        
+
+      // expose the signals global
+      ${getRuntimeCode()}
+
+      window.addEventListener('message', async (event) => {
+        const { type, payload } = event.data;
+
+        
+        if (type === 'execute') {
+          try {
+            const analyticsProxy = new AnalyticsRuntimeProxy();
+            window.analytics = analyticsProxy.createProxy();
+            if (!payload.signal) {
+              throw new Error('invariant: no signal found')
+            }
+            if (!payload.signalBuffer) {
+              throw new Error('invariant: no signalBuffer found')
+            }
+            if (!payload.constants) {
+              throw new Error('invariant: no constants found')
+            }
+            if (typeof processSignal === 'undefined') {
+              throw new Error('processSignal is undefined')
+            }
+      
+            const signalBuffer = payload.signalBuffer
+            const signal = payload.signal
+            const constants = payload.constants
+            Object.entries(constants).forEach(([key, value]) => { // expose constants as globals
+              window[key] = value;
+            });
+            window.signals.signalBuffer = signalBuffer; // signals is exposed as part of get runtimeCode
+            window.processSignal(signal, { signals, constants })
+            event.source.postMessage({ type: 'execution_result', payload: analyticsProxy.getFormattedCalls() }, '*');
+         } catch(err) {
+            event.source.postMessage({ type: 'execution_error', error: err }, '*'); 
+         } 
+        }
+      });
+
+
+    `
+    const blob = new Blob([runtimeJs], { type: 'application/javascript' })
+    const runtimeScript = doc.createElement('script')
+    runtimeScript.src = URL.createObjectURL(blob)
+
+    doc.head.appendChild(runtimeScript)
+  }
+
+  async execute(
+    signal: Signal,
+    signals: Signal[]
+  ): Promise<AnalyticsMethodCalls> {
+    await this.iframeReady
+
+    return new Promise((resolve, reject) => {
+      const handler = (e: MessageEvent) => {
+        if (e.source !== this.iframe.contentWindow) return
+        if (e.data?.type === 'execution_result') {
+          window.removeEventListener('message', handler)
+          resolve(noramizeMethodCallsWithArgResolver(e.data.payload))
+        }
+        if (e.data?.type === 'execution_error') {
+          window.removeEventListener('message', handler)
+          reject(e.data.error)
+        }
+      }
+
+      window.addEventListener('message', handler)
+
+      this.iframe.contentWindow!.postMessage(
+        {
+          type: 'execute',
+          payload: {
+            signal,
+            signalBuffer: signals,
+            constants: WebRuntimeConstants,
+          },
+        },
+        '*'
+      )
+    })
+  }
+
+  destroy() {
+    this.iframe.remove()
+  }
+}