Parent-owned remote data loader transport

Enterprise

Secure context required

Foxglove must run in a secure context. Serve your application over HTTPS or from localhost.

A parent-owned remote data loader transport keeps the loader's endpoint and HTTP requests in the host page instead of the embedded Foxglove iframe. Use it when the host application must resolve the endpoint or manage authentication for the loader.

Pass a remote data loader source whose transport callback resolves relative request paths against the parent-only endpoint:

import { FoxgloveViewer, type ParentFetchTransport } from "@foxglove/embed";

const dataLoaderUrl = new URL("https://data-loader.example.com");
const transport: ParentFetchTransport = async (path, init) => {
  return await fetch(new URL(path, dataLoaderUrl), init);
};

const viewer = new FoxgloveViewer({
  parent: document.getElementById("foxglove")!,
  orgSlug: undefined, // Use the current organization or select one during sign-in.
});

viewer.setDataSource({
  type: "remote-data-loader",
  manifestParams: { recording: "first-recording" },
  transport,
});

The React SDK accepts the same source:

import { FoxgloveViewer, type ParentFetchTransport } from "@foxglove/embed-react";

const dataLoaderUrl = new URL("https://data-loader.example.com");
const transport: ParentFetchTransport = async (path, init) => {
  return await fetch(new URL(path, dataLoaderUrl), init);
};

<FoxgloveViewer
  data={{
    type: "remote-data-loader",
    manifestParams: { recording: "first-recording" },
    transport,
  }}
/>;

The SDK retains the callback in the parent page and transfers a private MessagePort to the iframe. The iframe receives the manifest parameters, but not the remote data loader URL or the callback. Relative reachability, initialization, and streaming requests pass through the private channel, including their methods, headers, JSON bodies, streaming responses, cancellations, and errors.

The callback is responsible for resolving the relative request path and applying any authentication required by the remote data loader. Browser CORS and cookie policies still apply to the parent page's request.

Multiple sources

Pass multiple manifest parameter objects to merge or compare sources served by the same parent transport. Set compare: true to compare them; otherwise, they merge onto one timeline.

viewer.setDataSource({
  type: "remote-data-loader",
  manifestParams: [{ recording: "first-recording" }, { recording: "second-recording" }],
  compare: true,
  compareStart: ["0", "5"],
  transport,
});

Each parameter value can also be an array when the manifest requires a repeated key.

Scope

The parent-owned fetch transport is currently used only for remote data loader reachability checks and /v1/initialize and /v1/stream requests. It does not proxy:

• Foxglove Data Platform recording, session, or device streams
• Foxglove control-plane API requests
• recording attachments
• remote files
• URDF meshes, map tiles, or extension assets
• live WebSocket connections

Traditional remote data loader URLs remain supported. A viewer opened with ds=remote-data-loader, ds.dataLoaderUrl, and ds.manifestParams continues to contact the loader directly from the iframe.

Use parent-owned live transport for a host-owned Foxglove WebSocket connection.

If an older iframe does not advertise parent fetch support, the SDK emits an error event and does not send the parent-owned remote data loader source. Integrations that require parent-owned authentication should treat that error as an incompatible embed deployment.