@capillarytech/creatives-library 8.0.208 → 8.0.210

package/v2Components/HtmlEditor/components/PreviewPane/_previewPane.scss

@@ -0,0 +1,220 @@
+/**
+ * Preview Pane Styles
+ */
+
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.preview-pane {
+  height: 100%;
+  max-height: 31.25rem;
+  position: relative;
+  background-color: $CAP_G09;
+  padding: 1rem;
+  overflow: auto;
+
+  &__mode-controls {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 10;
+    background-color: $CAP_G07;
+    border-radius: 0.5rem;
+    padding: 0.25rem;
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+
+    .preview-mode-group {
+      margin: 0;
+
+      .ant-btn {
+        border: none;
+        box-shadow: none;
+        padding: 0.25rem;
+        min-width: 1.75rem;
+        height: 1.75rem;
+        border-radius: 0.25rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &.ant-btn-primary {
+          background-color: $CAP_WHITE;
+          color: $CAP_G01;
+
+          .anticon {
+            color: $CAP_G01;
+            font-size: 1.25rem;
+          }
+        }
+
+        &:not(.ant-btn-primary) {
+          background-color: transparent;
+          color: $CAP_G04;
+
+          .anticon {
+            color: $CAP_G04;
+            font-size: 1.25rem;
+          }
+
+          &:hover,
+          &.preview-mode-group__btn--active {
+            background-color: rgba($CAP_WHITE, 0.5);
+          }
+        }
+      }
+    }
+  }
+
+  &__content {
+    height: calc(100% - 2rem);
+    max-height: 28.125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: auto;
+  }
+
+  &__iframe {
+    border: none;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.0625rem 0.1875rem rgba($CAP_G01, 0.1);
+    background-color: $CAP_WHITE;
+    width: 100%;
+    height: 28.125rem;
+    max-height: 31.25rem;
+
+    &--mobile {
+      // Width and height now controlled by React inline styles
+      border-radius: 0.75rem;
+      box-shadow: 0 0.25rem 1.25rem rgba($CAP_G01, 0.1);
+    }
+  }
+
+  iframe {
+    border: none;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.0625rem 0.1875rem rgba($CAP_G01, 0.1);
+    background-color: $CAP_WHITE;
+  }
+
+  .device-frame {
+    position: relative;
+    display: inline-block;
+
+    .home-indicator {
+      position: absolute;
+      bottom: -0.25rem;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 8.375rem;
+      height: 0.3125rem;
+      background-color: $CAP_G02;
+      border-radius: 0.1875rem;
+      z-index: 1070;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -1.25rem;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 3.75rem;
+      height: 0.375rem;
+      background-color: $CAP_G02;
+      border-radius: 0.1875rem;
+      z-index: 1070 + 1;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: -0.9375rem;
+      right: 1.25rem;
+      width: 0.75rem;
+      height: 0.75rem;
+      background-color: $CAP_G02;
+      border-radius: 50%;
+      z-index: 1070 + 1;
+    }
+  }
+
+  // Media queries for responsive behavior - iframe sizing now controlled by React
+  // @media (max-width: 768px) - Removed: sizing now handled by React inline styles
+
+  @media (max-width: 576px) {
+
+    .device-frame,
+    .preview-pane .device-frame {
+      transform: scale(0.8);
+      transform-origin: center top;
+      // iframe sizing now controlled by React inline styles
+    }
+  }
+
+  .preview-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: $CAP_G10;
+
+    .loading-content {
+      text-align: center;
+
+      .loading-icon {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+        animation: pulse 2s infinite;
+      }
+    }
+  }
+
+  @keyframes pulse {
+
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  .preview-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(100% - 2rem);
+    color: $CAP_G10;
+    text-align: center;
+    background-color: $CAP_WHITE;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.0625rem 0.1875rem rgba($CAP_G01, 0.1);
+    margin: 0;
+    width: 100%;
+
+    .empty-content {
+      padding: 2.5rem 1.25rem;
+
+      .empty-icon {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+      }
+
+      p {
+        margin: 0.25rem 0;
+        color: $CAP_G10;
+        font-size: 0.875rem;
+      }
+
+      .preview-mode-info {
+        font-size: 0.75rem;
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,229 @@
+/**
+ * PreviewPane - Live preview panel with responsive device frames
+ *
+ * Features:
+ * - Live HTML/CSS/JavaScript preview
+ * - Responsive device frames (Desktop/Mobile/Mobile Device)
+ * - Sandboxed iframe for security
+ * - Real-time content updates
+ *
+ * Security:
+ * - Uses DOMPurify-based contentSanitizer.js for comprehensive XSS protection
+ * - Sanitizes all HTML content before rendering in iframe
+ * - Removes dangerous elements: <script>, <iframe>, <object>, <embed>, <applet>
+ * - Strips event handler attributes (onclick, onload, etc.)
+ * - 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
+ *
+ * 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
+ */
+
+import React, { useMemo, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from 'react-intl';
+
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+
+// Security utilities
+import { sanitizeHTML, SANITIZER_VARIANTS } from '../../utils/contentSanitizer';
+
+// Components
+import PreviewModeGroup from '../EditorToolbar/PreviewModeGroup';
+import InAppPreviewPane from '../InAppPreviewPane';
+
+// Context
+import { useEditorContext } from '../common/EditorContext';
+
+// Constants
+import { PREVIEW_MODES, HTML_EDITOR_VARIANTS } from '../../constants';
+import { LAYOUT_TYPES } from '../InAppPreviewPane/constants';
+
+// Messages
+import messages from '../../messages';
+
+// Styles
+import './_previewPane.scss';
+
+const PreviewPane = ({
+  intl,
+  className = '',
+  isFullscreenMode = false,
+  isModalContext = false,
+  layoutType = LAYOUT_TYPES.MODAL
+}) => {
+  const { content, layout, variant } = useEditorContext();
+
+  // Destructure for better readability
+  const { content: contentValue } = content || {};
+  const { viewMode, setViewMode, mobileWidth } = layout || {};
+
+  /**
+   * Sanitize content for secure preview rendering
+   *
+   * This function uses the robust contentSanitizer.js utility which employs DOMPurify
+   * for comprehensive XSS protection. The sanitizer handles:
+   * - Script tag removal/escaping
+   * - Event handler attribute removal
+   * - Dangerous protocol filtering (javascript:, data:, etc.)
+   * - Malicious HTML structure prevention
+   *
+   * The variant is determined based on the editor context - EMAIL for email templates,
+   * INAPP for in-app content with more permissive multimedia support.
+   */
+  const combinedContent = useMemo(() => {
+    if (!contentValue) {
+      return '';
+    }
+
+    // Determine sanitization variant based on editor variant
+    // Default to EMAIL for stricter security if variant is not available
+    const sanitizationVariant = variant === HTML_EDITOR_VARIANTS.INAPP
+      ? SANITIZER_VARIANTS.INAPP
+      : SANITIZER_VARIANTS.EMAIL;
+
+    // Use the robust contentSanitizer with DOMPurify for comprehensive XSS protection
+    const sanitizationResult = sanitizeHTML(contentValue, sanitizationVariant);
+
+    // Log security warnings in development for debugging
+    if (process.env.NODE_ENV === 'development' && sanitizationResult.warnings.length > 0) {
+      console.warn('PreviewPane: Content sanitization warnings:', sanitizationResult.warnings);
+    }
+
+    // Log removed elements in development for security awareness
+    if (process.env.NODE_ENV === 'development' && sanitizationResult.removedElements.length > 0) {
+      console.warn('PreviewPane: Removed potentially unsafe elements:', sanitizationResult.removedElements);
+    }
+
+    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;
+    }
+
+    // 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;
+    }
+
+    return null;
+  }, [combinedContent]);
+
+  // Cleanup blob URL on unmount
+  useEffect(() => {
+    return () => {
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+        blobUrlRef.current = null;
+      }
+    };
+  }, []);
+
+  // Generate CSS classes based on view mode
+  const getIframeClasses = () => {
+    const baseClass = 'preview-pane__iframe';
+    const classes = [baseClass];
+
+    if (viewMode === PREVIEW_MODES.MOBILE) {
+      classes.push(`${baseClass}--mobile`);
+    }
+
+    return classes.join(' ');
+  };
+
+  // Generate inline styles for responsive sizing based on view mode
+  const getPreviewStyles = () => {
+    const baseStyles = {};
+
+    // Apply sizing based on current view mode
+    if (viewMode === PREVIEW_MODES.MOBILE || viewMode === PREVIEW_MODES.MOBILE_DEVICE) {
+      // Use layout.mobileWidth or fallback to 375px
+      const width = mobileWidth || 375;
+      baseStyles.width = `${width}px`;
+      baseStyles.height = '100%'; // Fill container height
+    }
+
+    return baseStyles;
+  };
+
+  const renderDeviceFrame = () => (
+    <iframe
+      src={blobUrl || 'about:blank'}
+      title={intl.formatMessage(messages.htmlPreview)}
+      className={getIframeClasses()}
+      style={getPreviewStyles()}
+      sandbox="allow-scripts"
+    />
+  );
+
+  const renderEmptyState = () => (
+    <div className="preview-empty">
+      <div className="empty-content">
+        <div className="empty-icon">📝</div>
+        <p>{intl.formatMessage(messages.startTypingHtml)}</p>
+        <p className="preview-mode-info">
+          {intl.formatMessage(messages.previewMode)}: {
+            viewMode === PREVIEW_MODES.DESKTOP
+              ? intl.formatMessage(messages.desktop)
+              : viewMode === PREVIEW_MODES.MOBILE
+                ? intl.formatMessage(messages.mobile)
+                : intl.formatMessage(messages.mobileDevice)
+          }
+        </p>
+      </div>
+    </div>
+  );
+
+  // Render InApp preview for InApp variant
+  if (variant === HTML_EDITOR_VARIANTS.INAPP) {
+    return (
+      <InAppPreviewPane
+        intl={intl}
+        className={className}
+        isFullscreenMode={isFullscreenMode}
+        isModalContext={isModalContext}
+        layoutType={layoutType}
+      />
+    );
+  }
+
+  // Render Email preview for Email variant
+  return (
+    <div className={`preview-pane ${className}`}>
+      <CapRow className="preview-pane__mode-controls">
+        <PreviewModeGroup
+          value={viewMode}
+          onChange={setViewMode}
+        />
+      </CapRow>
+
+      <CapRow className="preview-pane__content">
+        {blobUrl ? renderDeviceFrame() : renderEmptyState()}
+      </CapRow>
+    </div>
+  );
+};
+
+PreviewPane.propTypes = {
+  intl: intlShape.isRequired,
+  className: PropTypes.string,
+  isFullscreenMode: PropTypes.bool,
+  isModalContext: PropTypes.bool,
+  layoutType: PropTypes.oneOf(Object.values(LAYOUT_TYPES))
+};
+
+export default injectIntl(PreviewPane);