@gemx-dev/heatmap-react 3.5.44 → 3.5.46

package/src/helpers/iframe-helper/navigation-blocker.ts

@@ -0,0 +1,367 @@
+export class IframeNavigationBlocker {
+  private doc: Document;
+  private win: Window;
+  private isEnabled = true;
+  private originalWindowOpen: typeof window.open;
+
+  constructor(iframe: HTMLIFrameElement) {
+    if (!iframe.contentDocument || !iframe.contentWindow) {
+      throw new Error('Iframe document or window not accessible');
+    }
+
+    this.doc = iframe.contentDocument;
+    this.win = iframe.contentWindow;
+    this.originalWindowOpen = this.win.open.bind(this.win);
+
+    this.init();
+  }
+
+  private init(): void {
+    console.log('[NavigationBlocker] Initializing...');
+
+    // Block navigation through links
+    this.blockLinkNavigation();
+
+    // Block form submissions
+    this.blockFormSubmissions();
+
+    // Block window.open and location methods
+    this.blockWindowNavigation();
+
+    // Block beforeunload to prevent navigation
+    this.blockBeforeUnload();
+  }
+
+  private blockLinkNavigation(): void {
+    this.doc.addEventListener(
+      'click',
+      (e) => {
+        if (!this.isEnabled) return;
+
+        const target = e.target as HTMLElement;
+        const link = target.closest('a');
+
+        if (link) {
+          const href = link.getAttribute('href');
+
+          // Allow hash links (same-page navigation)
+          if (!href || href === '' || href === '#' || href.startsWith('#')) {
+            console.log('[NavigationBlocker] Allowed hash navigation:', href);
+            return;
+          }
+
+          // Block javascript: links
+          if (href.startsWith('javascript:')) {
+            console.log('[NavigationBlocker] Blocked javascript: protocol');
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+            return;
+          }
+
+          // Block all external links
+          if (
+            href.startsWith('http') ||
+            href.startsWith('//') ||
+            href.startsWith('/') ||
+            href.startsWith('.')
+          ) {
+            console.log('[NavigationBlocker] Blocked navigation to:', href);
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+
+            this.notifyBlockedNavigation(href);
+            return;
+          }
+
+          // Block target="_blank"
+          const targetAttr = link.getAttribute('target');
+          if (targetAttr && targetAttr !== '_self') {
+            console.log('[NavigationBlocker] Blocked new window/tab:', href);
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+            return;
+          }
+        }
+      },
+      true,
+    ); // Capture phase (true)
+
+    // Add attribute to CSS to style disabled links
+    this.doc.querySelectorAll('a[href]').forEach((link) => {
+      const href = link.getAttribute('href');
+      if (href && !href.startsWith('#')) {
+        link.setAttribute('data-navigation-blocked', 'true');
+      }
+    });
+  }
+
+  private blockFormSubmissions(): void {
+    this.doc.addEventListener(
+      'submit',
+      (e) => {
+        if (!this.isEnabled) return;
+
+        const form = e.target as HTMLFormElement;
+        const action = form.getAttribute('action');
+
+        // Allow forms without action or action = #
+        if (!action || action === '' || action === '#') {
+          console.log('[NavigationBlocker] Allowed same-page form submission');
+          e.preventDefault();
+          this.handleFormSubmit(form);
+          return;
+        }
+
+        // Block external form submissions
+        console.log('[NavigationBlocker] Blocked form submission to:', action);
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        this.notifyBlockedNavigation(action);
+      },
+      true,
+    );
+  }
+
+  private blockWindowNavigation(): void {
+    // Override window.open
+    this.win.open = ((...args: any[]) => {
+      if (!this.isEnabled) {
+        return this.originalWindowOpen(...args);
+      }
+
+      const url = args[0]?.toString() || 'popup';
+      console.log('[NavigationBlocker] Blocked window.open:', url);
+      this.notifyBlockedNavigation(url);
+      return null;
+    }) as any;
+
+    // Block location.href through prototype
+    const locationProto = Object.getPrototypeOf(this.win.location);
+    const originalHrefDescriptor = Object.getOwnPropertyDescriptor(locationProto, 'href');
+
+    if (originalHrefDescriptor && originalHrefDescriptor.set) {
+      const originalHrefSetter = originalHrefDescriptor.set;
+
+      Object.defineProperty(locationProto, 'href', {
+        ...originalHrefDescriptor,
+        set: (value: string) => {
+          if (!this.isEnabled) {
+            return originalHrefSetter.call(this.win.location, value);
+          }
+
+          // Allow hash changes
+          if (value.startsWith('#')) {
+            return originalHrefSetter.call(this.win.location, value);
+          }
+
+          console.log('[NavigationBlocker] Blocked location.href =', value);
+          this.notifyBlockedNavigation(value);
+        },
+      });
+    }
+
+    // Block location methods
+    const originalAssign = this.win.location.assign;
+    console.log(
+      `🚀 🐥 ~ IframeNavigationBlocker ~ blockWindowNavigation ~ this.win.location:`,
+      this.win.location,
+    );
+    const originalReplace = this.win.location.replace;
+    const originalReload = this.win.location.reload;
+
+    Object.defineProperty(this.win.location, 'assign', {
+      writable: true,
+      value: ((url: string | URL) => {
+        if (!this.isEnabled) {
+          return originalAssign.call(this.win.location, url);
+        }
+        console.log('[NavigationBlocker] Blocked location.assign:', url);
+        this.notifyBlockedNavigation(url.toString());
+      }) as any,
+    });
+
+    // this.win.location.assign = ((url: string | URL) => {
+    //   if (!this.isEnabled) {
+    //     return originalAssign.call(this.win.location, url);
+    //   }
+    //   console.log('[NavigationBlocker] Blocked location.assign:', url);
+    //   this.notifyBlockedNavigation(url.toString());
+    // }) as any;
+
+    Object.defineProperty(this.win.location, 'replace', {
+      writable: true,
+      value: ((url: string | URL) => {
+        if (!this.isEnabled) {
+          return originalReplace.call(this.win.location, url);
+        }
+        console.log('[NavigationBlocker] Blocked location.replace:', url);
+        this.notifyBlockedNavigation(url.toString());
+      }) as any,
+    });
+
+    Object.defineProperty(this.win.location, 'reload', {
+      writable: true,
+      value: (() => {
+        if (!this.isEnabled) {
+          return originalReload.call(this.win.location);
+        }
+        console.log('[NavigationBlocker] Blocked location.reload');
+        this.notifyBlockedNavigation('reload');
+      }) as any,
+    });
+
+    // Block history navigation
+    const originalPushState = this.win.history.pushState;
+    const originalReplaceState = this.win.history.replaceState;
+
+    this.win.history.pushState = ((state: any, title: string, url?: string | URL | null) => {
+      if (!this.isEnabled) {
+        return originalPushState.call(this.win.history, state, title, url);
+      }
+
+      // Allow hash-only changes
+      const urlStr = url?.toString() || '';
+      if (!urlStr || urlStr.startsWith('#')) {
+        return originalPushState.call(this.win.history, state, title, url);
+      }
+
+      console.log('[NavigationBlocker] Blocked history.pushState:', url);
+      this.notifyBlockedNavigation(urlStr);
+    }) as any;
+
+    this.win.history.replaceState = ((state: any, title: string, url?: string | URL | null) => {
+      if (!this.isEnabled) {
+        return originalReplaceState.call(this.win.history, state, title, url);
+      }
+
+      const urlStr = url?.toString() || '';
+      if (!urlStr || urlStr.startsWith('#')) {
+        return originalReplaceState.call(this.win.history, state, title, url);
+      }
+
+      console.log('[NavigationBlocker] Blocked history.replaceState:', url);
+      this.notifyBlockedNavigation(urlStr);
+    }) as any;
+  }
+
+  private blockBeforeUnload(): void {
+    // Block page unload (navigation away)
+    this.win.addEventListener('beforeunload', (e) => {
+      if (!this.isEnabled) return;
+
+      console.log('[NavigationBlocker] Blocked beforeunload');
+      e.preventDefault();
+      e.returnValue = '';
+      return '';
+    });
+
+    // Monitor popstate (back/forward navigation)
+    this.win.addEventListener('popstate', (e) => {
+      if (!this.isEnabled) return;
+
+      console.log('[NavigationBlocker] Detected popstate, may block if needed');
+      // Can add logic to block back/forward if needed
+    });
+  }
+
+  private handleFormSubmit(form: HTMLFormElement): void {
+    // Handle in-page form submissions if needed
+    const formData = new FormData(form);
+    // Polyfill for FormData.entries() for environments that don't support it
+    const data: Record<string, any> = {};
+    formData.forEach((value, key) => {
+      // If the field already exists, convert to array (handle multiple values, e.g. checkboxes)
+      if (Object.prototype.hasOwnProperty.call(data, key)) {
+        if (Array.isArray(data[key])) {
+          data[key].push(value);
+        } else {
+          data[key] = [data[key], value];
+        }
+      } else {
+        data[key] = value;
+      }
+    });
+
+    console.log('[NavigationBlocker] Handling form data:', data);
+
+    // Dispatch custom event to parent
+    window.dispatchEvent(
+      new CustomEvent('iframe-form-submit', {
+        detail: { form, data },
+      }),
+    );
+  }
+
+  private notifyBlockedNavigation(url: string): void {
+    console.warn('[NavigationBlocker] Navigation blocked to:', url);
+
+    // Dispatch event to parent
+    window.dispatchEvent(
+      new CustomEvent('iframe-navigation-blocked', {
+        detail: { url, timestamp: Date.now() },
+      }),
+    );
+
+    // Optional: Show message
+    if (this.shouldShowMessage(url)) {
+      this.showBlockedMessage(url);
+    }
+  }
+
+  private shouldShowMessage(url: string): boolean {
+    // Có thể customize logic này
+    return !url.startsWith('#') && url !== 'reload';
+  }
+
+  private showBlockedMessage(url: string): void {
+    const message = this.doc.createElement('div');
+    message.style.cssText = `
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      background: #ff6b6b;
+      color: white;
+      padding: 12px 20px;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      z-index: 999999;
+      font-family: system-ui, -apple-system, sans-serif;
+      font-size: 14px;
+      max-width: 300px;
+      word-break: break-word;
+    `;
+
+    const shortUrl = url.length > 50 ? url.substring(0, 47) + '...' : url;
+    message.innerHTML = `
+      <div style="font-weight: 600; margin-bottom: 4px;">Navigation Blocked</div>
+      <div style="font-size: 12px; opacity: 0.9;">${shortUrl}</div>
+    `;
+
+    this.doc.body.appendChild(message);
+
+    setTimeout(() => {
+      message.style.opacity = '0';
+      message.style.transition = 'opacity 0.3s';
+      setTimeout(() => message.remove(), 300);
+    }, 3000);
+  }
+
+  public enable(): void {
+    this.isEnabled = true;
+    console.log('[NavigationBlocker] Enabled');
+  }
+
+  public disable(): void {
+    this.isEnabled = false;
+    console.log('[NavigationBlocker] Disabled');
+  }
+
+  public destroy(): void {
+    this.isEnabled = false;
+    console.log('[NavigationBlocker] Destroyed');
+  }
+}

package/src/helpers/iframe-helper/style-replacer.ts

@@ -0,0 +1,231 @@
+import type { IframeStyleConfig } from '../../types';
+
+export class IframeStyleReplacer {
+  private doc: Document;
+  private win: Window;
+  private config: IframeStyleConfig;
+  private regex = /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
+
+  constructor(iframe: HTMLIFrameElement, config: IframeStyleConfig) {
+    if (!iframe.contentDocument || !iframe.contentWindow) {
+      throw new Error('Iframe document or window not accessible');
+    }
+
+    this.doc = iframe.contentDocument;
+    this.win = iframe.contentWindow;
+    this.config = config;
+  }
+
+  private px(value: number): string {
+    return `${value.toFixed(2)}px`;
+  }
+
+  private convert(value: string, unit: string): string {
+    const num = parseFloat(value);
+    if (isNaN(num)) return value;
+
+    const map: Record<string, number> = {
+      vh: this.config.targetHeight,
+      svh: this.config.targetHeight,
+      lvh: this.config.targetHeight,
+      dvh: this.config.targetHeight,
+      vw: this.config.targetWidth,
+      svw: this.config.targetWidth,
+      lvw: this.config.targetWidth,
+      dvw: this.config.targetWidth,
+    };
+
+    return this.px((num / 100) * (map[unit.toLowerCase()] || 0));
+  }
+
+  private replaceInText(cssText: string): string {
+    return cssText.replace(this.regex, (_, value, unit) => this.convert(value, unit));
+  }
+
+  private processInlineStyles(): number {
+    let count = 0;
+    this.doc.querySelectorAll('[style]').forEach((el) => {
+      const style = el.getAttribute('style');
+      if (style && this.regex.test(style)) {
+        this.regex.lastIndex = 0;
+        el.setAttribute('style', this.replaceInText(style));
+        count++;
+      }
+    });
+    console.log(`[IframeStyleReplacer] Replaced ${count} inline style elements`);
+    return count;
+  }
+
+  private processStyleTags(): number {
+    let count = 0;
+    this.doc.querySelectorAll('style').forEach((tag) => {
+      const css = tag.textContent || '';
+      if (this.regex.test(css)) {
+        this.regex.lastIndex = 0;
+        tag.textContent = this.replaceInText(css);
+        count++;
+      }
+    });
+    console.log(`[IframeStyleReplacer] Replaced ${count} <style> tags`);
+    return count;
+  }
+
+  private processRule(rule: CSSRule): number {
+    let count = 0;
+
+    if ('style' in rule && rule.style) {
+      const style = (rule as CSSStyleRule).style;
+      for (let i = 0; i < style.length; i++) {
+        const prop = style[i];
+        const value = style.getPropertyValue(prop);
+        if (value && this.regex.test(value)) {
+          this.regex.lastIndex = 0;
+          style.setProperty(prop, this.replaceInText(value), style.getPropertyPriority(prop));
+          count++;
+        }
+      }
+    }
+
+    if ('cssRules' in rule) {
+      const rules = rule as unknown as CSSStyleSheet;
+      for (const r of Array.from(rules.cssRules || [])) {
+        count += this.processRule(r);
+      }
+    }
+
+    return count;
+  }
+
+  private processStylesheets(): number {
+    let total = 0;
+    Array.from(this.doc.styleSheets).forEach((sheet) => {
+      try {
+        // Bỏ qua external CSS (cross-origin)
+        if (sheet.href && !sheet.href.startsWith(this.win.location.origin)) {
+          console.log('[IframeStyleReplacer] Skipping external CSS:', sheet.href);
+          return;
+        }
+
+        const rules = sheet.cssRules || sheet.rules;
+        if (!rules) return;
+
+        for (const rule of Array.from(rules)) {
+          total += this.processRule(rule);
+        }
+      } catch (e) {
+        console.warn('[IframeStyleReplacer] Cannot read stylesheet (CORS?):', (e as Error).message);
+      }
+    });
+    console.log(`[IframeStyleReplacer] Replaced ${total} rules in stylesheets`);
+    return total;
+  }
+
+  private async processLinkedStylesheets(): Promise<number> {
+    const links = this.doc.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]');
+    let count = 0;
+
+    for (const link of Array.from(links)) {
+      if (!link.href.startsWith(this.win.location.origin)) {
+        console.log('[IframeStyleReplacer] Skipping external CSS:', link.href);
+        continue;
+      }
+
+      try {
+        const res = await fetch(link.href);
+        let css = await res.text();
+
+        if (this.regex.test(css)) {
+          this.regex.lastIndex = 0;
+          css = this.replaceInText(css);
+
+          const style = this.doc.createElement('style');
+          style.textContent = css;
+          style.dataset.originalHref = link.href;
+
+          link.parentNode?.insertBefore(style, link);
+          link.remove();
+          count++;
+        }
+      } catch (e) {
+        console.warn('[IframeStyleReplacer] Cannot load CSS:', link.href, e);
+      }
+    }
+
+    console.log(`[IframeStyleReplacer] Replaced ${count} linked CSS files`);
+    return count;
+  }
+
+  private getFinalHeight(): number {
+    // Trigger reflow
+    void this.doc.body.offsetHeight;
+
+    return Math.max(
+      this.doc.body.scrollHeight,
+      this.doc.body.offsetHeight,
+      this.doc.documentElement.scrollHeight,
+      this.doc.documentElement.offsetHeight,
+      this.doc.documentElement.clientHeight,
+    );
+  }
+
+  private getFinalWidth(): number {
+    return Math.max(
+      this.doc.body.scrollWidth,
+      this.doc.body.offsetWidth,
+      this.doc.documentElement.scrollWidth,
+      this.doc.documentElement.offsetWidth,
+      this.doc.documentElement.clientWidth,
+    );
+  }
+
+  private async waitForResources(): Promise<void> {
+    if ('fonts' in this.doc) {
+      await (this.doc as any).fonts.ready;
+    }
+
+    const images = Array.from(this.doc.images).filter((img) => !img.complete);
+    if (images.length > 0) {
+      await Promise.all(
+        images.map(
+          (img) =>
+            new Promise((resolve) => {
+              img.onload = img.onerror = resolve;
+            }),
+        ),
+      );
+    }
+  }
+
+  public async run(): Promise<{ height: number; width: number }> {
+    try {
+      console.log('[IframeStyleReplacer] Starting viewport units replacement...');
+
+      this.processInlineStyles();
+      this.processStyleTags();
+      this.processStylesheets();
+
+      await this.processLinkedStylesheets();
+      // await this.waitForResources();
+
+      return await new Promise((resolve) => {
+        requestAnimationFrame(() => {
+          const height = this.getFinalHeight();
+          const width = this.getFinalWidth();
+
+          console.log('[IframeStyleReplacer] Calculated dimensions:', { height, width });
+          resolve({ height, width });
+        });
+      });
+    } catch (err) {
+      console.error('[IframeStyleReplacer] Critical error:', err);
+      return {
+        height: this.doc.body.scrollHeight || 1000,
+        width: this.doc.body.scrollWidth || 1000,
+      };
+    }
+  }
+
+  public updateConfig(config: Partial<IframeStyleConfig>): void {
+    this.config = { ...this.config, ...config };
+  }
+}

package/src/helpers/iframe.ts

@@ -0,0 +1,42 @@
+import { decode } from '@gemx-dev/clarity-decode';
+import { DecodedEvent, DecodedPayload } from '../types';
+
+export function findLastSizeOfDom(data: DecodedPayload[]) {
+  const firstDoc = data.find((item) => item.envelope.sequence === 1)?.doc;
+  const docSorted = firstDoc?.sort(sort);
+  const firstEvent = docSorted?.[0];
+  const docSize = {
+    width: firstEvent?.data.width,
+    height: firstEvent?.data.height,
+  };
+
+  const newData = JSON.parse(JSON.stringify(data)) as DecodedPayload[];
+  const reversedData = newData.reverse();
+  const lastResizeEvent = reversedData.find((item) => !!item.resize);
+  const firstEventResize = lastResizeEvent?.resize?.[0];
+  const resize = {
+    width: firstEventResize?.data.width,
+    height: firstEventResize?.data.height,
+  };
+
+  return {
+    doc: docSize,
+    resize: resize,
+    size: {
+      width: resize.width ?? docSize.width,
+      height: resize.height ?? docSize.height,
+    },
+  };
+}
+
+function sort(a: DecodedEvent, b: DecodedEvent): number {
+  return a.time - b.time;
+}
+
+export function decodePayloads(payload: string): DecodedPayload | null {
+  try {
+    return decode(payload) as unknown as DecodedPayload;
+  } catch (error) {
+    return null;
+  }
+}

package/src/helpers/index.ts

@@ -0,0 +1,8 @@
+export * from './elm-callout';
+export * from './elm-getter';
+export * from './iframe';
+
+export * from './viz-canvas';
+export * from './viz-elements';
+
+export * from './iframe-helper';