Add signals strategy configuration for customers with restrictive CSPs (#1284)

silesky · web-flow · commit 64835418f9dc · 2025-04-30T14:12:23.000-05:00
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-integration-tests/package.json b/packages/signals/signals-integration-tests/package.json
@@ -8,10 +8,11 @@
   "scripts": {
     ".": "yarn run -T turbo run --filter=@internal/signals-integration-tests...",
     "build": "webpack",
-    "test:int": "playwright test",
+    "test:int": "playwright test && SKIP_BUILD=true yarn test:global-sandbox",
     "test:vanilla": "playwright test src/tests/signals-vanilla",
     "test:perf": "playwright test src/tests/performance",
     "test:custom": "playwright test src/tests/custom",
+    "test:global-sandbox": "SANDBOX_STRATEGY=global playwright test src/tests/signals-vanilla src/tests/custom",
     "watch": "webpack -w",
     "lint": "yarn concurrently 'yarn:eslint .' 'yarn:tsc --noEmit'",
     "concurrently": "yarn run -T concurrently",
diff --git a/packages/signals/signals-integration-tests/playwright.global-setup.ts b/packages/signals/signals-integration-tests/playwright.global-setup.ts
@@ -1,8 +1,13 @@
 import type { FullConfig } from '@playwright/test'
 import { execSync } from 'child_process'
+import { envConfig } from './src/helpers/env-config'
 
 export default function globalSetup(_cfg: FullConfig) {
-  console.log('Executing global setup...')
-  execSync('yarn build', { stdio: 'inherit' })
-  console.log('Finished global setup.')
+  console.log(`Executing playwright.global-setup.ts...\n`)
+  console.log(`Using envConfig: ${JSON.stringify(envConfig, undefined, 2)}\n`)
+  if (process.env.SKIP_BUILD !== 'true') {
+    console.log(`Executing yarn build:\n`)
+    execSync('yarn build', { stdio: 'inherit' })
+  }
+  console.log('Finished global setup. Should start running tests.\n')
 }
diff --git a/packages/signals/signals-integration-tests/src/helpers/base-page-object.ts b/packages/signals/signals-integration-tests/src/helpers/base-page-object.ts
@@ -7,6 +7,7 @@ import {
   SignalAPIRequestBuffer,
   TrackingAPIRequestBuffer,
 } from './network-utils'
+import { envConfig } from './env-config'
 
 export class BasePage {
   protected page!: Page
@@ -63,6 +64,7 @@ export class BasePage {
     await this.page.goto(url, { waitUntil: 'domcontentloaded' })
     if (!options.skipSignalsPluginInit) {
       void this.invokeAnalyticsLoad({
+        sandboxStrategy: envConfig.SANDBOX_STRATEGY,
         flushInterval: 500,
         ...signalSettings,
       })
diff --git a/packages/signals/signals-integration-tests/src/helpers/env-config.ts b/packages/signals/signals-integration-tests/src/helpers/env-config.ts
@@ -0,0 +1,10 @@
+import { SignalsPluginSettingsConfig } from '@segment/analytics-signals'
+
+// This is for testing with the global sandbox strategy with an npm script, that executes processSignal in the global scope
+// If we change this to be the default, this can be rejiggered
+const SANDBOX_STRATEGY = (process.env.SANDBOX_STRATEGY ??
+  'iframe') as SignalsPluginSettingsConfig['sandboxStrategy']
+
+export const envConfig = {
+  SANDBOX_STRATEGY,
+}
diff --git a/packages/signals/signals-integration-tests/src/tests/custom-elements/custom-select.test.ts b/packages/signals/signals-integration-tests/src/tests/custom-elements/custom-select.test.ts
@@ -3,7 +3,7 @@ import { waitForCondition } from '../../helpers/playwright-utils'
 import { IndexPage } from './index-page'
 import type { SegmentEvent } from '@segment/analytics-next'
 
-const basicEdgeFn = `const processSignal = (signal) => {}`
+const basicEdgeFn = `globalThis.processSignal = (signal) => {}`
 
 test('Collecting signals whenever a user selects an item', async ({ page }) => {
   const indexPage = await new IndexPage().loadAndWait(page, basicEdgeFn, {
diff --git a/packages/signals/signals-integration-tests/src/tests/custom-elements/custom-textfield.test.ts b/packages/signals/signals-integration-tests/src/tests/custom-elements/custom-textfield.test.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 import { waitForCondition } from '../../helpers/playwright-utils'
 import { IndexPage } from './index-page'
 
-const basicEdgeFn = `const processSignal = (signal) => {}`
+const basicEdgeFn = `globalThis.processSignal = (signal) => {}`
 
 test('Collecting signals whenever a user enters text input and focuses out', async ({
   page,
diff --git a/packages/signals/signals-integration-tests/src/tests/performance/memory-leak.test.ts b/packages/signals/signals-integration-tests/src/tests/performance/memory-leak.test.ts
@@ -16,7 +16,7 @@ declare global {
 
 const basicEdgeFn = `
     // this is a process signal function
-    const processSignal = (signal) => {
+    globalThis.processSignal = (signal) => {
       if (signal.type === 'interaction') {
         const eventName = signal.data.eventType + ' ' + '[' + signal.type + ']'
         analytics.track(eventName, signal.data)
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/all-segment-events.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/all-segment-events.test.ts
@@ -37,7 +37,7 @@ const snapshot = (
 test('Segment events', async ({ page }) => {
   const basicEdgeFn = `
     // this is a process signal function
-    const processSignal = (signal) => {
+    globalThis.processSignal = (signal) => {
       if (signal.type === 'interaction' && signal.data.eventType === 'click') {
         analytics.identify('john', { found: true })
         analytics.group('foo', { hello: 'world' })
@@ -65,7 +65,7 @@ test('Should dispatch events from signals that occurred before analytics was ins
   page,
 }) => {
   const edgeFn = `
-    const processSignal = (signal) => {
+    globalThis.processSignal = (signal) => {
        if (signal.type === 'navigation' && signal.data.action === 'pageLoad') {
           analytics.page('dispatched from signals - navigation')
       }
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/basic.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/basic.test.ts
@@ -4,7 +4,7 @@ import { IndexPage } from './index-page'
 
 const basicEdgeFn = `
     // this is a process signal function
-    const processSignal = (signal) => {
+    globalThis.processSignal = (signal) => {
       if (signal.type === 'interaction') {
         const eventName = signal.data.eventType + ' ' + '[' + signal.type + ']'
         analytics.track(eventName, signal.data)
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/button-click-complex.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/button-click-complex.test.ts
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 import { IndexPage } from './index-page'
 
-const basicEdgeFn = `const processSignal = (signal) => {}`
+const basicEdgeFn = `globalThis.processSignal = (signal) => {}`
 let indexPage: IndexPage
 test.beforeEach(async ({ page }) => {
   indexPage = await new IndexPage().loadAndWait(page, basicEdgeFn)
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/change-input.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/change-input.test.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 import { waitForCondition } from '../../helpers/playwright-utils'
 import { IndexPage } from './index-page'
 
-const basicEdgeFn = `const processSignal = (signal) => {}`
+const basicEdgeFn = `globalThis.processSignal = (signal) => {}`
 
 test('Collecting signals whenever a user enters text input', async ({
   page,
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/middleware.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/middleware.test.ts
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 import { IndexPage } from './index-page'
 
-const basicEdgeFn = `const processSignal = (signal) => {}`
+const basicEdgeFn = `globalThis.processSignal = (signal) => {}`
 
 let indexPage: IndexPage
 
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/network-signals-allow-list.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/network-signals-allow-list.test.ts
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 import { IndexPage } from './index-page'
 
-const basicEdgeFn = `const processSignal = (signal) => {}`
+const basicEdgeFn = `globalThis.processSignal = (signal) => {}`
 
 test('network signals allow and disallow list', async ({ page }) => {
   const indexPage = await new IndexPage().loadAndWait(page, basicEdgeFn, {
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/network-signals-fetch.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/network-signals-fetch.test.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 import { commonSignalData } from '../../helpers/fixtures'
 import { IndexPage } from './index-page'
 
-const basicEdgeFn = `const processSignal = (signal) => {}`
+const basicEdgeFn = `globalThis.processSignal = (signal) => {}`
 
 test.describe('network signals - fetch', () => {
   let indexPage: IndexPage
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/network-signals-xhr.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/network-signals-xhr.test.ts
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 import { IndexPage } from './index-page'
 
-const basicEdgeFn = `const processSignal = (signal) => {}`
+const basicEdgeFn = `globalThis.processSignal = (signal) => {}`
 
 test.describe('network signals - XHR', () => {
   let indexPage: IndexPage
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/reset.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/reset.test.ts
@@ -7,7 +7,7 @@ import { pTimeout } from '@segment/analytics-core'
  * If a signal is generated, the signal buffer should be reset
  * when the user clicks on the complex button.
  */
-const edgeFn = `const processSignal = (signal) => {
+const edgeFn = `globalThis.processSignal = (signal) => {
   // create a custom signal to echo out the current signal buffer
   if (signal.type === 'userDefined') {
     analytics.track('current signal buffer', { signalBuffer: signals.signalBuffer })
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/runtime-constants.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/runtime-constants.test.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 import { IndexPage } from './index-page'
 
 const basicEdgeFn = `
-    const processSignal = (signal) => {
+    globalThis.processSignal = (signal) => {
       // test that constants are properly injected
       if (typeof EventType !== 'object') {
         throw new Error('EventType is missing?')
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/signals-find.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/signals-find.test.ts
@@ -4,7 +4,7 @@ import { IndexPage } from './index-page'
 const indexPage = new IndexPage()
 
 test('should find the most recent signal', async ({ page }) => {
-  const basicEdgeFn = `const processSignal = (signal) => {
+  const basicEdgeFn = `globalThis.processSignal = (signal) => {
   if (signal.type === 'interaction' && signal.data.target.id === 'complex-button') {
     const mostRecentSignal = signals.find(signal, 'userDefined')
     if (mostRecentSignal.data.num === 2) {
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/signals-ingestion.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/signals-ingestion.test.ts
@@ -4,7 +4,7 @@ import { waitForCondition } from '../../helpers/playwright-utils'
 
 const indexPage = new IndexPage()
 
-const basicEdgeFn = `const processSignal = (signal) => {}`
+const basicEdgeFn = `globalThis.processSignal = (signal) => {}`
 
 test('debug ingestion disabled and sample rate 0 -> will not send the signal', async ({
   page,
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/signals-redaction.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/signals-redaction.test.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 import { waitForCondition } from '../../helpers/playwright-utils'
 import { IndexPage } from './index-page'
 
-const basicEdgeFn = `const processSignal = (signal) => {}`
+const basicEdgeFn = `globalThis.processSignal = (signal) => {}`
 
 test('redaction enabled -> will XXX the value of text input', async ({
   page,
diff --git a/packages/signals/signals-integration-tests/src/tests/signals-vanilla/top-level-metadata.test.ts b/packages/signals/signals-integration-tests/src/tests/signals-vanilla/top-level-metadata.test.ts
@@ -4,7 +4,7 @@ import { IndexPage } from './index-page'
 
 const basicEdgeFn = `
     // this is a process signal function
-    const processSignal = (signal) => {
+    globalThis.processSignal = (signal) => {
       if (signal.type === 'interaction') {
         analytics.track('hello', { myAnonId: signal.anonymousId, myTimestamp: signal.timestamp })
       } 
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
diff --git a/packages/signals/signals/src/core/processor/processor.ts b/packages/signals/signals/src/core/processor/processor.ts
diff --git a/packages/signals/signals/src/core/processor/sandbox.ts b/packages/signals/signals/src/core/processor/sandbox.ts
diff --git a/packages/signals/signals/src/core/signals/settings.ts b/packages/signals/signals/src/core/signals/settings.ts
diff --git a/packages/signals/signals/src/lib/load-script/index.ts b/packages/signals/signals/src/lib/load-script/index.ts
diff --git a/packages/signals/signals/src/plugin/signals-plugin.ts b/packages/signals/signals/src/plugin/signals-plugin.ts
diff --git a/packages/signals/signals/src/types/settings.ts b/packages/signals/signals/src/types/settings.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@segment/analytics-signals': minor
 +---
++
 +Fix CSP errors with sandboxStrategy: global