@joryio/web-sdk 1.3.0 → 1.3.1-beta.2

package/src/core/inapp.ts

@@ -96,7 +96,17 @@ export interface InAppCampaign {
    * verbatim on web. Server-rendered HTML is now the only thing sent.
    */
   content?:
-    | { kind: 'html'; html: string; css: string; assets?: unknown[] }
+    | {
+        kind: 'html';
+        html: string;
+        css: string;
+        assets?: unknown[];
+        /**
+         * Widest the message may be, in CSS px. Sent for `modal` and `slideup`,
+         * already resolved by the server; see inAppMaxWidth for the fallback.
+         */
+        maxWidth?: number;
+      }
     | {
         kind: 'native';
         title?: string;
@@ -202,6 +212,39 @@ export function escapeStyleText(css: string): string {
   return typeof css === 'string' ? css.replace(/<\//g, '<\\/') : '';
 }
 
+/**
+ * The width a content-sized HTML message gets when its payload carries no
+ * `maxWidth` (a server that predates the field). The same two numbers as the
+ * backend's IN_APP_DEFAULT_MAX_WIDTH and every other SDK; the server normally
+ * sends the resolved value, so this is only ever a fallback.
+ */
+export const IN_APP_DEFAULT_MAX_WIDTH = { modal: 600, slideup: 400 } as const;
+
+/** Space kept between a content-sized message and each side of the viewport, in px. */
+export const IN_APP_VIEWPORT_MARGIN = 16;
+
+/**
+ * The maxWidth for this campaign, or null when its type is not content-sized
+ * (banner and fullscreen span the page; custom is the host's to place) or its
+ * content is native (the card has its own width).
+ */
+export function inAppMaxWidth(campaign: Pick<InAppCampaign, 'type' | 'content'>): number | null {
+  if (campaign.type !== 'modal' && campaign.type !== 'slideup') return null;
+  if (campaign.content?.kind !== 'html') return null;
+  const mw = campaign.content.maxWidth;
+  return typeof mw === 'number' && Number.isFinite(mw) && mw > 0 ? Math.floor(mw) : IN_APP_DEFAULT_MAX_WIDTH[campaign.type];
+}
+
+/**
+ * The width the message frame is given: min(maxWidth, viewport - margin on
+ * each side). Set BEFORE the content lays out, so the author's media queries
+ * see the width the message really has; only the height follows the content.
+ */
+export function inAppFrameWidth(maxWidth: number, viewportWidth: number, margin: number = IN_APP_VIEWPORT_MARGIN): number {
+  const available = Math.max(0, Math.floor(viewportWidth) - 2 * margin);
+  return Math.max(0, Math.min(Math.floor(maxWidth), available));
+}
+
 // Host-window key the in-app iframes call into (same-origin). Internal.
 const HOST_BRIDGE_KEY = '__joryioInApp';
 
@@ -379,12 +422,23 @@ export class InAppMessagingManager {
   private claimed = new Set<string>();
   // Per-campaign content iframe (so we can auto-size + clean it up).
   private iframes: Map<string, HTMLIFrameElement> = new Map();
+  /**
+   * maxWidth of each displayed content-sized (modal / slideup) HTML message.
+   * Their frame width is derived from it and the host viewport, and re-derived
+   * when the viewport changes - see sizeContentFrame.
+   */
+  private frameMaxWidths: Map<string, number> = new Map();
+  private viewportListener?: () => void;
+  private viewportTimer?: ReturnType<typeof setTimeout>;
 
   /**
-   * Whether HTML in-app messages may run. Off by default, because an HTML
-   * message executes author-supplied JavaScript on the host page - which is
-   * exactly why it is rendered in a sandboxed iframe. Native messages are
-   * unaffected: they are data rendered as DOM, with no interpreter.
+   * Whether HTML in-app messages are displayed. Off by default. The markup
+   * is kept as written by the server, and author scripts in it do NOT run:
+   * the frame's per-message nonce CSP (buildSrcdoc) lets only the SDK's own
+   * bridge bootstrap execute. But that frame can execute script at the host
+   * page's origin, so a gap in the CSP would be XSS - hence opt-in. Native
+   * messages are unaffected: they are data rendered as DOM, with no
+   * interpreter.
    */
   private allowHtmlJsInAppMessages = false;
 
@@ -579,10 +633,15 @@ export class InAppMessagingManager {
         this.trackImpression(campaignId, 'clicked').catch(() => {});
         return this.submitForm(campaignId, values);
       },
-      // Size the content iframe from the message's reported dimensions. For
-      // content-sized types (modal/slideup) both width + height track the content;
-      // banner/fullscreen stay full-width (height tracks content for banner).
-      setSize: (campaignId: string, width: number, height: number) => {
+      // Size the content iframe from the message's reported dimensions. Only
+      // the HEIGHT follows the content. The width is the host's decision:
+      // modal/slideup get min(maxWidth, viewport - margin) before the content
+      // lays out (sizeContentFrame), banner/fullscreen are 100%. Following the
+      // reported width is what made responsive messages impossible - the frame
+      // started narrow, the author's media queries fired, the content measured
+      // narrow, and the frame stayed narrow. `width` stays in the signature so
+      // the bridge every message calls is unchanged.
+      setSize: (campaignId: string, _width: number, height: number) => {
         // Guard on the iframe (the thing being sized), set synchronously in
         // display() — not displayedMessages, so a setSize on iframe-load is never
         // rejected by a timing gap.
@@ -590,9 +649,6 @@ export class InAppMessagingManager {
         if (!iframe || !Number.isFinite(height) || height <= 0) return;
         const type = this.displayedMessages.get(campaignId)?.campaign.type;
         iframe.style.height = type === 'fullscreen' ? '100%' : `${Math.ceil(height)}px`;
-        if ((type === 'modal' || type === 'slideup') && Number.isFinite(width) && width > 0) {
-          iframe.style.width = `${Math.ceil(width)}px`;
-        }
       },
     };
   }
@@ -1203,8 +1259,9 @@ export class InAppMessagingManager {
 
     if (kind === 'html') {
       if (!renderedHtml.trim()) return 'its `content.html` is empty';
-      // A SKIP, not a failure: HTML runs author-supplied JavaScript on the host
-      // page, so an integration that has not opted in never creates the iframe.
+      // A SKIP, not a failure: HTML is shown in a frame that can execute script
+      // at the host page's origin (only the SDK bridge, under the nonce CSP),
+      // so an integration that has not opted in never creates the iframe.
       if (!this.allowHtmlJsInAppMessages) {
         return 'it is an HTML message and allowHtmlJsInAppMessages is false';
       }
@@ -1459,11 +1516,14 @@ export class InAppMessagingManager {
     // Render the message HTML inside a SAME-ORIGIN SANDBOXED iframe. The sandbox
     // (allow-scripts allow-same-origin) is the isolation/encapsulation boundary
     // — message CSS can't leak to the host and host CSS can't bleed in — and it
-    // lets the message's own JS run AND reach `joryioBridge`. Same-origin is
-    // required so `joryioBridge.requestPushPermission()` keeps the click's
+    // lets the SDK's bridge bootstrap run AND reach `joryioBridge`. Same-origin
+    // is required so `joryioBridge.requestPushPermission()` keeps the click's
     // user-gesture activation (a cross-origin postMessage hop would lose it).
-    // Content is first-party (authored in-dashboard + sanitized server-side on
-    // save); the sandbox is defense-in-depth, not the only line.
+    // Author scripts and on* handlers do NOT run: the server keeps the markup
+    // as written (sanitizeInAppHtml drops only <base> and meta refresh), and
+    // the srcdoc's nonce CSP (buildSrcdoc) is what stops them. The sandbox and
+    // the navigation rules contain the rest; there is no server sanitiser in
+    // front of this.
     const iframe = document.createElement('iframe');
     iframe.id = `joryio-iframe-${campaign.id}`;
     // ── Native content: build DOM directly, no iframe ───────────────────────
@@ -1649,9 +1709,9 @@ export class InAppMessagingManager {
     let isDismissing = false;
 
     if (campaign.content?.kind !== 'native') {
-      // HTML runs author-supplied JavaScript on this page - which is why the
-      // iframe exists at all. An integration that has not opted in never creates
-      // one. This is a SKIP, not a failure: native messages still display,
+      // HTML is shown in an iframe that can execute script at this page's
+      // origin (only the SDK bridge - the nonce CSP blocks author script). An
+      // integration that has not opted in never creates one. This is a SKIP, not a failure: native messages still display,
       // because they are data rendered as DOM with no interpreter.
       if (!this.allowHtmlJsInAppMessages) {
         this.logger.warn(
@@ -1661,7 +1721,8 @@ export class InAppMessagingManager {
         return;
       }
 
-      // allow-scripts/allow-same-origin: run the message JS + reach the bridge.
+      // allow-scripts/allow-same-origin: run the SDK bridge bootstrap (the
+      // nonce CSP blocks every other script) + reach the host bridge.
       // allow-popups: a CTA may open a new tab. NOT allow-top-navigation: every
       // link and redirect goes through the bridge's `navigate`, which the HOST
       // page carries out (rule 57) - the message document itself may never
@@ -1688,12 +1749,22 @@ export class InAppMessagingManager {
       });
       iframe.setAttribute('title', campaign.name || 'Message');
       // Start at 0 height (avoids the ~150px default-iframe flash); the bootstrap
-      // reports real size on load via the bridge's setSize. Banner/fullscreen fill
-      // width; modal/slideup get their content width from setSize.
+      // reports real height on load via the bridge's setSize. Banner/fullscreen
+      // fill the width; modal/slideup get min(maxWidth, viewport - margin) NOW,
+      // before the document loads, so its media queries see the real width.
       iframe.style.height = '0';
       if (campaign.type === 'banner' || campaign.type === 'fullscreen') {
         iframe.style.width = '100%';
       }
+      const maxWidth = inAppMaxWidth(campaign);
+      if (maxWidth !== null) {
+        // The frame width already keeps the margin, so the container's own
+        // caps (90% for modal, 400px for slide-up) would only clip it.
+        container.style.maxWidth = 'none';
+        this.frameMaxWidths.set(campaign.id, maxWidth);
+        iframe.style.width = `${inAppFrameWidth(maxWidth, this.hostViewportWidth())}px`;
+        this.watchViewport();
+      }
       iframe.srcdoc = this.buildSrcdoc(
         campaign.id,
         renderedHtml,
@@ -1788,6 +1859,51 @@ export class InAppMessagingManager {
     this.logger.info(`Displayed campaign: ${campaign.name} (${campaign.id})`);
   }
 
+  /** The host page's layout width: without the scrollbar where the browser says so. */
+  private hostViewportWidth(): number {
+    const doc = typeof document !== 'undefined' ? document.documentElement : null;
+    const cw = doc && typeof doc.clientWidth === 'number' ? doc.clientWidth : 0;
+    if (cw > 0) return cw;
+    return typeof window !== 'undefined' && typeof window.innerWidth === 'number' ? window.innerWidth : 0;
+  }
+
+  /** Re-derive a content-sized frame's width from its maxWidth and the viewport. */
+  private sizeContentFrame(campaignId: string): void {
+    const iframe = this.iframes.get(campaignId);
+    const maxWidth = this.frameMaxWidths.get(campaignId);
+    if (!iframe || maxWidth === undefined) return;
+    iframe.style.width = `${inAppFrameWidth(maxWidth, this.hostViewportWidth())}px`;
+  }
+
+  /**
+   * Follow the viewport while a content-sized message is open: rotate a phone
+   * or narrow a window and the message is re-fitted (debounced). The content's
+   * ResizeObserver then reports the height at the new width.
+   */
+  private watchViewport(): void {
+    if (this.viewportListener || typeof window === 'undefined' || typeof window.addEventListener !== 'function') return;
+    this.viewportListener = () => {
+      if (this.viewportTimer) clearTimeout(this.viewportTimer);
+      this.viewportTimer = setTimeout(() => {
+        this.viewportTimer = undefined;
+        for (const id of this.frameMaxWidths.keys()) this.sizeContentFrame(id);
+      }, 100);
+    };
+    window.addEventListener('resize', this.viewportListener);
+  }
+
+  private unwatchViewportIfIdle(): void {
+    if (this.frameMaxWidths.size > 0 || !this.viewportListener) return;
+    if (typeof window !== 'undefined' && typeof window.removeEventListener === 'function') {
+      window.removeEventListener('resize', this.viewportListener);
+    }
+    this.viewportListener = undefined;
+    if (this.viewportTimer) {
+      clearTimeout(this.viewportTimer);
+      this.viewportTimer = undefined;
+    }
+  }
+
   /**
    * Build the iframe srcdoc: the message HTML + its CSS + a bootstrap that
    * (a) exposes `window.joryioBridge` (proxying same-origin to the host bridge),
@@ -1800,8 +1916,9 @@ export class InAppMessagingManager {
    * event name, received `undefined`, and the host guard dropped it - a control
    * that looked like it worked and logged nothing. Verbs taking two arguments
    * (`navigate`) still cannot be driven declaratively.
-   * NOT sanitized here — the sandbox is the boundary and the HTML is first-party
-   * (dashboard-authored + sanitized server-side on save). campaignId + the host
+   * NOT sanitized here, nor by the server beyond <base> and meta refresh: the
+   * nonce CSP below is what keeps author script from running, and the sandbox
+   * and navigation rules contain the document. campaignId + the host
    * key are injected as JSON literals (our own values).
    */
   private buildSrcdoc(
@@ -1812,13 +1929,19 @@ export class InAppMessagingManager {
   ): string {
     const cid = JSON.stringify(campaignId);
     const key = JSON.stringify(HOST_BRIDGE_KEY);
-    // Content-sized types shrink the body to its content so scrollWidth reflects
-    // the authored width (the host sets the iframe to it). Full-bleed types keep
-    // body at full width (the host forces the iframe to 100%, ignoring width).
+    // Content-sized types: the HOST picks the width (min(maxWidth, viewport -
+    // margin)) and only the height follows the content. The body used to be
+    // inline-block so its width could be measured and the frame set to it -
+    // which let the frame start narrow and stay narrow. Now the body is a
+    // normal block at the frame's width; flow-root keeps the first and last
+    // child's margins inside it, so its height is the content's height.
+    // That height is measured from the BODY: the root's scrollHeight is never
+    // less than the frame itself, so a message that got shorter (wider
+    // viewport, a form message replaced by a line) could never shrink back.
     const contentSized = type === 'modal' || type === 'slideup';
-    const bodySizing = contentSized ? 'body{display:inline-block;max-width:100vw;}' : '';
+    const bodySizing = contentSized ? 'body{display:flow-root;}' : '';
     const bootstrap = `(function(){
-      var CID=${cid},KEY=${key};
+      var CID=${cid},KEY=${key},SIZED=${contentSized ? 'true' : 'false'};
       // Per-device visibility: tag the root with the REAL device class from the
       // HOST page viewport (the iframe is message-sized, so its own innerWidth is
       // useless here). The jr-vp-* → jr-hide-* rules in <style> then hide elements
@@ -1867,7 +1990,7 @@ export class InAppMessagingManager {
         var p=window.joryioBridge.submitForm(d);if(!p||typeof p.then!=='function'){msg('This form cannot be sent here.',false);f.removeAttribute('data-jry-busy');if(btn)btn.disabled=false;return}
         p.then(function(r){if(r&&r.ok){if(r.redirect){window.joryioBridge.navigate(r.redirect,'_top');return}var els2=f.querySelectorAll('input,select,textarea,button');for(var j=0;j<els2.length;j++){els2[j].disabled=true}msg(r.message||'Thank you.',true)}else{msg((r&&(r.message||(r.errors&&r.errors[0])))||'Something went wrong. Please try again.',false);f.removeAttribute('data-jry-busy');if(btn)btn.disabled=false}}).catch(function(){msg('Something went wrong. Please try again.',false);f.removeAttribute('data-jry-busy');if(btn)btn.disabled=false});
       },true);
-      function reportSize(){try{var b=document.body,de=document.documentElement;var w=Math.max(b?b.scrollWidth:0,de.scrollWidth);var h=Math.max(b?b.scrollHeight:0,de.scrollHeight);call('setSize',[w,h]);}catch(e){}}
+      function reportSize(){try{var b=document.body,de=document.documentElement;var w=Math.max(b?b.scrollWidth:0,de.scrollWidth);var h=SIZED&&b?Math.ceil(Math.max(b.scrollHeight,b.getBoundingClientRect?b.getBoundingClientRect().height:0)):Math.max(b?b.scrollHeight:0,de.scrollHeight);call('setSize',[w,h]);}catch(e){}}
       if(document.readyState!=='loading')reportSize();else document.addEventListener('DOMContentLoaded',reportSize);
       window.addEventListener('load',reportSize);
       try{if(window.ResizeObserver&&document.body){new ResizeObserver(reportSize).observe(document.body);}}catch(e){}
@@ -1880,22 +2003,20 @@ export class InAppMessagingManager {
     /*
      * A per-document CSP, and the nonce is the point.
      *
-     * The server strips <script> and every on* handler before this HTML is
-     * sent, so no author JavaScript runs today. The residual risk is a
-     * SANITISER BYPASS - mXSS in HTML sanitisers is a recurring class - and
-     * because this iframe is `allow-scripts allow-same-origin`, injected script
-     * would run at the HOST PAGE'S ORIGIN. That is XSS on a customer's site,
-     * reachable from a compromised marketing account.
+     * The server keeps the author's markup as written (sanitizeInAppHtml drops
+     * only <base> and meta refresh), so author <script> blocks and on*
+     * handlers ARE in this document. Because this iframe is `allow-scripts
+     * allow-same-origin`, they would run at the HOST PAGE'S ORIGIN - XSS on a
+     * customer's site, reachable from a compromised marketing account.
      *
-     * `script-src 'nonce-...'` closes that: only the bootstrap below carries
-     * the nonce, so anything that survives sanitisation still cannot execute.
-     * Two independent controls instead of one, which matters when the first is
-     * a parser fighting an adversary.
+     * `script-src 'nonce-...'` is the control: only the bootstrap below carries
+     * the nonce, so nothing the author wrote executes. There is no server
+     * sanitiser in front of it; this CSP is the first line, not a backstop.
      *
      * The rest is least-privilege for content that is only ever a message:
      *   default-src 'none'  nothing is allowed unless named below
-     *   style-src unsafe-inline  the sanitiser ALLOWS style="" attributes, so
-     *                       this must stay permissive; styles cannot execute
+     *   style-src unsafe-inline  author style="" attributes are kept, so this
+     *                       must stay permissive; styles cannot execute
      *   img/media/font https: data:  no http subresources - the mixed-content
      *                       control Android enforced and iOS could not
      *   upgrade-insecure-requests  an author's http image is upgraded rather
@@ -1984,6 +2105,8 @@ export class InAppMessagingManager {
       container.remove(); // also removes the child content iframe
     }
     this.iframes.delete(campaignId);
+    this.frameMaxWidths.delete(campaignId);
+    this.unwatchViewportIfIdle();
     if (backdrop) {
       backdrop.remove();
     }
@@ -2343,6 +2466,8 @@ export class InAppMessagingManager {
     this.displayedMessages.clear();
     this.watchedAttributes.clear();
     this.iframes.clear();
+    this.frameMaxWidths.clear();
+    this.unwatchViewportIfIdle();
 
     this.logger.info('In-app messaging state cleared');
   }
@@ -2408,6 +2533,8 @@ export class InAppMessagingManager {
     this.impressionTimestamps.clear();
     this.watchedAttributes.clear();
     this.iframes.clear();
+    this.frameMaxWidths.clear();
+    this.unwatchViewportIfIdle();
 
     // Tear down the host bridge so a later new JoryioSDK() rebinds a fresh one
     // (installHostBridge overwrites, but clearing here avoids a dangling closure