wu-framework 1.1.6 → 1.1.8

package/src/core/wu-proxy-sandbox.js

@@ -1,68 +1,98 @@
 /**
- * 🛡️ WU-PROXY-SANDBOX: JavaScript Isolation con Proxy
- * Basado en video-code - Aislamiento real de variables globales
+ * WU-PROXY-SANDBOX: Hardened JavaScript Isolation
  *
- * Este sandbox usa ES6 Proxy para interceptar accesos a window
- * y aislar completamente el JavaScript entre micro-apps
+ * ES6 Proxy-based sandbox with side-effect tracking:
+ * - Timer hijacking (setTimeout, setInterval, requestAnimationFrame)
+ * - Event listener tracking (window + document addEventListener)
+ * - DOM scoping (querySelector/querySelectorAll → shadow root)
+ * - Storage scoping (localStorage/sessionStorage → prefixed keys)
+ *
+ * All tracked side effects are automatically cleaned up on deactivate().
  */
 
+import { logger } from './wu-logger.js';
+
 export class WuProxySandbox {
   constructor(appName) {
     this.appName = appName;
     this.proxy = null;
-    this.fakeWindow = Object.create(null); // Namespace aislado
+    this.fakeWindow = Object.create(null);
     this.active = false;
-    this.modifiedKeys = new Set(); // Track de propiedades modificadas
+    this.modifiedKeys = new Set();
+
+    // --- Side-effect tracking ---
+    this._timers = new Set();
+    this._intervals = new Set();
+    this._rafs = new Set();
+    this._eventListeners = []; // [{target, event, handler, options}]
 
-    console.log(`[WuProxySandbox] 🛡️ Creating proxy sandbox for: ${appName}`);
+    // --- DOM & Storage scoping ---
+    this._container = null;
+    this._shadowRoot = null;
+    this._scopedDocument = null;
+    this._scopedLocalStorage = null;
+    this._scopedSessionStorage = null;
+
+    // --- Window patching state ---
+    this._patched = false;
+    this._originals = null;
   }
 
   /**
-   * Activar sandbox - Crea el Proxy que aísla window
+   * Set the DOM scope for this sandbox.
+   * Must be called before activate() for DOM scoping to work.
+   * @param {HTMLElement} container - App container element
+   * @param {ShadowRoot} shadowRoot - Shadow root containing the container
+   */
+  setContainer(container, shadowRoot) {
+    this._container = container;
+    this._shadowRoot = shadowRoot;
+  }
+
+  /**
+   * Activate the sandbox. Creates the Proxy and starts tracking.
+   * @returns {Proxy} The sandboxed window proxy
    */
   activate() {
-    if (this.active) {
-      console.warn(`[WuProxySandbox] Sandbox already active for ${this.appName}`);
-      return this.proxy;
-    }
+    if (this.active) return this.proxy;
+
+    const self = this;
 
     this.proxy = new Proxy(window, {
-      get: (target, prop) => {
-        // 🔍 Primero buscar en el namespace aislado
-        if (prop in this.fakeWindow) {
-          return this.fakeWindow[prop];
+      get(target, prop) {
+        // 1. App's own isolated globals
+        if (prop in self.fakeWindow) {
+          return self.fakeWindow[prop];
         }
 
-        // 🎯 Propiedades del window real
-        const value = target[prop];
+        // 2. Intercepted APIs
+        const intercepted = self._intercept(prop, target);
+        if (intercepted !== undefined) {
+          return intercepted;
+        }
 
-        // ⚠️ CRÍTICO: Bind de funciones para mantener contexto
-        if (typeof value === 'function' && !this.isConstructor(value)) {
+        // 3. Real window value with correct binding
+        const value = target[prop];
+        if (typeof value === 'function' && !self._isConstructor(value)) {
           return value.bind(target);
         }
-
         return value;
       },
 
-      set: (target, prop, value) => {
-        // 🛡️ AISLAMIENTO: Todo set va al namespace aislado
-        this.fakeWindow[prop] = value;
-        this.modifiedKeys.add(prop);
-
-        console.log(`[WuProxySandbox] 📝 ${this.appName} set: ${String(prop)}`);
+      set(target, prop, value) {
+        self.fakeWindow[prop] = value;
+        self.modifiedKeys.add(prop);
         return true;
       },
 
-      has: (target, prop) => {
-        // Verificar tanto en fakeWindow como en window real
-        return prop in this.fakeWindow || prop in target;
+      has(target, prop) {
+        return prop in self.fakeWindow || prop in target;
       },
 
-      deleteProperty: (target, prop) => {
-        // Solo permitir delete en el namespace aislado
-        if (prop in this.fakeWindow) {
-          delete this.fakeWindow[prop];
-          this.modifiedKeys.delete(prop);
+      deleteProperty(target, prop) {
+        if (prop in self.fakeWindow) {
+          delete self.fakeWindow[prop];
+          self.modifiedKeys.delete(prop);
           return true;
         }
         return false;
@@ -70,84 +100,377 @@ export class WuProxySandbox {
     });
 
     this.active = true;
-    console.log(`[WuProxySandbox] ✅ Proxy sandbox activated for ${this.appName}`);
-
+    logger.wuDebug(`[ProxySandbox] Activated for ${this.appName}`);
     return this.proxy;
   }
 
   /**
-   * Desactivar sandbox - Limpia el namespace aislado
+   * Deactivate the sandbox. Cleans up ALL tracked side effects.
    */
   deactivate() {
-    if (!this.active) {
-      console.warn(`[WuProxySandbox] Sandbox not active for ${this.appName}`);
-      return;
+    if (!this.active) return;
+
+    // Unpatch window if patched
+    this.unpatchWindow();
+
+    // --- Clean timers ---
+    for (const id of this._timers) {
+      try { clearTimeout(id); } catch {}
+    }
+    for (const id of this._intervals) {
+      try { clearInterval(id); } catch {}
     }
+    for (const id of this._rafs) {
+      try { cancelAnimationFrame(id); } catch {}
+    }
+
+    const timerCount = this._timers.size + this._intervals.size + this._rafs.size;
+    this._timers.clear();
+    this._intervals.clear();
+    this._rafs.clear();
 
-    console.log(`[WuProxySandbox] 🧹 Deactivating sandbox for ${this.appName}`);
+    // --- Clean event listeners ---
+    const listenerCount = this._eventListeners.length;
+    for (const { target, event, handler, options } of this._eventListeners) {
+      try { target.removeEventListener(event, handler, options); } catch {}
+    }
+    this._eventListeners = [];
 
-    // 🧹 Limpiar todas las propiedades modificadas
+    // --- Clean namespace ---
     this.fakeWindow = Object.create(null);
     this.modifiedKeys.clear();
+    this._scopedDocument = null;
+    this._scopedLocalStorage = null;
+    this._scopedSessionStorage = null;
     this.proxy = null;
     this.active = false;
 
-    console.log(`[WuProxySandbox] ✅ Sandbox deactivated for ${this.appName}`);
+    if (timerCount > 0 || listenerCount > 0) {
+      logger.wuDebug(
+        `[ProxySandbox] ${this.appName} cleanup: ${timerCount} timers, ${listenerCount} listeners`
+      );
+    }
+    logger.wuDebug(`[ProxySandbox] Deactivated for ${this.appName}`);
+  }
+
+  // ================================================================
+  // WINDOW PATCHING - patches real window APIs during module loading
+  // ================================================================
+
+  /**
+   * Patch real window APIs to track side effects from global code.
+   * Call before loading app module, unpatch after.
+   *
+   * IMPORTANT: Uses closure over originals so patched functions remain
+   * valid even after unpatchWindow() — prevents crashes when frameworks
+   * (React 19, etc.) cache references to patched setTimeout during import.
+   */
+  patchWindow() {
+    if (this._patched) return;
+
+    const self = this;
+
+    // Capture originals in a local closure that survives unpatch
+    const originals = {
+      setTimeout: window.setTimeout,
+      clearTimeout: window.clearTimeout,
+      setInterval: window.setInterval,
+      clearInterval: window.clearInterval,
+      requestAnimationFrame: window.requestAnimationFrame,
+      cancelAnimationFrame: window.cancelAnimationFrame,
+      addEventListener: window.addEventListener,
+      removeEventListener: window.removeEventListener
+    };
+
+    // Store reference (used by unpatchWindow to restore)
+    this._originals = originals;
+
+    // Patch timers — closure captures `originals`, not `self._originals`
+    window.setTimeout = function(fn, delay, ...args) {
+      const id = originals.setTimeout.call(window, fn, delay, ...args);
+      if (self._patched) self._timers.add(id);
+      return id;
+    };
+    window.clearTimeout = function(id) {
+      self._timers.delete(id);
+      return originals.clearTimeout.call(window, id);
+    };
+    window.setInterval = function(fn, delay, ...args) {
+      const id = originals.setInterval.call(window, fn, delay, ...args);
+      if (self._patched) self._intervals.add(id);
+      return id;
+    };
+    window.clearInterval = function(id) {
+      self._intervals.delete(id);
+      return originals.clearInterval.call(window, id);
+    };
+    window.requestAnimationFrame = function(fn) {
+      const id = originals.requestAnimationFrame.call(window, fn);
+      if (self._patched) self._rafs.add(id);
+      return id;
+    };
+    window.cancelAnimationFrame = function(id) {
+      self._rafs.delete(id);
+      return originals.cancelAnimationFrame.call(window, id);
+    };
+
+    // Patch event listeners
+    window.addEventListener = function(event, handler, options) {
+      if (self._patched) self._eventListeners.push({ target: window, event, handler, options });
+      return originals.addEventListener.call(window, event, handler, options);
+    };
+    window.removeEventListener = function(event, handler, options) {
+      self._eventListeners = self._eventListeners.filter(
+        l => !(l.target === window && l.event === event && l.handler === handler)
+      );
+      return originals.removeEventListener.call(window, event, handler, options);
+    };
+
+    this._patched = true;
+    logger.wuDebug(`[ProxySandbox] Window patched for ${this.appName}`);
   }
 
   /**
-   * Verificar si un valor es un constructor (class)
+   * Restore original window APIs.
+   * Safe: patched functions still work via closure even after restore.
    */
-  isConstructor(fn) {
+  unpatchWindow() {
+    if (!this._patched || !this._originals) return;
+
+    window.setTimeout = this._originals.setTimeout;
+    window.clearTimeout = this._originals.clearTimeout;
+    window.setInterval = this._originals.setInterval;
+    window.clearInterval = this._originals.clearInterval;
+    window.requestAnimationFrame = this._originals.requestAnimationFrame;
+    window.cancelAnimationFrame = this._originals.cancelAnimationFrame;
+    window.addEventListener = this._originals.addEventListener;
+    window.removeEventListener = this._originals.removeEventListener;
+
+    // NOTE: Do NOT null _originals — patched closures may still reference
+    // the sandbox instance (e.g. React scheduler caches setTimeout).
+    // The closure uses `originals` (local const), not `this._originals`.
+    this._patched = false;
+    logger.wuDebug(`[ProxySandbox] Window unpatched for ${this.appName}`);
+  }
+
+  // ================================================================
+  // PROXY INTERCEPTS - for code running through the proxy
+  // ================================================================
+
+  /**
+   * Intercept property access on the proxy.
+   * Returns wrapped API or undefined to fall through.
+   */
+  _intercept(prop, target) {
+    const self = this;
+
+    switch (prop) {
+      // --- Timer hijacking ---
+      case 'setTimeout':
+        return function(fn, delay, ...args) {
+          const id = target.setTimeout(fn, delay, ...args);
+          self._timers.add(id);
+          return id;
+        };
+      case 'clearTimeout':
+        return function(id) {
+          self._timers.delete(id);
+          target.clearTimeout(id);
+        };
+      case 'setInterval':
+        return function(fn, delay, ...args) {
+          const id = target.setInterval(fn, delay, ...args);
+          self._intervals.add(id);
+          return id;
+        };
+      case 'clearInterval':
+        return function(id) {
+          self._intervals.delete(id);
+          target.clearInterval(id);
+        };
+      case 'requestAnimationFrame':
+        return function(fn) {
+          const id = target.requestAnimationFrame(fn);
+          self._rafs.add(id);
+          return id;
+        };
+      case 'cancelAnimationFrame':
+        return function(id) {
+          self._rafs.delete(id);
+          target.cancelAnimationFrame(id);
+        };
+
+      // --- Event listener tracking ---
+      case 'addEventListener':
+        return function(event, handler, options) {
+          self._eventListeners.push({ target, event, handler, options });
+          target.addEventListener(event, handler, options);
+        };
+      case 'removeEventListener':
+        return function(event, handler, options) {
+          self._eventListeners = self._eventListeners.filter(
+            l => !(l.target === target && l.event === event && l.handler === handler)
+          );
+          target.removeEventListener(event, handler, options);
+        };
+
+      // --- DOM scoping ---
+      case 'document':
+        return this._getScopedDocument();
+
+      // --- Storage scoping ---
+      case 'localStorage':
+        return this._getScopedStorage('local');
+      case 'sessionStorage':
+        return this._getScopedStorage('session');
+    }
+
+    return undefined;
+  }
+
+  // ================================================================
+  // DOM SCOPING - querySelector searches inside shadow root
+  // ================================================================
+
+  _getScopedDocument() {
+    if (this._scopedDocument) return this._scopedDocument;
+
+    const root = this._shadowRoot || this._container;
+    if (!root) return document; // No container set, pass through
+
+    const self = this;
+
+    this._scopedDocument = new Proxy(document, {
+      get(target, prop) {
+        switch (prop) {
+          case 'querySelector':
+            return (selector) => root.querySelector(selector);
+          case 'querySelectorAll':
+            return (selector) => root.querySelectorAll(selector);
+          case 'getElementById':
+            return (id) => root.querySelector(`#${CSS.escape(id)}`);
+          case 'getElementsByClassName':
+            return (className) => root.querySelectorAll(`.${CSS.escape(className)}`);
+          case 'getElementsByTagName':
+            return (tag) => root.querySelectorAll(tag);
+
+          // Track document event listeners too
+          case 'addEventListener':
+            return function(event, handler, options) {
+              self._eventListeners.push({ target, event, handler, options });
+              target.addEventListener(event, handler, options);
+            };
+          case 'removeEventListener':
+            return function(event, handler, options) {
+              self._eventListeners = self._eventListeners.filter(
+                l => !(l.target === target && l.event === event && l.handler === handler)
+              );
+              target.removeEventListener(event, handler, options);
+            };
+
+          // createElement, createTextNode, etc. - pass through
+          default: {
+            const value = target[prop];
+            if (typeof value === 'function') {
+              return value.bind(target);
+            }
+            return value;
+          }
+        }
+      }
+    });
+
+    return this._scopedDocument;
+  }
+
+  // ================================================================
+  // STORAGE SCOPING - localStorage/sessionStorage with app prefix
+  // ================================================================
+
+  _getScopedStorage(type) {
+    const cacheKey = type === 'local' ? '_scopedLocalStorage' : '_scopedSessionStorage';
+    if (this[cacheKey]) return this[cacheKey];
+
+    const realStorage = type === 'local' ? window.localStorage : window.sessionStorage;
+    if (!realStorage) return realStorage;
+
+    const prefix = `wu_${this.appName}_`;
+
+    this[cacheKey] = {
+      getItem(key) {
+        return realStorage.getItem(prefix + key);
+      },
+      setItem(key, value) {
+        realStorage.setItem(prefix + key, String(value));
+      },
+      removeItem(key) {
+        realStorage.removeItem(prefix + key);
+      },
+      clear() {
+        // Only clear this app's keys
+        const toRemove = [];
+        for (let i = 0; i < realStorage.length; i++) {
+          const k = realStorage.key(i);
+          if (k && k.startsWith(prefix)) toRemove.push(k);
+        }
+        toRemove.forEach(k => realStorage.removeItem(k));
+      },
+      key(index) {
+        let count = 0;
+        for (let i = 0; i < realStorage.length; i++) {
+          const k = realStorage.key(i);
+          if (k && k.startsWith(prefix)) {
+            if (count === index) return k.slice(prefix.length);
+            count++;
+          }
+        }
+        return null;
+      },
+      get length() {
+        let count = 0;
+        for (let i = 0; i < realStorage.length; i++) {
+          if (realStorage.key(i)?.startsWith(prefix)) count++;
+        }
+        return count;
+      }
+    };
+
+    return this[cacheKey];
+  }
+
+  // ================================================================
+  // UTILITIES
+  // ================================================================
+
+  _isConstructor(fn) {
     try {
-      // Detectar constructores/classes por su prototipo
       return fn.prototype && fn.prototype.constructor === fn;
     } catch {
       return false;
     }
   }
 
-  /**
-   * Obtener el proxy activo (o null si no está activo)
-   */
   getProxy() {
     return this.active ? this.proxy : null;
   }
 
-  /**
-   * Verificar si el sandbox está activo
-   */
   isActive() {
     return this.active;
   }
 
-  /**
-   * Obtener estadísticas del sandbox
-   */
   getStats() {
     return {
       appName: this.appName,
       active: this.active,
+      patched: this._patched,
       modifiedKeys: Array.from(this.modifiedKeys),
-      isolatedPropsCount: Object.keys(this.fakeWindow).length
+      isolatedPropsCount: Object.keys(this.fakeWindow).length,
+      trackedTimers: this._timers.size,
+      trackedIntervals: this._intervals.size,
+      trackedRAFs: this._rafs.size,
+      trackedEventListeners: this._eventListeners.length,
+      hasContainer: !!this._container,
+      hasShadowRoot: !!this._shadowRoot
     };
   }
-
-  /**
-   * Limpiar propiedades específicas del namespace
-   */
-  clearProperty(prop) {
-    if (prop in this.fakeWindow) {
-      delete this.fakeWindow[prop];
-      this.modifiedKeys.delete(prop);
-      console.log(`[WuProxySandbox] 🗑️ Cleared property: ${String(prop)}`);
-    }
-  }
-
-  /**
-   * Obtener todas las propiedades aisladas
-   */
-  getIsolatedProperties() {
-    return { ...this.fakeWindow };
-  }
 }