segmentio · silesky · Apr 30, 2025 · Apr 28, 2025 · Apr 29, 2025 · Apr 29, 2025
diff --git a/.changeset/eight-adults-type.md b/.changeset/eight-adults-type.md
@@ -0,0 +1,5 @@
+---
+'@segment/analytics-signals': minor
+---
+
+Fix CSP errors with sandboxStrategy: global
diff --git a/.changeset/empty-eagles-buy.md b/.changeset/empty-eagles-buy.md
@@ -0,0 +1,5 @@
+---
+'@segment/analytics-signals': minor
+---
+
+Update max signals in buffer to 100
diff --git a/packages/signals/signals-example/public/index.html b/packages/signals/signals-example/public/index.html
@@ -5,10 +5,17 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>React TypeScript App</title>
+  <!---
+
+1. Requres 'unsafe-inline'
+- Refused to execute inline script because it violates the following Content Security Policy directive: [directive] Either the 'unsafe-inline' keyword, a hash ('sha256-XDT/UwTV/dYYXFad1cmKD+q1zZNK8KGVRYvIdvkmo7I='), or a nonce ('nonce-...') is required to enable inline execution.
+2. Requires 'unsafe-eval'
+processSignal() error in sandbox Error: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive
+  -->
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://*.segment.com https://*.googletagmanager.com blob:">
 </head>
-
 <body>
   <div id="root"></div>
 </body>
 
-</html>
+</html>
diff --git a/packages/signals/signals-example/src/lib/analytics.ts b/packages/signals/signals-example/src/lib/analytics.ts
@@ -33,7 +33,7 @@ const isStage = process.env.STAGE === 'true'
 
 const signalsPlugin = new SignalsPlugin({
   ...(isStage ? { apiHost: 'signals.segment.build/v1' } : {}),
-  // enableDebugLogging: true,
+  sandboxStrategy: 'global',
   // processSignal: processSignalExample,
 })
 

diff --git a/packages/signals/signals/README.md b/packages/signals/signals/README.md
@@ -86,6 +86,14 @@ signalsPlugin.addSignal({ someData: 'foo' })
 }
 ```
 
+### Sandbox Strategies
+If getting CSP errors, you can use the experimental 'global' sandbox strategy.
+
+```ts
+new SignalsPlugin({ sandboxStrategy: 'global' })
+```
+
+
 ### Debugging  
 Debug mode **MUST** be enabled on the client to VIEW signals on segment.com.
 

diff --git a/packages/signals/signals/src/core/buffer/index.ts b/packages/signals/signals/src/core/buffer/index.ts
@@ -25,7 +25,7 @@ interface IDBPObjectStoreSignals
     'readonly' | 'readwrite' | 'versionchange'
   > {}
 
-const MAX_BUFFER_SIZE_DEFAULT = 50
+const MAX_BUFFER_SIZE_DEFAULT = 100
 
 interface StoreSettings {
   maxBufferSize?: number

diff --git a/packages/signals/signals/src/core/middleware/event-processor/index.ts b/packages/signals/signals/src/core/middleware/event-processor/index.ts
@@ -1,18 +1,55 @@
 import { Signal } from '@segment/analytics-signals-runtime'
+import { logger } from '../../../lib/logger'
 import { SignalBuffer } from '../../buffer'
 import { SignalsSubscriber, SignalsMiddlewareContext } from '../../emitter'
 import { SignalEventProcessor } from '../../processor/processor'
-import { Sandbox, SandboxSettings } from '../../processor/sandbox'
+import {
+  normalizeEdgeFunctionURL,
+  GlobalScopeSandbox,
+  WorkerSandbox,
+  IframeSandboxSettings,
+  SignalSandbox,
+  NoopSandbox,
+} from '../../processor/sandbox'
 
 export class SignalsEventProcessorSubscriber implements SignalsSubscriber {
   processor!: SignalEventProcessor
   buffer!: SignalBuffer
   load(ctx: SignalsMiddlewareContext) {
     this.buffer = ctx.buffer
-    this.processor = new SignalEventProcessor(
-      ctx.analyticsInstance,
-      new Sandbox(new SandboxSettings(ctx.unstableGlobalSettings.sandbox))
+    const sandboxSettings = ctx.unstableGlobalSettings.sandbox
+    const normalizedEdgeFunctionURL = normalizeEdgeFunctionURL(
+      sandboxSettings.functionHost,
+      sandboxSettings.edgeFnDownloadURL
     )
+
+    let sandbox: SignalSandbox
+
+    if (!normalizedEdgeFunctionURL) {
+      console.warn(
+        `No processSignal function found. Have you written a processSignal function on app.segment.com?`
+      )
+      logger.debug('Initializing sandbox: noop')
+      sandbox = new NoopSandbox()
+    } else if (
+      sandboxSettings.sandboxStrategy === 'iframe' ||
+      sandboxSettings.processSignal
+    ) {
+      logger.debug('Initializing sandbox: iframe')
+      sandbox = new WorkerSandbox(
+        new IframeSandboxSettings({
+          processSignal: sandboxSettings.processSignal,
+          edgeFnDownloadURL: normalizedEdgeFunctionURL,
+        })
+      )
+    } else {
+      logger.debug('Initializing sandbox: global scope')
+      sandbox = new GlobalScopeSandbox({
+        edgeFnDownloadURL: normalizedEdgeFunctionURL,
+      })
+    }
+
+    this.processor = new SignalEventProcessor(ctx.analyticsInstance, sandbox)
   }
   async process(signal: Signal) {
     return this.processor.process(signal, await this.buffer.getAll())

diff --git a/packages/signals/signals/src/core/processor/__tests__/sandbox-settings.test.ts b/packages/signals/signals/src/core/processor/__tests__/sandbox-settings.test.ts
@@ -1,9 +1,8 @@
-import { SandboxSettings, SandboxSettingsConfig } from '../sandbox'
+import { IframeSandboxSettings, IframeSandboxSettingsConfig } from '../sandbox'
 
-describe(SandboxSettings, () => {
+describe(IframeSandboxSettings, () => {
   const edgeFnResponseBody = `function processSignal() { console.log('hello world') }`
-  const baseSettings: SandboxSettingsConfig = {
-    functionHost: undefined,
+  const baseSettings: IframeSandboxSettingsConfig = {
     processSignal: undefined,
     edgeFnDownloadURL: 'http://example.com/download',
     edgeFnFetchClient: jest.fn().mockReturnValue(
@@ -13,38 +12,37 @@ describe(SandboxSettings, () => {
     ),
   }
   test('initializes with provided settings', async () => {
-    const sandboxSettings = new SandboxSettings({ ...baseSettings })
+    const sandboxSettings = new IframeSandboxSettings({ ...baseSettings })
     expect(baseSettings.edgeFnFetchClient).toHaveBeenCalledWith(
       baseSettings.edgeFnDownloadURL
     )
     expect(await sandboxSettings.processSignal).toEqual(edgeFnResponseBody)
   })
 
-  test('normalizes edgeFnDownloadURL when functionHost is provided', async () => {
-    const settings: SandboxSettingsConfig = {
+  test('should call edgeFnDownloadURL', async () => {
+    const settings: IframeSandboxSettingsConfig = {
       ...baseSettings,
       processSignal: undefined,
-      functionHost: 'newHost.com',
-      edgeFnDownloadURL: 'https://original.com/download',
+      edgeFnDownloadURL: 'https://foo.com/download',
     }
-    new SandboxSettings(settings)
+    new IframeSandboxSettings(settings)
     expect(baseSettings.edgeFnFetchClient).toHaveBeenCalledWith(
-      'https://newHost.com/download'
+      'https://foo.com/download'
     )
   })
 
   test('creates default processSignal when parameters are missing', async () => {
     const consoleWarnSpy = jest
       .spyOn(console, 'warn')
       .mockImplementation(() => {})
-    const settings: SandboxSettingsConfig = {
+    const settings: IframeSandboxSettingsConfig = {
       ...baseSettings,
       processSignal: undefined,
       edgeFnDownloadURL: undefined,
     }
-    const sandboxSettings = new SandboxSettings(settings)
-    expect(await sandboxSettings.processSignal).toEqual(
-      'globalThis.processSignal = function processSignal() {}'
+    const sandboxSettings = new IframeSandboxSettings(settings)
+    expect(await sandboxSettings.processSignal).toMatchInlineSnapshot(
+      `"globalThis.processSignal = function() {}"`
     )
     expect(baseSettings.edgeFnFetchClient).not.toHaveBeenCalled()
     expect(consoleWarnSpy).toHaveBeenCalledWith(

diff --git a/packages/signals/signals/src/core/processor/processor.ts b/packages/signals/signals/src/core/processor/processor.ts
@@ -1,20 +1,20 @@
 import { logger } from '../../lib/logger'
 import { Signal } from '@segment/analytics-signals-runtime'
 import { AnyAnalytics } from '../../types'
-import { AnalyticsMethodCalls, MethodName, Sandbox } from './sandbox'
+import { AnalyticsMethodCalls, MethodName, SignalSandbox } from './sandbox'
 
 export class SignalEventProcessor {
-  private sandbox: Sandbox
-  private analytics: AnyAnalytics
-  constructor(analytics: AnyAnalytics, sandbox: Sandbox) {
+  analytics: AnyAnalytics
+  sandbox: SignalSandbox
+  constructor(analytics: AnyAnalytics, sandbox: SignalSandbox) {
     this.analytics = analytics
     this.sandbox = sandbox
   }
 
   async process(signal: Signal, signals: Signal[]) {
-    let analyticsMethodCalls: AnalyticsMethodCalls
+    let analyticsMethodCalls: AnalyticsMethodCalls | undefined
     try {
-      analyticsMethodCalls = await this.sandbox.process(signal, signals)
+      analyticsMethodCalls = await this.sandbox.execute(signal, signals)
     } catch (err) {
       // in practice, we should never hit this error, but if we do, we should log it.
       console.error('Error processing signal', { signal, signals }, err)
@@ -34,6 +34,6 @@
   }
 
   cleanup() {
-    return this.sandbox.jsSandbox.destroy()
+    return this.sandbox.destroy()
   }
 }