@gemx-dev/heatmap-react 3.5.45 → 3.5.46

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

@@ -0,0 +1,371 @@
+export class IframeNavigationBlockerV2 {
+  private doc: Document;
+  private win: Window;
+  private isEnabled = false;
+  private showMessage = false;
+  private originalWindowOpen: typeof window.open;
+  private observers: MutationObserver[] = [];
+
+  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...');
+
+    try {
+      // Chặn navigation qua links
+      this.blockLinkNavigation();
+
+      // Chặn form submissions
+      this.blockFormSubmissions();
+
+      // Chặn window.open (này an toàn)
+      this.blockWindowOpen();
+
+      // Chặn beforeunload để prevent navigation
+      this.blockBeforeUnload();
+
+      // Monitor DOM changes để block dynamic links
+      this.monitorDOMChanges();
+
+      // Inject CSP nếu có thể
+      this.injectCSP();
+    } catch (error) {
+      console.error('[NavigationBlocker] Init error:', error);
+    }
+  }
+
+  private blockLinkNavigation(): void {
+    // Sử dụng capture phase để chặn sớm nhất
+    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');
+
+          // Cho phép hash links và empty links
+          if (!href || href === '' || href === '#' || href.startsWith('#')) {
+            console.log('[NavigationBlocker] Allowed hash navigation:', href);
+            return;
+          }
+
+          // Chặn tất cả các loại navigation
+          console.log('[NavigationBlocker] Blocked link navigation to:', href);
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+
+          this.notifyBlockedNavigation(href);
+        }
+      },
+      true,
+    );
+
+    // Chặn cả middle click và right click "open in new tab"
+    this.doc.addEventListener(
+      'auxclick',
+      (e) => {
+        if (!this.isEnabled) return;
+
+        const target = e.target as HTMLElement;
+        const link = target.closest('a');
+
+        if (link) {
+          const href = link.getAttribute('href');
+          if (href && !href.startsWith('#')) {
+            console.log('[NavigationBlocker] Blocked auxclick navigation');
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+          }
+        }
+      },
+      true,
+    );
+
+    // Disable tất cả links ngay từ đầu
+    this.disableAllLinks();
+  }
+
+  private disableAllLinks(): void {
+    this.doc.querySelectorAll('a[href]').forEach((link) => {
+      const href = link.getAttribute('href');
+      if (href && !href.startsWith('#')) {
+        // Thêm pointer-events: none và cursor
+        (link as HTMLElement).style.cursor = 'not-allowed';
+        link.setAttribute('data-navigation-blocked', 'true');
+
+        // Remove href để browser không hiện preview
+        link.setAttribute('data-original-href', href);
+        link.removeAttribute('href');
+
+        // Hoặc giữ href nhưng disable
+        // link.setAttribute('onclick', 'return false');
+      }
+    });
+  }
+
+  private blockFormSubmissions(): void {
+    this.doc.addEventListener(
+      'submit',
+      (e) => {
+        if (!this.isEnabled) return;
+
+        const form = e.target as HTMLFormElement;
+        const action = form.getAttribute('action');
+
+        // Cho phép forms không có action
+        if (!action || action === '' || action === '#') {
+          console.log('[NavigationBlocker] Allowed same-page form');
+          e.preventDefault();
+          this.handleFormSubmit(form);
+          return;
+        }
+
+        // Chặn tất cả external submissions
+        console.log('[NavigationBlocker] Blocked form submission to:', action);
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        this.notifyBlockedNavigation(action);
+      },
+      true,
+    );
+  }
+
+  private blockWindowOpen(): void {
+    // Override window.open - đây là safe
+    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;
+  }
+
+  private blockBeforeUnload(): void {
+    // Chặn unload
+    this.win.addEventListener(
+      'beforeunload',
+      (e) => {
+        if (!this.isEnabled) return;
+
+        console.log('[NavigationBlocker] Blocked beforeunload');
+        e.preventDefault();
+        e.returnValue = '';
+        return '';
+      },
+      true,
+    );
+
+    // Chặn unload
+    this.win.addEventListener(
+      'unload',
+      (e) => {
+        if (!this.isEnabled) return;
+
+        console.log('[NavigationBlocker] Blocked unload');
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      true,
+    );
+
+    // Monitor popstate
+    this.win.addEventListener(
+      'popstate',
+      (e) => {
+        if (!this.isEnabled) return;
+
+        console.log('[NavigationBlocker] Blocked popstate');
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      true,
+    );
+  }
+
+  private monitorDOMChanges(): void {
+    // Monitor khi có links mới được thêm vào
+    const observer = new MutationObserver((mutations) => {
+      if (!this.isEnabled) return;
+
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node as HTMLElement;
+
+            // Nếu là link
+            if (element.tagName === 'A') {
+              const href = element.getAttribute('href');
+              if (href && !href.startsWith('#')) {
+                element.style.cursor = 'not-allowed';
+                element.setAttribute('data-navigation-blocked', 'true');
+                element.setAttribute('data-original-href', href);
+                element.removeAttribute('href');
+              }
+            }
+
+            // Tìm links trong subtree
+            element.querySelectorAll('a[href]').forEach((link) => {
+              const href = link.getAttribute('href');
+              if (href && !href.startsWith('#')) {
+                (link as HTMLElement).style.cursor = 'not-allowed';
+                link.setAttribute('data-navigation-blocked', 'true');
+                link.setAttribute('data-original-href', href);
+                link.removeAttribute('href');
+              }
+            });
+          }
+        });
+      });
+    });
+
+    observer.observe(this.doc.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    this.observers.push(observer);
+  }
+
+  private injectCSP(): void {
+    // Thêm CSP meta tag nếu chưa có (optional)
+    try {
+      const existingCSP = this.doc.querySelector('meta[http-equiv="Content-Security-Policy"]');
+      if (!existingCSP) {
+        const meta = this.doc.createElement('meta');
+        meta.httpEquiv = 'Content-Security-Policy';
+        meta.content = "navigate-to 'none'"; // Chặn tất cả navigation
+        this.doc.head.appendChild(meta);
+        console.log('[NavigationBlocker] Injected CSP');
+      }
+    } catch (error) {
+      console.warn('[NavigationBlocker] Could not inject CSP:', error);
+    }
+  }
+
+  private handleFormSubmit(form: HTMLFormElement): void {
+    const formData = new FormData(form);
+    const data: Record<string, any> = {};
+    formData.forEach((value, key) => {
+      data[key] = value;
+    });
+
+    console.log('[NavigationBlocker] Handling form data:', data);
+
+    window.dispatchEvent(
+      new CustomEvent('iframe-form-submit', {
+        detail: { form, data },
+      }),
+    );
+  }
+
+  private notifyBlockedNavigation(url: string): void {
+    console.warn('[NavigationBlocker] Navigation blocked to:', url);
+
+    window.dispatchEvent(
+      new CustomEvent('iframe-navigation-blocked', {
+        detail: { url, timestamp: Date.now() },
+      }),
+    );
+
+    if (this.shouldShowMessage(url)) {
+      this.showBlockedMessage(url);
+    }
+  }
+
+  private shouldShowMessage(url: string): boolean {
+    return !url.startsWith('#') && url !== 'reload' && url !== 'popup';
+  }
+
+  private showBlockedMessage(url: string): void {
+    if (!this.showMessage) return;
+
+    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;
+      pointer-events: none;
+    `;
+
+    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;">${this.escapeHtml(shortUrl)}</div>
+    `;
+
+    this.doc.body.appendChild(message);
+
+    setTimeout(() => {
+      message.style.opacity = '0';
+      message.style.transition = 'opacity 0.3s';
+      setTimeout(() => message.remove(), 300);
+    }, 3000);
+  }
+
+  private escapeHtml(text: string): string {
+    const div = this.doc.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  public enable(): void {
+    this.isEnabled = true;
+    console.log('[NavigationBlocker] Enabled');
+  }
+
+  public enableMessage(): void {
+    this.showMessage = true;
+    console.log('[NavigationBlocker] Enabled message');
+  }
+
+  public disable(): void {
+    this.isEnabled = false;
+    console.log('[NavigationBlocker] Disabled');
+  }
+
+  public disableMessage(): void {
+    this.showMessage = false;
+    console.log('[NavigationBlocker] Disabled message');
+  }
+
+  public destroy(): void {
+    this.isEnabled = false;
+    this.showMessage = false;
+    // Cleanup observers
+    this.observers.forEach((observer) => observer.disconnect());
+    this.observers = [];
+
+    console.log('[NavigationBlocker] Destroyed');
+  }
+}