@vninvestcharts/widget 0.0.0-stage → 0.2.0

package/dist/iframe-host/host-entry.js

@@ -0,0 +1,680 @@
+// src/widget/iframe/messageProtocol.ts
+function isRequestMessage(msg) {
+  return typeof msg === "object" && msg !== null && "type" in msg && typeof msg.type === "string" && msg.type.startsWith("request:");
+}
+function isResponseMessage(msg) {
+  return typeof msg === "object" && msg !== null && "type" in msg && typeof msg.type === "string" && msg.type.startsWith("response:");
+}
+function isEventMessage(msg) {
+  return typeof msg === "object" && msg !== null && "type" in msg && typeof msg.type === "string" && msg.type.startsWith("event:");
+}
+function isHostToIframeCommand(msg) {
+  return isRequestMessage(msg);
+}
+function isIframeToHostEvent(msg) {
+  return isEventMessage(msg);
+}
+function generateCorrelationId() {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+}
+
+// src/widget/iframe/iframeBridge.ts
+var DEFAULT_ALLOWED_ORIGINS = [
+  "https://vninvestcharts.com",
+  "https://app.vninvestcharts.com",
+  "https://charts.vninvestcharts.com",
+  "http://localhost:3000",
+  "http://localhost:5173",
+  "http://127.0.0.1:3000",
+  "http://127.0.0.1:5173"
+];
+function matchOriginPattern(pattern, origin) {
+  if (pattern === origin) return true;
+  if (!pattern.includes("*")) return false;
+  if (pattern === "*") return false;
+  const parts = pattern.split("*");
+  if (parts.length !== 2) return false;
+  const [prefix, suffix] = parts;
+  if (!suffix.startsWith(".")) return false;
+  if (!prefix.endsWith("//")) return false;
+  if (!origin.startsWith(prefix)) return false;
+  const host = origin.slice(prefix.length);
+  return host === suffix.slice(1) || host.endsWith(suffix);
+}
+var IframeBridge = class {
+  config;
+  pendingRequests = /* @__PURE__ */ new Map();
+  messageHandler = null;
+  requestHandler = null;
+  boundHandleMessage;
+  isDestroyed = false;
+  readyPromise = null;
+  readyResolve = null;
+  /**
+   * Origin pinned from the first origin-allowlisted incoming message
+   * (iframe side). All outbound sends use it instead of the "*" fallback,
+   * so widget data is never broadcast to arbitrary windows once the host
+   * is known. Re-pinned on every validated message (allows host moves).
+   */
+  pinnedSendOrigin = null;
+  /** SEC-01: sliding-window counters for the inbound rate limit. */
+  rateWindowStart = 0;
+  rateCount = 0;
+  constructor(config) {
+    if (config.allowAnyOrigin) {
+      console.warn("[IframeBridge] allowAnyOrigin is ENABLED \u2014 origin validation disabled. This is UNSAFE for production.");
+    }
+    this.config = {
+      requestTimeout: 3e4,
+      // SEC-01 defaults: 1 MB per message, 600 messages / 10s.
+      maxPayloadBytes: 1e6,
+      maxMessages: 600,
+      rateWindowMs: 1e4,
+      ...config
+    };
+    this.boundHandleMessage = this.handleMessage.bind(this);
+    window.addEventListener("message", this.boundHandleMessage);
+    this.readyPromise = new Promise((resolve) => {
+      this.readyResolve = resolve;
+    });
+  }
+  /**
+   * Set handler for incoming events (Host side)
+   */
+  setMessageHandler(handler) {
+    this.messageHandler = handler;
+  }
+  /**
+   * Set handler for incoming requests (Iframe side)
+   */
+  setRequestHandler(handler) {
+    this.requestHandler = handler;
+  }
+  /**
+   * Resolve the target origin for outbound sends. Prefers the pinned
+   * validated origin; falls back to the configured targetOrigin ("*" only
+   * until the first allowlisted message arrives on the iframe side).
+   */
+  resolveSendOrigin() {
+    return this.pinnedSendOrigin ?? this.config.targetOrigin;
+  }
+  /**
+   * Send a command to the other side
+   */
+  async sendCommand(command, timeoutMs) {
+    if (this.isDestroyed) {
+      throw new Error("Bridge is destroyed");
+    }
+    const correlationId = command.correlationId;
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(correlationId);
+        reject(new Error(`Request timeout: ${command.type}`));
+      }, timeoutMs ?? this.config.requestTimeout);
+      this.pendingRequests.set(correlationId, { resolve, reject, timeout });
+      this.config.targetWindow.postMessage(command, this.resolveSendOrigin());
+    });
+  }
+  /**
+   * Send an event (fire-and-forget)
+   */
+  sendEvent(event) {
+    if (this.isDestroyed) return;
+    this.config.targetWindow.postMessage(event, this.resolveSendOrigin());
+  }
+  /**
+   * Send a response to a request
+   */
+  sendResponse(request, payload, success = true, error) {
+    if (this.isDestroyed) return;
+    const response = {
+      type: `response:${request.type.replace("request:", "")}`,
+      // ARC-1-keep: legacy bridge
+      correlationId: request.correlationId,
+      timestamp: Date.now(),
+      origin: typeof window !== "undefined" ? window.location.origin : "unknown",
+      payload,
+      success,
+      error
+    };
+    this.config.targetWindow.postMessage(response, this.resolveSendOrigin());
+  }
+  /**
+   * Wait for the bridge to be ready (Iframe side)
+   */
+  async waitForReady() {
+    return this.readyPromise;
+  }
+  /**
+   * Signal that Iframe is ready (Iframe side)
+   */
+  signalReady(version, capabilities) {
+    if (this.readyResolve) {
+      this.readyResolve();
+      this.readyResolve = null;
+    }
+    this.sendEvent({
+      type: "event:ready",
+      correlationId: generateCorrelationId(),
+      timestamp: Date.now(),
+      origin: typeof window !== "undefined" ? window.location.origin : "unknown",
+      payload: { version, capabilities }
+    });
+  }
+  /**
+   * Validate message origin against allowlist.
+   *
+   * SEC-01: wildcard patterns are matched as PLAIN STRINGS, never compiled into
+   * a RegExp. The previous implementation replaced every `*` with `.*` and then
+   * ran `new RegExp`, which left every `.` unescaped, so a pattern like
+   * `https:` + wildcard-subdomain + `vninvestcharts.com` also matched origins
+   * such as `https://evilvninvestchartsXcom`. Only a leading subdomain
+   * wildcard is supported and it must sit on a scheme boundary.
+   */
+  isOriginAllowed(origin) {
+    if (this.config.allowedOrigins.includes("*") || this.config.allowAnyOrigin) {
+      return true;
+    }
+    if (typeof origin !== "string" || origin === "" || origin === "null") {
+      return origin === "null" && this.config.allowedOrigins.includes("null");
+    }
+    return this.config.allowedOrigins.some((allowed) => matchOriginPattern(allowed, origin));
+  }
+  /** SEC-01: counters for rejected traffic — surfaced for tests/monitoring. */
+  stats = { rejectedOrigin: 0, rejectedSize: 0, rejectedRate: 0, accepted: 0 };
+  /**
+   * SEC-01: size + rate gate, applied after the origin is trusted so that
+   * hostile origins are not charged against the budget.
+   */
+  passesTrafficBudget(data) {
+    const maxBytes = this.config.maxPayloadBytes ?? 1e6;
+    if (maxBytes > 0) {
+      let size = 0;
+      try {
+        size = typeof data === "string" ? data.length : JSON.stringify(data)?.length ?? 0;
+      } catch {
+        this.stats.rejectedSize++;
+        return false;
+      }
+      if (size > maxBytes) {
+        this.stats.rejectedSize++;
+        return false;
+      }
+    }
+    const maxMessages = this.config.maxMessages ?? 600;
+    const windowMs = this.config.rateWindowMs ?? 1e4;
+    if (maxMessages > 0) {
+      const now = Date.now();
+      if (now - this.rateWindowStart >= windowMs) {
+        this.rateWindowStart = now;
+        this.rateCount = 0;
+      }
+      if (this.rateCount >= maxMessages) {
+        this.stats.rejectedRate++;
+        return false;
+      }
+      this.rateCount++;
+    }
+    return true;
+  }
+  /**
+   * Handle incoming postMessage
+   */
+  handleMessage(event) {
+    if (this.isDestroyed) return;
+    if (!this.isOriginAllowed(event.origin)) {
+      this.stats.rejectedOrigin++;
+      console.warn(`[IframeBridge] Rejected message from unauthorized origin: ${event.origin}`);
+      return;
+    }
+    if (this.config.isHost && this.config.targetOrigin !== "*" && event.origin !== this.config.targetOrigin) {
+      this.stats.rejectedOrigin++;
+      console.warn(`[IframeBridge] Rejected: origin ${event.origin} != expected ${this.config.targetOrigin}`);
+      return;
+    }
+    if (!this.passesTrafficBudget(event.data)) {
+      return;
+    }
+    this.stats.accepted++;
+    if (!this.config.isHost && event.origin !== "null" && event.origin !== "") {
+      this.pinnedSendOrigin = event.origin;
+    }
+    const message = event.data;
+    if (isResponseMessage(message)) {
+      const pending = this.pendingRequests.get(message.correlationId);
+      if (pending) {
+        clearTimeout(pending.timeout);
+        this.pendingRequests.delete(message.correlationId);
+        if (message.success) {
+          pending.resolve(message.payload);
+        } else {
+          pending.reject(new Error(message.error || "Unknown error"));
+        }
+      }
+      return;
+    }
+    if (isHostToIframeCommand(message) && this.requestHandler) {
+      this.requestHandler(message).then((payload) => this.sendResponse(message, payload, true)).catch((error) => this.sendResponse(message, { success: false, error: error.message }, false, error.message));
+      return;
+    }
+    if (isIframeToHostEvent(message) && this.messageHandler) {
+      this.messageHandler(message);
+      return;
+    }
+    console.warn("[IframeBridge] Received unknown message type:", message?.type);
+  }
+  /**
+   * Destroy the bridge and cleanup
+   */
+  destroy() {
+    if (this.isDestroyed) return;
+    this.isDestroyed = true;
+    window.removeEventListener("message", this.boundHandleMessage);
+    for (const [, pending] of this.pendingRequests) {
+      clearTimeout(pending.timeout);
+      pending.reject(new Error("Bridge destroyed"));
+    }
+    this.pendingRequests.clear();
+    this.messageHandler = null;
+    this.requestHandler = null;
+    this.readyResolve = null;
+  }
+};
+function createHostBridge(iframe, allowedOrigins = DEFAULT_ALLOWED_ORIGINS, options = {}) {
+  const src = iframe.src;
+  if (!src || src.trim() === "") {
+    throw new Error(
+      "[IframeBridge] Cannot create host bridge: iframe has no src. Set the iframe src before connecting so the expected origin can be derived."
+    );
+  }
+  return new IframeBridge({
+    targetWindow: iframe.contentWindow,
+    targetOrigin: new URL(src).origin,
+    allowedOrigins,
+    isHost: true,
+    ...options
+  });
+}
+
+// src/widget/iframe/hostSDK.ts
+var EmbedError = class extends Error {
+  code;
+  recoverable;
+  detail;
+  constructor(code, message, recoverable = true, detail) {
+    super(message);
+    this.name = "EmbedError";
+    this.code = code;
+    this.recoverable = recoverable;
+    this.detail = detail;
+  }
+};
+var DEFAULT_CONFIG = {
+  allowedOrigins: DEFAULT_ALLOWED_ORIGINS,
+  connectionTimeout: 1e4,
+  // E4: fail fast by default; slow ops (initialize/captureSnapshot) opt out.
+  requestTimeout: 5e3
+};
+var VNInvestChartsHostSDK = class {
+  config;
+  iframe;
+  bridge = null;
+  isReady = false;
+  version = null;
+  capabilities = [];
+  readyPromise = null;
+  readyResolve = null;
+  eventListeners = /* @__PURE__ */ new Map();
+  constructor(config) {
+    this.config = { ...DEFAULT_CONFIG, ...config };
+    if (typeof config.iframe === "string") {
+      const element = document.querySelector(config.iframe);
+      if (!element) {
+        throw new Error(`Iframe not found: ${config.iframe}`);
+      }
+      this.iframe = element;
+    } else {
+      this.iframe = config.iframe;
+    }
+    this.readyPromise = new Promise((resolve) => {
+      this.readyResolve = resolve;
+    });
+  }
+  /**
+   * Connect to the iframe widget
+   */
+  async connect() {
+    if (this.bridge) {
+      return;
+    }
+    await this.waitForIframeLoad();
+    this.bridge = createHostBridge(this.iframe, this.config.allowedOrigins, {
+      requestTimeout: this.config.requestTimeout,
+      onReady: () => this.handleReady(),
+      onError: (error) => this.config.onError?.(error)
+    });
+    this.bridge.setMessageHandler((event) => this.handleEvent(event));
+    try {
+      await Promise.race([
+        this.readyPromise,
+        new Promise(
+          (_, reject) => setTimeout(() => reject(new Error("Connection timeout")), this.config.connectionTimeout)
+        )
+      ]);
+    } catch (error) {
+      this.disconnect();
+      throw error;
+    }
+  }
+  /**
+   * Wait for iframe to finish loading
+   */
+  waitForIframeLoad() {
+    return new Promise((resolve, reject) => {
+      if (this.iframe.contentDocument?.readyState === "complete") {
+        resolve();
+        return;
+      }
+      const onLoad = () => {
+        this.iframe.removeEventListener("load", onLoad);
+        resolve();
+      };
+      const onError = () => {
+        this.iframe.removeEventListener("load", onLoad);
+        reject(new Error("Iframe failed to load"));
+      };
+      this.iframe.addEventListener("load", onLoad);
+      this.iframe.addEventListener("error", onError);
+    });
+  }
+  /**
+   * Handle ready signal from iframe
+   */
+  handleReady() {
+    this.isReady = true;
+    this.readyResolve?.();
+    this.readyResolve = null;
+  }
+  /**
+   * Handle incoming events from iframe
+   */
+  handleEvent(event) {
+    if (event.type === "event:ready") {
+      this.version = event.payload.version;
+      this.capabilities = event.payload.capabilities;
+      this.config.onReady?.({ version: this.version, capabilities: this.capabilities });
+      return;
+    }
+    const listeners = this.eventListeners.get(event.type);
+    if (listeners) {
+      for (const listener of listeners) {
+        try {
+          listener(event.payload);
+        } catch (error) {
+          console.error(`[HostSDK] Event listener error for ${event.type}:`, error);
+        }
+      }
+    }
+    this.config.onEvent?.(event);
+  }
+  /**
+   * Get the widget controller API
+   */
+  getController() {
+    if (!this.bridge) {
+      throw new Error("Not connected. Call connect() first.");
+    }
+    const bridge = this.bridge;
+    const toEmbedError = (command, message) => {
+      const code = message.startsWith("Request timeout") ? "BRIDGE_TIMEOUT" : "COMMAND_FAILED";
+      return new EmbedError(code, message, true, command.type);
+    };
+    const sendVoid = async (command, timeoutMs) => {
+      try {
+        const response = await bridge.sendCommand(command, timeoutMs);
+        if (!response.success) {
+          throw new Error(response.error || "Command failed");
+        }
+      } catch (error) {
+        if (error instanceof EmbedError) throw error;
+        throw toEmbedError(command, error instanceof Error ? error.message : String(error));
+      }
+    };
+    const sendWithData = async (command, extractor, timeoutMs) => {
+      try {
+        const response = await bridge.sendCommand(command, timeoutMs);
+        if (!response.success) {
+          throw new Error(response.error || "Command failed");
+        }
+        return extractor(response);
+      } catch (error) {
+        if (error instanceof EmbedError) throw error;
+        throw toEmbedError(command, error instanceof Error ? error.message : String(error));
+      }
+    };
+    return {
+      initialize: (config) => sendWithData(
+        {
+          type: "request:initialize",
+          correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+          timestamp: Date.now(),
+          origin: window.location.origin,
+          payload: config
+        },
+        (payload) => ({ widgetId: payload.widgetId }),
+        3e4
+      ),
+      setSymbol: (symbol) => sendVoid({
+        type: "request:setSymbol",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { symbol }
+      }),
+      setTimeframe: (timeframe) => sendVoid({
+        type: "request:setTimeframe",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { timeframe }
+      }),
+      setRange: (range) => sendVoid({
+        type: "request:setRange",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { range }
+      }),
+      setTheme: (theme) => sendVoid({
+        type: "request:setTheme",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { theme }
+      }),
+      setDrawings: (drawings) => sendVoid({
+        type: "request:setDrawings",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { drawings }
+      }),
+      addDrawing: (drawing) => sendVoid({
+        type: "request:addDrawing",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { drawing }
+      }),
+      removeDrawing: (drawingId) => sendVoid({
+        type: "request:removeDrawing",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { drawingId }
+      }),
+      updateDrawing: (drawingId, updates) => sendVoid({
+        type: "request:updateDrawing",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { drawingId, updates }
+      }),
+      setActiveTool: (tool) => sendVoid({
+        type: "request:setActiveTool",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { tool }
+      }),
+      setDockTab: (tab) => sendVoid({
+        type: "request:setDockTab",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { tab }
+      }),
+      setWatchlist: (symbols) => sendVoid({
+        type: "request:setWatchlist",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { symbols }
+      }),
+      exportDrawings: () => sendWithData(
+        {
+          type: "request:exportDrawings",
+          correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+          timestamp: Date.now(),
+          origin: window.location.origin,
+          payload: {}
+        },
+        (payload) => payload.drawings
+      ),
+      getVisibleRange: () => sendWithData(
+        {
+          type: "request:getVisibleRange",
+          correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+          timestamp: Date.now(),
+          origin: window.location.origin,
+          payload: {}
+        },
+        (payload) => payload.range
+      ),
+      getPaneSnapshots: () => sendWithData(
+        {
+          type: "request:getPaneSnapshots",
+          correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+          timestamp: Date.now(),
+          origin: window.location.origin,
+          payload: {}
+        },
+        (payload) => payload.snapshots
+      ),
+      captureSnapshot: (format, quality) => sendWithData(
+        {
+          type: "request:captureSnapshot",
+          correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+          timestamp: Date.now(),
+          origin: window.location.origin,
+          payload: { format, quality }
+        },
+        (payload) => payload.dataUrl,
+        3e4
+      ),
+      toggleFullscreen: () => sendVoid({
+        type: "request:toggleFullscreen",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: {}
+      }),
+      setLocale: (locale) => sendVoid({
+        type: "request:setLocale",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { locale }
+      }),
+      setTimezone: (timezone) => sendVoid({
+        type: "request:setTimezone",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: { timezone }
+      }),
+      destroy: () => sendVoid({
+        type: "request:destroy",
+        correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+        timestamp: Date.now(),
+        origin: window.location.origin,
+        payload: {}
+      }),
+      subscribeQuotes: async (symbols, onQuotes) => {
+        await sendVoid({
+          type: "request:subscribeQuotes",
+          correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+          timestamp: Date.now(),
+          origin: window.location.origin,
+          payload: { symbols }
+        });
+        const offEvent = this.on("event:quotes", (payload) => {
+          onQuotes(payload.updates ?? []);
+        });
+        let unsubscribed = false;
+        return async () => {
+          if (unsubscribed) return;
+          unsubscribed = true;
+          offEvent();
+          await sendVoid({
+            type: "request:unsubscribeQuotes",
+            correlationId: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+            timestamp: Date.now(),
+            origin: window.location.origin,
+            payload: { symbols }
+          });
+        };
+      },
+      isReady: () => this.isReady,
+      getVersion: () => this.version
+    };
+  }
+  /**
+   * Subscribe to specific event types
+   */
+  on(eventType, listener) {
+    if (!this.eventListeners.has(eventType)) {
+      this.eventListeners.set(eventType, /* @__PURE__ */ new Set());
+    }
+    this.eventListeners.get(eventType).add(listener);
+    return () => {
+      this.eventListeners.get(eventType)?.delete(listener);
+    };
+  }
+  /**
+   * Disconnect and cleanup
+   */
+  disconnect() {
+    if (this.bridge) {
+      this.bridge.destroy();
+      this.bridge = null;
+    }
+    this.isReady = false;
+    this.version = null;
+    this.capabilities = [];
+    this.config.onDisconnect?.();
+  }
+  /**
+   * Check if connected and ready
+   */
+  get connected() {
+    return this.bridge !== null && this.isReady;
+  }
+};
+async function createVNInvestChartsHost(config) {
+  const sdk = new VNInvestChartsHostSDK(config);
+  await sdk.connect();
+  return sdk;
+}
+
+export { DEFAULT_ALLOWED_ORIGINS, EmbedError, IframeBridge, VNInvestChartsHostSDK, createHostBridge, createVNInvestChartsHost };