wu-framework 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wu-framework",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Universal Microfrontends Framework - 13 frameworks, zero config, Shadow DOM isolation",
   "main": "dist/wu-framework.cjs.js",
   "module": "src/index.js",

package/src/core/wu-loader.js

@@ -128,6 +128,9 @@ export class WuLoader {
    * @returns {string} Codigo JavaScript de la aplicacion
    */
   async loadApp(appUrl, manifest) {
+    // Sentinel gate: block code loading for unverified clients
+    await this._ensureSentinelVerified();
+
     const entryFile = manifest?.entry || 'index.js';
     const fullUrl = `${appUrl}/${entryFile}`;
 
@@ -174,6 +177,9 @@ export class WuLoader {
    * @returns {Function} Funcion del componente
    */
   async loadComponent(appUrl, componentPath) {
+    // Sentinel gate
+    await this._ensureSentinelVerified();
+
     // Normalizar ruta del componente
     let normalizedPath = componentPath;
     if (normalizedPath.startsWith('./')) {
@@ -382,4 +388,63 @@ export class WuLoader {
       cacheKeys: Array.from(this.cache.keys())
     };
   }
+
+  // ── Sentinel Gate ─────────────────────────────────────────────────
+  // Blocks code loading until the client is verified as human.
+  // Scrapers that execute JS but don't pass proof-of-work get nothing.
+
+  async _ensureSentinelVerified() {
+    // Skip in development / localhost (sentinel is for production)
+    if (typeof window === 'undefined') return;
+    const host = window.location?.hostname || '';
+    if (host === 'localhost' || host === '127.0.0.1' || host === '0.0.0.0') return;
+
+    // If sentinel is not loaded, allow (backwards compat — site doesn't use sentinel)
+    if (!window.__wu_sentinel) return;
+
+    // Already verified? Proceed.
+    if (window.__wu_sentinel.isVerified()) return;
+
+    // Wait for sentinel verification (max 10 seconds)
+    await new Promise((resolve, reject) => {
+      // Check if verified during wait
+      if (window.__wu_sentinel.isVerified()) {
+        resolve();
+        return;
+      }
+
+      const timeout = setTimeout(() => {
+        cleanup();
+        reject(new Error('[WuLoader] Sentinel verification timeout — content blocked'));
+      }, 10000);
+
+      const onVerified = () => {
+        cleanup();
+        resolve();
+      };
+
+      function cleanup() {
+        clearTimeout(timeout);
+        window.removeEventListener('wu:sentinel:verified', onVerified);
+      }
+
+      window.addEventListener('wu:sentinel:verified', onVerified);
+
+      // Check periodically in case event was missed
+      const check = setInterval(() => {
+        if (window.__wu_sentinel.isVerified()) {
+          clearInterval(check);
+          cleanup();
+          resolve();
+        }
+      }, 100);
+
+      // Clean up interval on timeout too
+      const origCleanup = cleanup;
+      cleanup = function() {
+        clearInterval(check);
+        origCleanup();
+      };
+    });
+  }
 }

package/src/core/wu-sentinel-client.js

@@ -0,0 +1,311 @@
+/**
+ * WU SENTINEL — Client-Side Anti-Scraping Protection
+ *
+ * Works on ANY hosting (nginx, S3, CloudFront, etc.)
+ * because it runs in the browser, not the server.
+ *
+ * Defense layers:
+ *   1. Headless browser detection (navigator.webdriver, etc.)
+ *   2. Honeypot links (invisible traps for crawlers)
+ *   3. Content hydration gate (real content loads after JS proof)
+ *   4. Behavioral analysis (mouse/touch/scroll patterns)
+ *   5. Canvas fingerprint for bot detection
+ *
+ * Usage: automatically injected by `wu build` into production HTML.
+ * Or manually: <script src="wu-sentinel-client.js"></script>
+ */
+
+(function() {
+  'use strict';
+
+  const SENTINEL_VERSION = '1.0.0';
+  const COOKIE_NAME = 'wu_sentinel';
+  const COOKIE_MAX_AGE = 86400; // 24h
+
+  // ── Layer 1: Headless Browser Detection ─────────────────────────────
+
+  function detectHeadless() {
+    const signals = [];
+
+    // navigator.webdriver (set by Puppeteer, Playwright, Selenium)
+    if (navigator.webdriver === true) {
+      signals.push('webdriver');
+    }
+
+    // Missing languages (headless often has empty array)
+    if (!navigator.languages || navigator.languages.length === 0) {
+      signals.push('no-languages');
+    }
+
+    // Chrome without chrome runtime object
+    if (window.chrome === undefined && /Chrome/.test(navigator.userAgent)) {
+      signals.push('chrome-no-runtime');
+    }
+
+    // Permissions API inconsistency
+    if (navigator.permissions) {
+      navigator.permissions.query({ name: 'notifications' }).then(function(result) {
+        if (Notification.permission === 'denied' && result.state === 'prompt') {
+          signals.push('permissions-mismatch');
+        }
+      }).catch(function() {});
+    }
+
+    // Screen dimensions (headless often has 0x0 or 800x600 exactly)
+    if (screen.width === 0 && screen.height === 0) {
+      signals.push('zero-screen');
+    }
+
+    // Broken WebGL (headless often fails or returns generic renderer)
+    try {
+      var canvas = document.createElement('canvas');
+      var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+      if (gl) {
+        var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+        if (debugInfo) {
+          var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+          if (/SwiftShader|llvmpipe|Software/i.test(renderer)) {
+            signals.push('software-renderer');
+          }
+        }
+      } else {
+        signals.push('no-webgl');
+      }
+    } catch(e) {
+      signals.push('webgl-error');
+    }
+
+    // Plugin count (headless typically has 0 plugins)
+    if (navigator.plugins && navigator.plugins.length === 0 &&
+        !/Firefox/.test(navigator.userAgent)) {
+      signals.push('no-plugins');
+    }
+
+    return signals;
+  }
+
+  // ── Layer 2: Honeypot Links ─────────────────────────────────────────
+  // Invisible links that real users never click. Bots follow all links.
+
+  function injectHoneypots() {
+    var styles = [
+      'position:absolute;left:-9999px;top:-9999px',
+      'opacity:0;height:0;width:0;overflow:hidden',
+      'display:block;height:1px;width:1px;overflow:hidden;clip:rect(0,0,0,0)',
+    ];
+
+    var paths = [
+      '/admin/login', '/wp-admin', '/api/users', '/sitemap-index.xml',
+      '/.env', '/config.json', '/graphql', '/api/v2/data',
+    ];
+
+    var container = document.createElement('div');
+    container.setAttribute('aria-hidden', 'true');
+    container.style.cssText = 'position:absolute;overflow:hidden;height:0;width:0';
+
+    for (var i = 0; i < paths.length; i++) {
+      var a = document.createElement('a');
+      a.href = paths[i];
+      a.style.cssText = styles[i % styles.length];
+      a.tabIndex = -1;
+      a.textContent = 'Click here';
+      a.addEventListener('click', function(e) {
+        e.preventDefault();
+        // Bot clicked a honeypot — flag it
+        markAsBot('honeypot-click');
+      });
+      container.appendChild(a);
+    }
+
+    // Insert after DOM ready
+    if (document.body) {
+      document.body.appendChild(container);
+    } else {
+      document.addEventListener('DOMContentLoaded', function() {
+        document.body.appendChild(container);
+      });
+    }
+  }
+
+  // ── Layer 3: Content Hydration Gate ─────────────────────────────────
+  // Real content is hidden until JS proves the client is a browser.
+  // Static HTML scrapers only see the skeleton, not the data.
+
+  function hydrateContent() {
+    // If already verified (cookie exists), hydrate immediately
+    if (isVerified()) {
+      revealContent();
+      return;
+    }
+
+    // Simple proof-of-work: compute a hash that starts with "00"
+    // Takes ~50ms on a real browser, proves JS execution
+    var nonce = 0;
+    var challenge = document.title + navigator.userAgent + screen.width;
+
+    function simpleHash(str) {
+      var hash = 0;
+      for (var i = 0; i < str.length; i++) {
+        var char = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash; // Convert to 32-bit
+      }
+      return Math.abs(hash).toString(16).padStart(8, '0');
+    }
+
+    // Find a nonce where hash starts with "00" (proof of computation)
+    while (nonce < 100000) {
+      var result = simpleHash(challenge + nonce);
+      if (result.substring(0, 2) === '00') {
+        break;
+      }
+      nonce++;
+    }
+
+    // Set verified cookie
+    setVerified(nonce);
+    revealContent();
+  }
+
+  function revealContent() {
+    // Remove any wu-sentinel-gate class (content was hidden)
+    var gated = document.querySelectorAll('[data-wu-gated]');
+    for (var i = 0; i < gated.length; i++) {
+      gated[i].style.opacity = '1';
+      gated[i].style.visibility = 'visible';
+    }
+
+    // Dispatch event for wu-framework to know content is ready
+    window.dispatchEvent(new CustomEvent('wu:sentinel:verified'));
+  }
+
+  // ── Layer 4: Behavioral Analysis ────────────────────────────────────
+  // Track mouse/touch/scroll to build a human confidence score.
+
+  function startBehavioralAnalysis() {
+    var interactions = { mouse: 0, scroll: 0, touch: 0, keys: 0 };
+    var isHuman = false;
+
+    function onInteraction(type) {
+      interactions[type]++;
+      var total = interactions.mouse + interactions.scroll +
+                  interactions.touch + interactions.keys;
+      // After 3+ different interaction types, mark as human
+      var types = 0;
+      if (interactions.mouse > 0) types++;
+      if (interactions.scroll > 0) types++;
+      if (interactions.touch > 0) types++;
+      if (interactions.keys > 0) types++;
+
+      if (total > 5 && types >= 2 && !isHuman) {
+        isHuman = true;
+        setVerified('behavioral');
+        window.dispatchEvent(new CustomEvent('wu:sentinel:human', {
+          detail: { interactions: interactions }
+        }));
+      }
+    }
+
+    document.addEventListener('mousemove', function() { onInteraction('mouse'); }, { passive: true });
+    document.addEventListener('scroll', function() { onInteraction('scroll'); }, { passive: true });
+    document.addEventListener('touchstart', function() { onInteraction('touch'); }, { passive: true });
+    document.addEventListener('keydown', function() { onInteraction('keys'); }, { passive: true });
+  }
+
+  // ── Layer 5: Canvas Fingerprint ─────────────────────────────────────
+  // Generates a unique browser fingerprint. Headless browsers produce
+  // identical or empty fingerprints.
+
+  function getCanvasFingerprint() {
+    try {
+      var canvas = document.createElement('canvas');
+      canvas.width = 200;
+      canvas.height = 50;
+      var ctx = canvas.getContext('2d');
+      if (!ctx) return 'no-canvas';
+
+      ctx.textBaseline = 'top';
+      ctx.font = '14px Arial';
+      ctx.fillStyle = '#f60';
+      ctx.fillRect(125, 1, 62, 20);
+      ctx.fillStyle = '#069';
+      ctx.fillText('Wu Sentinel', 2, 15);
+      ctx.fillStyle = 'rgba(102,204,0,0.7)';
+      ctx.fillText('Wu Sentinel', 4, 17);
+
+      var dataUrl = canvas.toDataURL();
+      // Simple hash of the data URL
+      var hash = 0;
+      for (var i = 0; i < dataUrl.length; i++) {
+        hash = ((hash << 5) - hash) + dataUrl.charCodeAt(i);
+        hash = hash & hash;
+      }
+      return Math.abs(hash).toString(36);
+    } catch(e) {
+      return 'canvas-error';
+    }
+  }
+
+  // ── Utilities ───────────────────────────────────────────────────────
+
+  function isVerified() {
+    return document.cookie.indexOf(COOKIE_NAME + '=') !== -1;
+  }
+
+  function setVerified(proof) {
+    var fp = getCanvasFingerprint();
+    var value = btoa(JSON.stringify({
+      v: SENTINEL_VERSION,
+      t: Date.now(),
+      p: String(proof),
+      f: fp
+    }));
+    document.cookie = COOKIE_NAME + '=' + value +
+      ';path=/;max-age=' + COOKIE_MAX_AGE +
+      ';SameSite=Lax';
+  }
+
+  function markAsBot(reason) {
+    console.warn('[Wu Sentinel] Bot detected:', reason);
+    window.dispatchEvent(new CustomEvent('wu:sentinel:bot', {
+      detail: { reason: reason }
+    }));
+    // Could send to analytics endpoint if configured
+  }
+
+  // ── Initialize ──────────────────────────────────────────────────────
+
+  function init() {
+    // 1. Check for headless signals
+    var headlessSignals = detectHeadless();
+    if (headlessSignals.length >= 2) {
+      markAsBot('headless:' + headlessSignals.join(','));
+    }
+
+    // 2. Inject honeypot links
+    injectHoneypots();
+
+    // 3. Hydrate gated content (proof-of-work)
+    hydrateContent();
+
+    // 4. Start behavioral tracking
+    startBehavioralAnalysis();
+  }
+
+  // Run after DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+  // Expose for wu-framework integration
+  if (typeof window !== 'undefined') {
+    window.__wu_sentinel = {
+      version: SENTINEL_VERSION,
+      isVerified: isVerified,
+      getFingerprint: getCanvasFingerprint,
+      detectHeadless: detectHeadless,
+    };
+  }
+})();