Wire protocol

frame-src https://view.verticalprop.com;

{ "ns": "vp-embed", "v": 1, "type": "…", … }

<!-- Nothing of ours executes on your page. One frame, and a handler you own. -->
<iframe id="vp-chart"
        src="https://view.verticalprop.com/embed?symbol=BTCUSDT&datafeed=host"
        width="100%" height="480" frameborder="0"
        title="VerticalProp chart"></iframe>

<script>
  var EMBED_ORIGIN = 'https://view.verticalprop.com';
  var frame = document.getElementById('vp-chart');

  /* ---- 1. Your datafeed -------------------------------------------------
     The same object you would hand any charting library. Nothing about it
     knows it is behind an iframe. */

  var STEP = {
    '1': '1m', '5': '5m', '15': '15m', '30': '30m',
    '60': '1h', '240': '4h', '1D': '1d', '1W': '1w', '1M': '1M'
  };
  var sockets = {};

  var feed = {
    onReady: function () {
      return { supported_resolutions: Object.keys(STEP) };
    },

    resolveSymbol: function (name) {
      return {
        name: name,
        description: name,
        session: '24x7',
        timezone: 'Etc/UTC',
        pricescale: 100,
        minmov: 1,
        has_intraday: true,
        supported_resolutions: Object.keys(STEP),
        data_status: 'streaming',
        provider: 'Binance'
      };
    },

    getBars: function (symbol, resolution, period) {
      var url = new URL('https://data-api.binance.vision/api/v3/klines');
      url.searchParams.set('symbol', symbol);
      url.searchParams.set('interval', STEP[resolution] || '1d');
      // period.from/to are SECONDS; bar.time is MILLISECONDS. The commonest
      // mistake in this integration, and it fails as an empty chart.
      url.searchParams.set('endTime', String(period.to * 1000));
      url.searchParams.set('limit', String(Math.min(1000, period.countBack)));

      return fetch(url).then(function (r) { return r.json(); }).then(function (rows) {
        return rows.map(function (k) {
          return {
            time: k[0],
            open: Number(k[1]), high: Number(k[2]),
            low: Number(k[3]), close: Number(k[4]), volume: Number(k[5])
          };
        });
      });
    },

    subscribeBars: function (symbol, resolution, uid, push) {
      var stream = symbol.toLowerCase() + '@kline_' + (STEP[resolution] || '1d');
      var ws = new WebSocket('wss://data-stream.binance.vision/ws/' + stream);
      ws.onmessage = function (ev) {
        var k = JSON.parse(ev.data).k;
        push({
          time: k.t,
          open: Number(k.o), high: Number(k.h),
          low: Number(k.l), close: Number(k.c), volume: Number(k.v)
        });
      };
      sockets[uid] = ws;
    },

    unsubscribeBars: function (uid) {
      if (sockets[uid]) { sockets[uid].close(); delete sockets[uid]; }
    }
  };

  /* ---- 2. The bridge ----------------------------------------------------
     This is all of it. */

  function send(type, payload) {
    payload.ns = 'vp-embed';
    payload.v = 1;
    payload.type = type;
    // Targeted, not '*': there is exactly one window this belongs to.
    frame.contentWindow.postMessage(payload, EMBED_ORIGIN);
  }

  window.addEventListener('message', function (ev) {
    // PIN BOTH. The origin proves the message came from our document; the
    // source proves it came from THIS frame. Origin alone is not enough — a
    // page embedding two of our charts would let one drive the other.
    if (ev.origin !== EMBED_ORIGIN) return;
    if (ev.source !== frame.contentWindow) return;

    var m = ev.data;
    if (!m || m.ns !== 'vp-embed' || m.v !== 1) return;

    // Optional: grow the frame to the chart. This is the one thing embed.js
    // does that you would otherwise miss, and it is two lines.
    if (m.type === 'ready' || m.type === 'resize') {
      frame.style.height = m.height + 'px';
      return;
    }

    if (m.type !== 'datafeedCall') return;

    var fn = feed[m.method];
    if (typeof fn !== 'function') {
      send('datafeedError', { id: m.id, reason: 'no such method: ' + m.method });
      return;
    }

    var args = m.args.slice();
    if (m.method === 'subscribeBars') {
      // A function cannot cross the boundary, so the push callback is made
      // HERE and its ticks are addressed by the subscription id.
      var uid = args[2];
      args.push(function (bar) { send('datafeedTick', { id: uid, bar: bar }); });
    }

    // Sync or async, both work — the reply is always sent from a promise.
    Promise.resolve().then(function () { return fn.apply(feed, args); })
      .then(function (result) { send('datafeedResult', { id: m.id, result: result }); })
      .catch(function (err) {
        send('datafeedError', { id: m.id, reason: String((err && err.message) || err) });
      });
  });
</script>

// vp-chart.js — yours. Bundle it, review it, change it.
// Nothing is fetched from us at runtime; the only thing that loads from our
// origin is the iframe document itself, which runs under OUR policy, not yours.

export const VP_ORIGIN = 'https://view.verticalprop.com';

/** Build the frame URL. `datafeed: 'host'` is what tells the chart to ask YOU
 *  for bars — without it you get ours, which a third-party page is refused. */
export function vpChartSrc(params, origin = VP_ORIGIN) {
  const qs = new URLSearchParams({ datafeed: 'host', ...params });
  return origin + '/embed?' + qs.toString();
}

/**
 * Connect a datafeed object to a mounted VerticalProp chart frame.
 *
 * @param frame  the <iframe> element
 * @param feed   your datafeed: { onReady, resolveSymbol, getBars, subscribeBars, unsubscribeBars }
 * @param opts   { origin, onResize, onError }
 * @returns      a teardown function — CALL IT on unmount
 */
export function attachVpChart(frame, feed, opts = {}) {
  const origin = opts.origin || VP_ORIGIN;

  const send = (type, payload) => {
    // Targeted, never '*': there is exactly one window this belongs to.
    frame.contentWindow?.postMessage({ ...payload, ns: 'vp-embed', v: 1, type }, origin);
  };

  const onMessage = (ev) => {
    // PIN BOTH. Origin proves it came from our document; source proves it came
    // from THIS frame. Origin alone lets one chart answer for another the day
    // somebody puts two on a page.
    if (ev.origin !== origin) return;
    if (ev.source !== frame.contentWindow) return;

    const m = ev.data;
    if (!m || m.ns !== 'vp-embed' || m.v !== 1) return;

    if (m.type === 'ready' || m.type === 'resize') { opts.onResize?.(m.height); return; }
    if (m.type === 'error') { opts.onError?.(m.reason); return; }
    if (m.type !== 'datafeedCall') return;

    const fn = feed[m.method];
    if (typeof fn !== 'function') {
      // An optional method you did not implement is normal — searchSymbols is
      // the usual one. Answering keeps the chart from waiting on it.
      send('datafeedError', { id: m.id, reason: 'not implemented: ' + m.method });
      return;
    }

    const args = m.args.slice();
    if (m.method === 'subscribeBars') {
      // A function cannot cross the boundary, so the push callback is made
      // HERE. Its ticks are addressed to the SUBSCRIPTION id, not the call id.
      const uid = args[2];
      args.push((bar) => send('datafeedTick', { id: uid, bar }));
    }

    // Sync or async both work — the reply always goes out from a promise.
    Promise.resolve()
      .then(() => fn.apply(feed, args))
      .then((result) => send('datafeedResult', { id: m.id, result }))
      .catch((err) => send('datafeedError', { id: m.id, reason: String(err?.message ?? err) }));
  };

  window.addEventListener('message', onMessage);
  return () => window.removeEventListener('message', onMessage);
}

import { useEffect, useRef } from 'react';
import { attachVpChart, vpChartSrc } from './vp-chart';

const feed = {
  onReady: () => ({ supported_resolutions: ['1', '5', '60', '1D'] }),
  resolveSymbol: (name) => ({
    name, description: name, session: '24x7', timezone: 'Etc/UTC',
    pricescale: 100, minmov: 1, has_intraday: true,
  }),
  getBars: async (symbol, resolution, period) => {
    const r = await fetch(`/api/bars?symbol=${symbol}&res=${resolution}&to=${period.to}`);
    return r.json();          // [{ time, open, high, low, close, volume }] — time in MILLISECONDS
  },
  subscribeBars: (symbol, resolution, uid, push) => openStream(symbol, resolution, uid, push),
  unsubscribeBars: (uid) => closeStream(uid),
};

export function VerticalChart({ symbol = 'BTCUSDT', height = 480 }) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    // The teardown is not optional — without it StrictMode's double mount
    // installs two listeners and every call is answered twice.
    return attachVpChart(ref.current, feed);
  }, []);

  return (
    <iframe
      ref={ref}
      src={vpChartSrc({ symbol, interval: '60' })}
      style={{ width: '100%', height, border: 0 }}
      loading="lazy"
      title="VerticalProp chart"
    />
  );
}