@gemx-dev/heatmap-react 3.5.43 → 3.5.44

package/dist/esm/index.js

@@ -511,7 +511,300 @@ function isElementInViewport(elementRect, visualRef, scale) {
     return elementBottom > viewportTop && elementTop < viewportBottom;
 }
 
-class ViewportUnitsReplacer {
+class IframeNavigationBlockerV2 {
+    doc;
+    win;
+    isEnabled = false;
+    showMessage = false;
+    originalWindowOpen;
+    observers = [];
+    constructor(iframe) {
+        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();
+    }
+    init() {
+        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);
+        }
+    }
+    blockLinkNavigation() {
+        // Sử dụng capture phase để chặn sớm nhất
+        this.doc.addEventListener('click', (e) => {
+            if (!this.isEnabled)
+                return;
+            const target = e.target;
+            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;
+            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();
+    }
+    disableAllLinks() {
+        this.doc.querySelectorAll('a[href]').forEach((link) => {
+            const href = link.getAttribute('href');
+            if (href && !href.startsWith('#')) {
+                // Thêm pointer-events: none và cursor
+                link.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');
+            }
+        });
+    }
+    blockFormSubmissions() {
+        this.doc.addEventListener('submit', (e) => {
+            if (!this.isEnabled)
+                return;
+            const form = e.target;
+            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);
+    }
+    blockWindowOpen() {
+        // Override window.open - đây là safe
+        this.win.open = ((...args) => {
+            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;
+        });
+    }
+    blockBeforeUnload() {
+        // 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);
+    }
+    monitorDOMChanges() {
+        // 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;
+                        // 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.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);
+    }
+    injectCSP() {
+        // 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);
+        }
+    }
+    handleFormSubmit(form) {
+        const formData = new FormData(form);
+        const data = {};
+        formData.forEach((value, key) => {
+            data[key] = value;
+        });
+        console.log('[NavigationBlocker] Handling form data:', data);
+        window.dispatchEvent(new CustomEvent('iframe-form-submit', {
+            detail: { form, data },
+        }));
+    }
+    notifyBlockedNavigation(url) {
+        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);
+        }
+    }
+    shouldShowMessage(url) {
+        return !url.startsWith('#') && url !== 'reload' && url !== 'popup';
+    }
+    showBlockedMessage(url) {
+        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);
+    }
+    escapeHtml(text) {
+        const div = this.doc.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    enable() {
+        this.isEnabled = true;
+        console.log('[NavigationBlocker] Enabled');
+    }
+    enableMessage() {
+        this.showMessage = true;
+        console.log('[NavigationBlocker] Enabled message');
+    }
+    disable() {
+        this.isEnabled = false;
+        console.log('[NavigationBlocker] Disabled');
+    }
+    disableMessage() {
+        this.showMessage = false;
+        console.log('[NavigationBlocker] Disabled message');
+    }
+    destroy() {
+        this.isEnabled = false;
+        this.showMessage = false;
+        // Cleanup observers
+        this.observers.forEach((observer) => observer.disconnect());
+        this.observers = [];
+        console.log('[NavigationBlocker] Destroyed');
+    }
+}
+
+class IframeStyleReplacer {
     doc;
     win;
     config;
@@ -556,7 +849,7 @@ class ViewportUnitsReplacer {
                 count++;
             }
         });
-        console.log(`[ViewportReplacer] Replaced ${count} inline style elements`);
+        console.log(`[IframeStyleReplacer] Replaced ${count} inline style elements`);
         return count;
     }
     processStyleTags() {
@@ -569,7 +862,7 @@ class ViewportUnitsReplacer {
                 count++;
             }
         });
-        console.log(`[ViewportReplacer] Replaced ${count} <style> tags`);
+        console.log(`[IframeStyleReplacer] Replaced ${count} <style> tags`);
         return count;
     }
     processRule(rule) {
@@ -600,7 +893,7 @@ class ViewportUnitsReplacer {
             try {
                 // Bỏ qua external CSS (cross-origin)
                 if (sheet.href && !sheet.href.startsWith(this.win.location.origin)) {
-                    console.log('[ViewportReplacer] Skipping external CSS:', sheet.href);
+                    console.log('[IframeStyleReplacer] Skipping external CSS:', sheet.href);
                     return;
                 }
                 const rules = sheet.cssRules || sheet.rules;
@@ -611,10 +904,10 @@ class ViewportUnitsReplacer {
                 }
             }
             catch (e) {
-                console.warn('[ViewportReplacer] Cannot read stylesheet (CORS?):', e.message);
+                console.warn('[IframeStyleReplacer] Cannot read stylesheet (CORS?):', e.message);
             }
         });
-        console.log(`[ViewportReplacer] Replaced ${total} rules in stylesheets`);
+        console.log(`[IframeStyleReplacer] Replaced ${total} rules in stylesheets`);
         return total;
     }
     async processLinkedStylesheets() {
@@ -622,7 +915,7 @@ class ViewportUnitsReplacer {
         let count = 0;
         for (const link of Array.from(links)) {
             if (!link.href.startsWith(this.win.location.origin)) {
-                console.log('[ViewportReplacer] Skipping external CSS:', link.href);
+                console.log('[IframeStyleReplacer] Skipping external CSS:', link.href);
                 continue;
             }
             try {
@@ -640,10 +933,10 @@ class ViewportUnitsReplacer {
                 }
             }
             catch (e) {
-                console.warn('[ViewportReplacer] Cannot load CSS:', link.href, e);
+                console.warn('[IframeStyleReplacer] Cannot load CSS:', link.href, e);
             }
         }
-        console.log(`[ViewportReplacer] Replaced ${count} linked CSS files`);
+        console.log(`[IframeStyleReplacer] Replaced ${count} linked CSS files`);
         return count;
     }
     getFinalHeight() {
@@ -667,7 +960,7 @@ class ViewportUnitsReplacer {
     }
     async run() {
         try {
-            console.log('[ViewportReplacer] Starting viewport units replacement...');
+            console.log('[IframeStyleReplacer] Starting viewport units replacement...');
             this.processInlineStyles();
             this.processStyleTags();
             this.processStylesheets();
@@ -677,13 +970,13 @@ class ViewportUnitsReplacer {
                 requestAnimationFrame(() => {
                     const height = this.getFinalHeight();
                     const width = this.getFinalWidth();
-                    console.log('[ViewportReplacer] Calculated dimensions:', { height, width });
+                    console.log('[IframeStyleReplacer] Calculated dimensions:', { height, width });
                     resolve({ height, width });
                 });
             });
         }
         catch (err) {
-            console.error('[ViewportReplacer] Critical error:', err);
+            console.error('[IframeStyleReplacer] Critical error:', err);
             return {
                 height: this.doc.body.scrollHeight || 1000,
                 width: this.doc.body.scrollWidth || 1000,
@@ -695,10 +988,11 @@ class ViewportUnitsReplacer {
     }
 }
 
-class ViewportUnitsFixer {
+class IframeHelperFixer {
     iframe;
     config;
     replacer = null;
+    navigationBlocker = null;
     constructor(config) {
         this.config = config;
         this.iframe = config.iframe;
@@ -706,10 +1000,11 @@ class ViewportUnitsFixer {
     }
     async init() {
         if (!this.iframe) {
-            console.error('[ViewportFixer] iframe not found');
+            console.error('[IframeHelper] iframe not found');
             this.config.onError?.(new Error('iframe not found'));
             return;
         }
+        // Wait for iframe to load completely
         if (this.iframe.contentDocument?.readyState === 'complete') {
             await this.process();
         }
@@ -719,17 +1014,19 @@ class ViewportUnitsFixer {
     }
     async process() {
         if (!this.iframe.contentDocument || !this.iframe.contentWindow) {
-            console.error('[ViewportFixer] Cannot access iframe document');
+            console.error('[IframeHelper] Cannot access iframe document');
             this.config.onError?.(new Error('Cannot access iframe document'));
             return;
         }
         try {
-            console.log('[ViewportFixer] Processing viewport units...');
-            // Tạo replacer instance với iframe và config
-            this.replacer = new ViewportUnitsReplacer(this.iframe, this.config);
-            // Chạy replacement
+            console.log('[IframeHelper] Processing viewport units...');
+            // Create replacer instance
+            this.replacer = new IframeStyleReplacer(this.iframe, this.config);
+            // Create navigation blocker
+            this.navigationBlocker = new IframeNavigationBlockerV2(this.iframe);
+            // Run replacement
             const result = await this.replacer.run();
-            console.log('[ViewportFixer] Process completed:', result);
+            console.log('[IframeHelper] Process completed:', result);
             // Trigger success callback
             this.config.onSuccess?.(result);
             // Dispatch custom event
@@ -738,12 +1035,12 @@ class ViewportUnitsFixer {
             }));
         }
         catch (error) {
-            console.error('[ViewportFixer] Failed to process:', error);
+            console.error('[IframeHelper] Failed to process:', error);
             this.config.onError?.(error);
         }
     }
     async recalculate() {
-        console.log('[ViewportFixer] Recalculating...');
+        console.log('[IframeHelper] Recalculating...');
         await this.process();
     }
     updateConfig(config) {
@@ -752,16 +1049,39 @@ class ViewportUnitsFixer {
             this.replacer.updateConfig(config);
         }
     }
+    enableNavigationBlocking() {
+        this.navigationBlocker?.enable();
+    }
+    enableNavigationBlockingMessage() {
+        this.navigationBlocker?.enableMessage();
+    }
+    disableNavigationBlocking() {
+        this.navigationBlocker?.disable();
+    }
+    disableNavigationBlockingMessage() {
+        this.navigationBlocker?.disableMessage();
+    }
     destroy() {
         this.replacer = null;
-        console.log('[ViewportFixer] Destroyed');
+        this.navigationBlocker?.destroy();
+        this.navigationBlocker = null;
+        console.log('[IframeHelper] Destroyed');
     }
 }
-function initViewportFixer(config) {
-    const fixer = new ViewportUnitsFixer(config);
+
+function initIframeHelperFixer(config) {
+    const fixer = new IframeHelperFixer(config);
     window.addEventListener('iframe-dimensions-applied', ((e) => {
         const ev = e;
-        console.log('[ViewportFixer] Iframe dimensions finalized:', ev.detail);
+        console.log('[IframeHelper] Iframe dimensions finalized:', ev.detail);
+    }));
+    window.addEventListener('iframe-navigation-blocked', ((e) => {
+        const ev = e;
+        console.warn('[IframeHelper] Iframe tried to navigate to:', ev.detail.url);
+    }));
+    window.addEventListener('iframe-form-submit', ((e) => {
+        const ev = e;
+        console.log('[IframeHelper] Iframe form submitted:', ev.detail.data);
     }));
     return fixer;
 }
@@ -1291,7 +1611,7 @@ function useVizLiveRender() {
         if (!iframe || !htmlContent)
             return;
         setIsRenderViz(false);
-        reset$1(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
+        reset(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
         });
@@ -1300,8 +1620,8 @@ function useVizLiveRender() {
         iframeRef,
     };
 }
-function reset$1(iframe, rect, onSuccess) {
-    const viewportFixer = initViewportFixer({
+function reset(iframe, rect, onSuccess) {
+    const fixer = initIframeHelperFixer({
         targetWidth: rect.width,
         targetHeight: rect.height,
         iframe: iframe,
@@ -1310,8 +1630,8 @@ function reset$1(iframe, rect, onSuccess) {
             onSuccess(data.height);
         },
     });
-    viewportFixer.recalculate();
-    return iframe;
+    // fixer.recalculate();
+    fixer.enableNavigationBlocking();
 }
 
 let visualizer = new Visualizer();
@@ -1329,7 +1649,7 @@ const useHeatmapRender = () => {
         if (!iframe?.contentWindow)
             return;
         await visualizer.html(payloads, iframe.contentWindow);
-        reset(iframe, payloads, (height) => {
+        initIframe(iframe, payloads, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
             setVizRef(visualizer);
@@ -1347,11 +1667,11 @@ const useHeatmapRender = () => {
         iframeRef,
     };
 };
-function reset(iframe, payloads, onSuccess) {
+function initIframe(iframe, payloads, onSuccess) {
     const { size } = findLastSizeOfDom(payloads);
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
-    const viewportFixer = initViewportFixer({
+    initIframeHelperFixer({
         targetWidth: docWidth,
         targetHeight: docHeight,
         iframe: iframe,
@@ -1360,8 +1680,7 @@ function reset(iframe, payloads, onSuccess) {
             onSuccess(data.height);
         },
     });
-    viewportFixer.recalculate();
-    return iframe;
+    // fixer.recalculate();
 }
 
 function isMobileDevice(userAgent) {