@capillarytech/creatives-library 8.0.250-alpha.0 → 8.0.250-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.250-alpha.0",
+  "version": "8.0.250-alpha.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/HtmlEditor/components/PreviewPane/index.js

@@ -15,13 +15,13 @@
  * - Filters dangerous protocols (javascript:, data:, vbscript:)
  * - Variant-aware sanitization (EMAIL vs INAPP with different security levels)
  * - Iframe sandbox uses "allow-scripts" only (no allow-same-origin for security)
- * - Content delivered via blob URLs to isolate iframe from parent origin
+ * - Content delivered via srcdoc attribute for CSP compliance (replaces blob URLs)
  *
  * Previous Security Issues (FIXED):
  * - Removed insecure manual sanitizeJavaScript function that only escaped </script> tags
  * - Replaced with robust DOMPurify-based sanitization for full XSS protection
  * - Removed "allow-same-origin" from iframe sandbox to prevent same-origin access
- * - Implemented blob URL delivery to maintain isolation while allowing script execution
+ * - Replaced blob URLs with srcdoc to comply with CSP frame-src directives
  */
 
 import React, { useMemo, useEffect, useRef } from 'react';
@@ -103,34 +103,25 @@ const PreviewPane = ({
     return sanitizationResult.sanitized;
   }, [contentValue, variant]);
 
-  // Create blob URL for secure iframe content delivery
-  // This isolates the iframe content from the parent origin while allowing script execution
-  const blobUrlRef = useRef(null);
-  const blobUrl = useMemo(() => {
-    // Clean up previous blob URL to prevent memory leaks
-    if (blobUrlRef.current) {
-      URL.revokeObjectURL(blobUrlRef.current);
-      blobUrlRef.current = null;
+  // Use srcdoc instead of blob URLs for CSP compliance
+  // srcdoc allows embedding HTML directly in iframe without violating frame-src CSP directives
+  // This is more secure and CSP-compliant than blob URLs
+  const iframeContent = useMemo(() => {
+    if (!combinedContent) {
+      return null;
     }
 
-    // Create new blob URL if we have content
-    if (combinedContent) {
-      const blob = new Blob([combinedContent], { type: 'text/html' });
-      blobUrlRef.current = URL.createObjectURL(blob);
-      return blobUrlRef.current;
+    // srcdoc has a size limit (~2MB in some browsers), but for HTML preview content this should be sufficient
+    // If content is too large, we'll fall back to about:blank and log a warning
+    const MAX_SRCDOC_SIZE = 2000000; // 2MB limit
+    if (combinedContent.length > MAX_SRCDOC_SIZE) {
+      console.warn('PreviewPane: Content too large for srcdoc, using about:blank');
+      return null;
     }
 
-    return null;
+    return combinedContent;
   }, [combinedContent]);
 
-  // Cleanup blob URL on unmount
-  useEffect(() => () => {
-    if (blobUrlRef.current) {
-      URL.revokeObjectURL(blobUrlRef.current);
-      blobUrlRef.current = null;
-    }
-  }, []);
-
   // Generate CSS classes based on view mode
   const getIframeClasses = () => {
     const baseClass = 'preview-pane__iframe';
@@ -159,7 +150,8 @@ const PreviewPane = ({
 
   const renderDeviceFrame = () => (
     <iframe
-      src={blobUrl || 'about:blank'}
+      src={iframeContent ? undefined : 'about:blank'}
+      srcDoc={iframeContent || undefined}
       title={intl.formatMessage(messages.htmlPreview)}
       className={getIframeClasses()}
       style={getPreviewStyles()}
@@ -210,7 +202,7 @@ const PreviewPane = ({
       </CapRow>
 
       <CapRow className="preview-pane__content">
-        {blobUrl ? renderDeviceFrame() : renderEmptyState()}
+        {iframeContent ? renderDeviceFrame() : renderEmptyState()}
       </CapRow>
     </div>
   );

package/v2Components/HtmlEditor/components/ValidationTabs/index.js

@@ -14,7 +14,6 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 // Cap UI Library
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapTab from '@capillarytech/cap-ui-library/CapTab';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 
 // Messages
@@ -23,6 +22,7 @@ import { BLOCKING_ERROR_RULE_IDS } from '../../constants';
 
 // Styles
 import './_validationTabs.scss';
+import {StyledCapTab} from '../../../../v2Containers/MobilePushNew/style';
 
 // Constants for issue sources
 const ISSUE_SOURCES = {
@@ -346,11 +346,11 @@ const ValidationTabs = ({
   return (
     <div className={`validation-tabs ${className || ''}`}>
       <CapRow className="validation-tabs__header">
-        <CapTab
+        <StyledCapTab
+          className="validation-tabs__tabs"
           activeKey={activeKey || (tabPanes[0]?.key)}
           onChange={setActiveKey}
           panes={tabPanes}
-          className="validation-tabs__tabs"
         />
         <CapRow className="validation-tabs__actions">
           <CapTooltip title={intl.formatMessage(messages.closePanel)}>

package/v2Containers/Email/index.js

@@ -883,8 +883,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const msgString = JSON.stringify(msg);
       const langId = formData[this.state.currentTab - 1].activeTab;
       const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
-      const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-      win.postMessage(msgString, '*');
+      const elementToSelect = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
+      if (elementToSelect) {
+        try {
+          const win = elementToSelect.contentWindow;
+          if (win) {
+            win.postMessage(msgString, '*');
+          }
+        } catch (error) {
+          // Handle cross-origin frame access errors
+          console.warn('Failed to access iframe contentWindow (cross-origin restriction):', error);
+        }
+      }
     } else if (data === "unsubscribe" && this.state.editorInstanse) {
       const anchor = `<a href='{{${data}}}'>${data}</a>`;
       this.state.editorInstanse.insertHtml(`${anchor}`);