feat(context): stamp CSP nonce on injected style/script in runVariation

Mirrors the tracking-script monolith's contentSecurityPolicyNonce
plumbing (public/js/tracking/src/render.ts and workflow.ts in the
backend repo). Without this, runVariation's <style> and <script>
elements are silently blocked on customer sites enforcing
`style-src 'nonce-…'; script-src 'nonce-…'` — the visitor is bucketed
as having seen the variation but the DOM mutation never lands, biasing
experiment results toward "variation has no effect."

Resolution order matches the tracking script's
getContentSecurityPolicyNonce():
  1. Config.contentSecurityPolicyNonce (explicit, set at SDK init).
  2. document.querySelector('[nonce]') — first nonced element on the
     page. Reads `el.nonce` IDL first, falls back to getAttribute. The
     IDL property persists after the browser hides the HTML attribute
     post-connection, so this works for the bootstrap <script> the
     server already stamped.
Cached per-Context so the DOM scan happens at most once.

Applied via setAttribute('nonce', value) before appendChild in both
_injectStyle and _executeScript — the DOM-API equivalent of the
monolith's `nonce="${value}"` HTML-string injection.

Tests: three new Playwright cases covering the configured path, the
DOM-auto-detect path, and the no-nonce path (verifies no spurious empty
`nonce=""` attribute is added when there's nothing to stamp, which would
itself break some strict CSPs).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: JosephSamirL

packages/js-sdk/src/context.ts

@@ -56,6 +56,10 @@ export class Context implements ContextInterface {
   private _visitorId: string;
   private _visitorProperties: Record<string, any>;
   private _environment: string;
+  private _contentSecurityPolicyNonce?: string;
+  // `undefined` = not yet resolved; once resolved (either from config or
+  // DOM auto-detect) we cache to avoid re-querying the DOM on every change.
+  private _cspNonceResolved: boolean = false;
 
   /**
    * @param {Config} config
@@ -94,6 +98,7 @@ export class Context implements ContextInterface {
     this._visitorId = visitorId;
 
     this._config = config;
+    this._contentSecurityPolicyNonce = config?.contentSecurityPolicyNonce;
     this._eventManager = eventManager;
     this._experienceManager = experienceManager;
     this._featureManager = featureManager;
@@ -515,6 +520,45 @@ export class Context implements ContextInterface {
     }
   }
 
+  /**
+   * Resolve the CSP nonce to stamp on injected <style>/<script> elements.
+   * Mirrors the tracking-script monolith's `getContentSecurityPolicyNonce()`
+   * (workflow.ts in the backend repo):
+   *   1. Prefer the explicit `Config.contentSecurityPolicyNonce` value
+   *      captured at construction.
+   *   2. Otherwise scan the live DOM for any element carrying a `nonce`
+   *      attribute — read the IDL property first (it persists after the
+   *      browser hides the HTML attribute post-connection), fall back to
+   *      `getAttribute('nonce')` for non-script/style elements where the
+   *      attribute is still visible.
+   * Cached after first call so the DOM scan happens at most once per
+   * Context instance.
+   * @private
+   */
+  private _getCspNonce(): string | undefined {
+    if (this._cspNonceResolved) return this._contentSecurityPolicyNonce;
+    this._cspNonceResolved = true;
+    if (this._contentSecurityPolicyNonce) {
+      return this._contentSecurityPolicyNonce;
+    }
+    if (typeof document === 'undefined') return undefined;
+    try {
+      const nonceElement = document.querySelector('[nonce]');
+      if (nonceElement) {
+        this._contentSecurityPolicyNonce =
+          (nonceElement as HTMLElement & {nonce?: string}).nonce ||
+          nonceElement.getAttribute('nonce') ||
+          undefined;
+      }
+    } catch (error) {
+      this._loggerManager?.error?.(
+        'Context.runVariation()',
+        `Error reading nonce from DOM: ${(error as Error)?.message}`
+      );
+    }
+    return this._contentSecurityPolicyNonce;
+  }
+
   /**
    * Inject a <style> tag identified by markerId. No-op if already injected.
    * @private
@@ -525,6 +569,8 @@ export class Context implements ContextInterface {
       const style = document.createElement('style');
       style.id = markerId;
       style.setAttribute('type', 'text/css');
+      const nonce = this._getCspNonce();
+      if (nonce) style.setAttribute('nonce', nonce);
       style.appendChild(document.createTextNode(css));
       (document.head || document.documentElement).appendChild(style);
     } catch (error) {
@@ -547,6 +593,8 @@ export class Context implements ContextInterface {
       const script = document.createElement('script');
       script.id = markerId;
       script.setAttribute('type', 'text/javascript');
+      const nonce = this._getCspNonce();
+      if (nonce) script.setAttribute('nonce', nonce);
       script.appendChild(document.createTextNode(code));
       (document.head || document.documentElement).appendChild(script);
     } catch (error) {

packages/js-sdk/tests/browser/umd-bundle.spec.ts

@@ -709,6 +709,114 @@ test.describe('UMD bundle browser tests', () => {
       expect(result.errored).toBe(false);
       expect(result.cssApplied).toBe(true);
     });
+
+    test('Should stamp Config.contentSecurityPolicyNonce on injected style and script', async ({
+      page
+    }) => {
+      // CSP parity with the tracking-script monolith: every injected
+      // <style> / <script> must carry the configured nonce so customer
+      // sites enforcing `style-src 'nonce-…'; script-src 'nonce-…'` accept
+      // the elements instead of blocking them as CSP violations.
+      await setup(page);
+      await resetDomMarkers(page);
+      const result = await page.evaluate((fixture) => {
+        const context = (window as any).__defaultContext({
+          contentSecurityPolicyNonce: 'unit-test-nonce-abc'
+        });
+        context.runVariation(fixture.variation, {
+          experience: fixture.experience
+        });
+        const read = (id: string) =>
+          document.getElementById(id)?.getAttribute('nonce');
+        return {
+          globalCssNonce: read('conv-exp-rv-exp-1-global-css'),
+          globalJsNonce: read('conv-exp-rv-exp-1-global-js'),
+          changeCssNonce: read('conv-chg-rv-exp-1-999-101-css'),
+          changeJsNonce: read('conv-chg-rv-exp-1-999-101-js'),
+          customCssNonce: read('conv-chg-rv-exp-1-999-102-css'),
+          customJsNonce: read('conv-chg-rv-exp-1-999-102-custom-js')
+        };
+      }, makeFixture());
+      expect(result.globalCssNonce).toBe('unit-test-nonce-abc');
+      expect(result.globalJsNonce).toBe('unit-test-nonce-abc');
+      expect(result.changeCssNonce).toBe('unit-test-nonce-abc');
+      expect(result.changeJsNonce).toBe('unit-test-nonce-abc');
+      expect(result.customCssNonce).toBe('unit-test-nonce-abc');
+      expect(result.customJsNonce).toBe('unit-test-nonce-abc');
+    });
+
+    test('Should auto-detect CSP nonce from the DOM when not configured', async ({
+      page
+    }) => {
+      // Mirrors the tracking-script's getContentSecurityPolicyNonce():
+      // when Config.contentSecurityPolicyNonce is absent, scan the DOM for
+      // any element carrying a `nonce` attribute and reuse that value.
+      // Most server-rendered pages with a real CSP already have one such
+      // element (typically the bootstrap inline <script>), so the SDK
+      // works on CSP-strict sites without explicit configuration.
+      await setup(page);
+      await resetDomMarkers(page);
+      const result = await page.evaluate((fixture) => {
+        // Stamp a nonce on an existing inline element so the DOM scan
+        // picks it up. Reading via IDL first matches the tracking
+        // script's `nonceElement['nonce'] || getAttribute('nonce')`.
+        const seedScript = document.createElement('script');
+        seedScript.id = 'csp-seed-script';
+        seedScript.setAttribute('nonce', 'dom-detected-nonce-xyz');
+        document.head.appendChild(seedScript);
+
+        const context = (window as any).__defaultContext();
+        context.runVariation(fixture.variation, {
+          experience: fixture.experience
+        });
+
+        const read = (id: string) =>
+          document.getElementById(id)?.getAttribute('nonce');
+        const out = {
+          globalCssNonce: read('conv-exp-rv-exp-1-global-css'),
+          changeCssNonce: read('conv-chg-rv-exp-1-999-101-css'),
+          customJsNonce: read('conv-chg-rv-exp-1-999-102-custom-js')
+        };
+        seedScript.remove();
+        return out;
+      }, makeFixture());
+      expect(result.globalCssNonce).toBe('dom-detected-nonce-xyz');
+      expect(result.changeCssNonce).toBe('dom-detected-nonce-xyz');
+      expect(result.customJsNonce).toBe('dom-detected-nonce-xyz');
+    });
+
+    test('Should not stamp a nonce attribute when none is configured or in DOM', async ({
+      page
+    }) => {
+      // Preserves the previous behavior (no nonce attribute at all) for
+      // sites without a CSP — adding an empty `nonce=""` would invalidate
+      // some strict CSPs that require a specific nonce value.
+      await setup(page);
+      await resetDomMarkers(page);
+      const result = await page.evaluate((fixture) => {
+        // Defensive: drop any pre-existing nonced elements so the DOM
+        // auto-detect doesn't pick up something the test page injected.
+        document
+          .querySelectorAll('[nonce]')
+          .forEach((el) => el.removeAttribute('nonce'));
+        const context = (window as any).__defaultContext();
+        context.runVariation(fixture.variation, {
+          experience: fixture.experience
+        });
+        const hasNonce = (id: string) =>
+          document.getElementById(id)?.hasAttribute('nonce') ?? null;
+        return {
+          globalCss: hasNonce('conv-exp-rv-exp-1-global-css'),
+          globalJs: hasNonce('conv-exp-rv-exp-1-global-js'),
+          changeCss: hasNonce('conv-chg-rv-exp-1-999-101-css'),
+          changeJs: hasNonce('conv-chg-rv-exp-1-999-101-js')
+        };
+      }, makeFixture());
+      expect(result.globalCss).toBe(false);
+      expect(result.globalJs).toBe(false);
+      expect(result.changeCss).toBe(false);
+      expect(result.changeJs).toBe(false);
+    });
   });
 
   test.describe('Test invalid visitor', () => {

packages/types/src/Config.ts

@@ -40,6 +40,23 @@ type ConfigBase = {
    * contract.
    */
   ruleDataProvider?: RuleDataProvider;
+  /**
+   * Optional CSP nonce stamped on `<style>` and `<script>` elements
+   * injected by `Context.runVariation` (web variation rendering).
+   * Mirrors the tracking-script monolith's `state.contentSecurityPolicyNonce`
+   * (see `public/js/tracking/src/render.ts` and `workflow.ts` in the
+   * backend repo) so customer sites that enforce
+   * `script-src 'nonce-…'; style-src 'nonce-…'` accept the injected
+   * elements instead of blocking them as CSP violations.
+   *
+   * When omitted, `runVariation` falls back to reading the nonce from
+   * the live DOM (`document.querySelector('[nonce]')`) at first use,
+   * matching the tracking script's `getContentSecurityPolicyNonce()`
+   * heuristic — most server-rendered pages already carry a nonce on at
+   * least one inline `<script>` or `<style>`, so auto-detection covers
+   * the common case without requiring explicit configuration.
+   */
+  contentSecurityPolicyNonce?: string;
   dataRefreshInterval?: number;
   events?: {
     batch_size?: number;