@pushwoosh/dumb-components 1.1.171 → 1.1.172

package/RichmediaPreview/RichmediaPreview.d.ts

@@ -1,8 +1,10 @@
 import { type ReactElement } from 'react';
 import type { RichmediaPreviewProps } from './types';
 /**
- * Renders a rich-media (in-app) template in a sandboxed iframe, resolving params and
- * localization via {@link useRichmediaHtml}.
+ * Renders a rich-media (in-app) template in a fully isolated sandboxed iframe, resolving
+ * params and localization via {@link useRichmediaHtml}. Template scripts run in an opaque
+ * origin (via {@link SandboxedHtmlFrame}) and cannot reach the control-panel session,
+ * cookies, storage or parent DOM.
  *
  * @example
  * <RichmediaPreview name="Promo" content={html} params={params} language="en" />

package/RichmediaPreview/RichmediaPreview.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Spinner } from '../Spinner';
 import { useRichmediaHtml } from './hooks';
 import { RichMediaPreviewContainer, RichMediaPreviewIframe } from './styles';
 /**
- * Renders a rich-media (in-app) template in a sandboxed iframe, resolving params and
- * localization via {@link useRichmediaHtml}.
+ * Renders a rich-media (in-app) template in a fully isolated sandboxed iframe, resolving
+ * params and localization via {@link useRichmediaHtml}. Template scripts run in an opaque
+ * origin (via {@link SandboxedHtmlFrame}) and cannot reach the control-panel session,
+ * cookies, storage or parent DOM.
  *
  * @example
  * <RichmediaPreview name="Promo" content={html} params={params} language="en" />
@@ -23,7 +24,6 @@ export function RichmediaPreview(props) {
     height = 480,
     isLoading = false
   } = props;
-  const $ref = useRef(null);
   const richmediaHtml = useRichmediaHtml({
     content,
     params,
@@ -31,15 +31,6 @@ export function RichmediaPreview(props) {
     defaultLanguage,
     baseUrl
   });
-  useEffect(() => {
-    var _$ref$current;
-    if (!($ref !== null && $ref !== void 0 && (_$ref$current = $ref.current) !== null && _$ref$current !== void 0 && (_$ref$current = _$ref$current.contentWindow) !== null && _$ref$current !== void 0 && _$ref$current.document)) {
-      return;
-    }
-    $ref.current.contentWindow.document.open('text/html', 'replace');
-    $ref.current.contentWindow.document.write(richmediaHtml);
-    $ref.current.contentWindow.document.close();
-  }, [$ref, richmediaHtml]);
   return _jsx(RichMediaPreviewContainer, {
     width: width,
     height: height,
@@ -49,9 +40,9 @@ export function RichmediaPreview(props) {
       size: "medium",
       color: Color.LOCKED
     }) : _jsx(RichMediaPreviewIframe, {
-      ref: $ref,
+      mode: "isolated",
       title: name,
-      sandbox: "allow-same-origin allow-scripts"
+      html: richmediaHtml
     })
   });
 }

package/RichmediaPreview/styles.d.ts

@@ -1,3 +1,4 @@
+import { SandboxedHtmlFrame } from '../SandboxedHtmlFrame';
 export declare const RichMediaPreviewContainer: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
     $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
@@ -14,4 +15,4 @@ export declare const RichMediaPreviewContainer: import("styled-components").Styl
     height: string | number;
     $isLoading?: boolean;
 }, "$gridAutoFlow">;
-export declare const RichMediaPreviewIframe: import("styled-components").StyledComponent<"iframe", any, {}, never>;
+export declare const RichMediaPreviewIframe: import("styled-components").StyledComponent<typeof SandboxedHtmlFrame, any, {}, never>;

package/RichmediaPreview/styles.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Vertical, toCssValue } from '@pushwoosh/kit-helpers';
+import { SandboxedHtmlFrame } from '../SandboxedHtmlFrame';
 export const RichMediaPreviewContainer = styled(Vertical).withConfig({
   displayName: "RichMediaPreviewContainer",
   componentId: "sc-1ci6l2b-0"
@@ -11,7 +12,7 @@ export const RichMediaPreviewContainer = styled(Vertical).withConfig({
 }) => toCssValue(height), ShapeRadius.SECTION, ({
   $isLoading
 }) => $isLoading ? Color.FROZEN : Color.CLEAR);
-export const RichMediaPreviewIframe = styled.iframe.withConfig({
+export const RichMediaPreviewIframe = styled(SandboxedHtmlFrame).withConfig({
   displayName: "RichMediaPreviewIframe",
   componentId: "sc-1ci6l2b-1"
 })(["position:absolute;left:-50%;top:-50%;width:200%;height:200%;transform:scale(0.51);"]);

package/SandboxedHtmlFrame/SandboxedHtmlFrame.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement } from 'react';
+import type { SandboxedHtmlFrameProps } from './types';
+/**
+ * Renders untrusted HTML inside a sandboxed iframe. The `mode` fixes the security
+ * boundary so scripts and same-origin access can never be granted together:
+ *
+ * - `isolated` — `sandbox="allow-scripts"`; scripts run in an opaque origin and cannot
+ *   touch the embedding page. The parent gets no DOM access.
+ * - `inspectable` — `sandbox="allow-same-origin"`; scripts are disabled, but the parent
+ *   keeps read access to the frame document via `onReady`.
+ *
+ * @example
+ * <SandboxedHtmlFrame mode="isolated" html={html} title="Preview" />
+ * <SandboxedHtmlFrame mode="inspectable" html={html} title="Stats" onReady={decorate} />
+ */
+export declare function SandboxedHtmlFrame(props: SandboxedHtmlFrameProps): ReactElement;

package/SandboxedHtmlFrame/SandboxedHtmlFrame.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+const SANDBOX = {
+  isolated: 'allow-scripts',
+  inspectable: 'allow-same-origin'
+};
+/**
+ * Renders untrusted HTML inside a sandboxed iframe. The `mode` fixes the security
+ * boundary so scripts and same-origin access can never be granted together:
+ *
+ * - `isolated` — `sandbox="allow-scripts"`; scripts run in an opaque origin and cannot
+ *   touch the embedding page. The parent gets no DOM access.
+ * - `inspectable` — `sandbox="allow-same-origin"`; scripts are disabled, but the parent
+ *   keeps read access to the frame document via `onReady`.
+ *
+ * @example
+ * <SandboxedHtmlFrame mode="isolated" html={html} title="Preview" />
+ * <SandboxedHtmlFrame mode="inspectable" html={html} title="Stats" onReady={decorate} />
+ */
+export function SandboxedHtmlFrame(props) {
+  const {
+    mode,
+    html,
+    title,
+    className
+  } = props;
+  const onReady = mode === 'inspectable' ? props.onReady : undefined;
+  const $ref = useRef(null);
+  const [isReady, setIsReady] = useState(false);
+  useEffect(() => {
+    setIsReady(false);
+  }, [html]);
+  const handleLoad = useCallback(() => {
+    setIsReady(true);
+  }, []);
+  useEffect(() => {
+    var _$ref$current;
+    if (!isReady || !onReady) {
+      return undefined;
+    }
+    const frameDocument = (_$ref$current = $ref.current) === null || _$ref$current === void 0 ? void 0 : _$ref$current.contentDocument;
+    if (!frameDocument) {
+      return undefined;
+    }
+    return onReady(frameDocument);
+  }, [isReady, onReady]);
+  return _jsx("iframe", {
+    ref: $ref,
+    className: className,
+    title: title,
+    srcDoc: html,
+    sandbox: SANDBOX[mode],
+    onLoad: handleLoad
+  });
+}

package/SandboxedHtmlFrame/__tests__/SandboxedHtmlFrame.test.d.ts

@@ -0,0 +1 @@
+export {};

package/SandboxedHtmlFrame/__tests__/SandboxedHtmlFrame.test.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { SandboxedHtmlFrame } from '../SandboxedHtmlFrame';
+const HTML = '<p>content</p>';
+function getFrame(container) {
+  const frame = container.querySelector('iframe');
+  if (!frame) {
+    throw new Error('iframe not rendered');
+  }
+  return frame;
+}
+describe('SandboxedHtmlFrame', () => {
+  it('isolates scripts in an opaque origin without same-origin access', () => {
+    const {
+      container
+    } = render(_jsx(SandboxedHtmlFrame, {
+      mode: "isolated",
+      title: "preview",
+      html: HTML
+    }));
+    const frame = getFrame(container);
+    expect(frame.getAttribute('sandbox')).toBe('allow-scripts');
+    expect(frame.getAttribute('srcdoc')).toBe(HTML);
+    expect(frame).toHaveAttribute('title', 'preview');
+  });
+  it('grants same-origin access but disables scripts in inspectable mode', () => {
+    const {
+      container
+    } = render(_jsx(SandboxedHtmlFrame, {
+      mode: "inspectable",
+      title: "stats",
+      html: HTML
+    }));
+    const frame = getFrame(container);
+    expect(frame.getAttribute('sandbox')).toBe('allow-same-origin');
+    expect(frame.getAttribute('sandbox')).not.toContain('allow-scripts');
+  });
+  it('never emits allow-scripts together with allow-same-origin', () => {
+    const isolated = render(_jsx(SandboxedHtmlFrame, {
+      mode: "isolated",
+      title: "a",
+      html: HTML
+    }));
+    const inspectable = render(_jsx(SandboxedHtmlFrame, {
+      mode: "inspectable",
+      title: "b",
+      html: HTML
+    }));
+    [isolated, inspectable].forEach(({
+      container
+    }) => {
+      const sandbox = getFrame(container).getAttribute('sandbox') ?? '';
+      const hasBoth = sandbox.includes('allow-scripts') && sandbox.includes('allow-same-origin');
+      expect(hasBoth).toBe(false);
+    });
+  });
+});

package/SandboxedHtmlFrame/index.d.ts

@@ -0,0 +1,2 @@
+export { SandboxedHtmlFrame } from './SandboxedHtmlFrame';
+export type { SandboxedHtmlFrameProps, IsolatedSandboxedHtmlFrameProps, InspectableSandboxedHtmlFrameProps, } from './types';

package/SandboxedHtmlFrame/index.js

@@ -0,0 +1 @@
+export { SandboxedHtmlFrame } from './SandboxedHtmlFrame';

package/SandboxedHtmlFrame/types.d.ts

@@ -0,0 +1,33 @@
+type SandboxedHtmlFrameBaseProps = {
+    /** Untrusted HTML rendered inside the iframe via `srcDoc`. */
+    html: string;
+    /** Accessible title of the iframe. */
+    title: string;
+    /** Forwarded to the iframe element so consumers can size it via `styled()`. */
+    className?: string;
+};
+/**
+ * Fully isolated rendering: scripts run inside an opaque origin and cannot reach the
+ * embedding page (cookies, storage, parent DOM). Use for pure visual previews of
+ * untrusted content.
+ */
+export type IsolatedSandboxedHtmlFrameProps = SandboxedHtmlFrameBaseProps & {
+    mode: 'isolated';
+    onReady?: never;
+};
+/**
+ * Inspectable rendering: scripts are disabled entirely, but the embedding page keeps
+ * same-origin read access to the frame document. Use when the parent must measure or
+ * decorate the rendered DOM (e.g. an interaction heatmap).
+ */
+export type InspectableSandboxedHtmlFrameProps = SandboxedHtmlFrameBaseProps & {
+    mode: 'inspectable';
+    /**
+     * Called with the frame document once it has loaded, and again whenever the callback
+     * identity changes. May return a cleanup run before the next call and on unmount.
+     */
+    onReady?: (document: Document) => void | (() => void);
+};
+/** Props of {@link SandboxedHtmlFrame}. */
+export type SandboxedHtmlFrameProps = IsolatedSandboxedHtmlFrameProps | InspectableSandboxedHtmlFrameProps;
+export {};

package/SandboxedHtmlFrame/types.js

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -43,6 +43,7 @@ export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
+export { SandboxedHtmlFrame, type SandboxedHtmlFrameProps, type IsolatedSandboxedHtmlFrameProps, type InspectableSandboxedHtmlFrameProps, } from './SandboxedHtmlFrame';
 export { NativeRichMediaPreview, parseNativeRichMediaConfig, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
 export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';

package/index.js

@@ -43,6 +43,7 @@ export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
+export { SandboxedHtmlFrame } from './SandboxedHtmlFrame';
 export { NativeRichMediaPreview, parseNativeRichMediaConfig, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps } from './FrequencyCapping';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.171",
+  "version": "1.1.172",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",