@modelcontextprotocol/inspector 1.0.0 → 2.0.0-rc.1

package/server/build/mcpProxy.js

@@ -1,121 +0,0 @@
-import { SseError } from "@modelcontextprotocol/sdk/client/sse.js";
-import { StreamableHTTPError } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
-import { isJSONRPCRequest } from "@modelcontextprotocol/sdk/types.js";
-/**
- * JSON-RPC error code for failed proxy → upstream transport sends.
- *
- * JSON-RPC 2.0 reserves **-32000 .. -32099** for implementation-defined *server* errors.
- * MCP uses that band for protocol/SDK errors (see `@modelcontextprotocol/sdk` `ErrorCode`, e.g.
- * `-32000` connection closed, `-32001` request timeout, `-32042` URL elicitation; other codes in
- * the band are assigned over time — e.g. **-32002** is used for **ResourceNotFound** in parts of
- * the MCP ecosystem). We use **-32099** so this inspector-only bridge error stays clear of those
- * registered meanings; the client still keys off `error.data` shape, not the number alone.
- *
- * Keep in sync with `client/src/lib/constants.ts`; drift is caught by
- * `client/src/lib/__tests__/mcpProxyTransportErrorCode.test.ts`.
- */
-export const MCP_PROXY_TRANSPORT_ERROR_CODE = -32099;
-function onClientError(error) {
-    console.error("Error from inspector client:", error);
-}
-function onServerError(error) {
-    if (error?.cause && JSON.stringify(error.cause).includes("ECONNREFUSED")) {
-        console.error("Connection refused. Is the MCP server running?");
-    }
-    else if (error.message && error.message.includes("404")) {
-        console.error("Error accessing endpoint (HTTP 404)");
-    }
-    else {
-        console.error("Error from MCP server:", error);
-    }
-}
-/** Exported for unit tests; used by the proxy when forwarding transport failures. */
-export function serializeProxyTransportError(error, headerHolder) {
-    const data = {
-        message: error.message,
-        name: error.name,
-    };
-    if (error.cause !== undefined) {
-        data.cause =
-            error.cause instanceof Error ? error.cause.message : String(error.cause);
-    }
-    const attachHttpStatusIfValid = (code) => {
-        if (Number.isInteger(code) && code >= 100 && code <= 599) {
-            data.httpStatus = code;
-        }
-    };
-    if (error instanceof StreamableHTTPError) {
-        if (error.code !== undefined)
-            attachHttpStatusIfValid(error.code);
-    }
-    else if (error instanceof SseError) {
-        if (error.code !== undefined)
-            attachHttpStatusIfValid(error.code);
-    }
-    if (headerHolder?.lastUpstream401) {
-        const u = headerHolder.lastUpstream401;
-        data.upstream401 = {
-            wwwAuthenticate: u.wwwAuthenticate,
-            body: u.body,
-            contentType: u.contentType,
-        };
-        delete headerHolder.lastUpstream401;
-    }
-    return data;
-}
-export default function mcpProxy({ transportToClient, transportToServer, headerHolder, }) {
-    let transportToClientClosed = false;
-    let transportToServerClosed = false;
-    let reportedServerSession = false;
-    transportToClient.onmessage = (message) => {
-        transportToServer.send(message).catch((err) => {
-            const error = err instanceof Error ? err : new Error(String(err));
-            // Send error response back to client if it was a request (has id) and connection is still open
-            if (isJSONRPCRequest(message) && !transportToClientClosed) {
-                const causeStr = error.cause !== undefined
-                    ? error.cause instanceof Error
-                        ? error.cause.message
-                        : String(error.cause)
-                    : null;
-                const errorResponse = {
-                    jsonrpc: "2.0",
-                    id: message.id,
-                    error: {
-                        code: MCP_PROXY_TRANSPORT_ERROR_CODE,
-                        message: causeStr
-                            ? `${error.message} (cause: ${causeStr})`
-                            : error.message,
-                        data: serializeProxyTransportError(error, headerHolder),
-                    },
-                };
-                transportToClient.send(errorResponse).catch(onClientError);
-            }
-        });
-    };
-    transportToServer.onmessage = (message) => {
-        if (!reportedServerSession) {
-            if (transportToServer.sessionId) {
-                // Can only report for StreamableHttp
-                console.error("Proxy  <-> Server sessionId: " + transportToServer.sessionId);
-            }
-            reportedServerSession = true;
-        }
-        transportToClient.send(message).catch(onClientError);
-    };
-    transportToClient.onclose = () => {
-        if (transportToServerClosed) {
-            return;
-        }
-        transportToClientClosed = true;
-        transportToServer.close().catch(onServerError);
-    };
-    transportToServer.onclose = () => {
-        if (transportToClientClosed) {
-            return;
-        }
-        transportToServerClosed = true;
-        transportToClient.close().catch(onClientError);
-    };
-    transportToClient.onerror = onClientError;
-    transportToServer.onerror = onServerError;
-}

package/server/build/static/sandbox_proxy.html

@@ -1,197 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="color-scheme" content="light dark" />
-    <!-- CSP is set via HTTP headers by serve.ts (based on ?csp= query param).
-       The inner iframe inherits this CSP since we use document.write(). -->
-    <title>MCP-UI Proxy</title>
-    <style>
-      html,
-      body {
-        margin: 0;
-        height: 100vh;
-        width: 100vw;
-        /* Transparent background allows parent page to show through */
-        background-color: transparent;
-      }
-      body {
-        display: flex;
-        flex-direction: column;
-      }
-      * {
-        box-sizing: border-box;
-      }
-      iframe {
-        background-color: transparent;
-        border: 0px none transparent;
-        padding: 0px;
-        overflow: hidden;
-        flex-grow: 1;
-        /* Inherit color scheme from parent for consistent transparency */
-        color-scheme: inherit;
-      }
-    </style>
-  </head>
-  <body>
-    <script>
-      function buildAllowAttribute(permissions) {
-        if (!permissions) return "";
-
-        const allowList = [];
-        if (permissions["camera"]) allowList.push("camera");
-        if (permissions["microphone"]) allowList.push("microphone");
-        if (permissions["geolocation"]) allowList.push("geolocation");
-        if (permissions["clipboardWrite"]) allowList.push("clipboard-write");
-
-        return allowList.join("; ");
-      }
-
-      const ALLOWED_REFERRER_PATTERN =
-        /^http:\/\/(localhost|127\.0\.0\.1)(:|\/|$)/;
-
-      if (window.self === window.top) {
-        throw new Error("This file is only to be used in an iframe sandbox.");
-      }
-
-      if (!document.referrer) {
-        throw new Error("No referrer, cannot validate embedding site.");
-      }
-
-      if (!document.referrer.match(ALLOWED_REFERRER_PATTERN)) {
-        throw new Error(
-          `Embedding domain not allowed in referrer ${document.referrer}. (Consider updating the validation logic to allow your domain.)`,
-        );
-      }
-
-      // Extract the expected host origin from the referrer for origin validation.
-      // This is the origin we expect all parent messages to come from.
-      const EXPECTED_HOST_ORIGIN = new URL(document.referrer).origin;
-
-      const OWN_ORIGIN = new URL(window.location.href).origin;
-
-      // Security self-test: verify iframe isolation is working correctly.
-      // This MUST throw a SecurityError -- if `window.top` is accessible, the sandbox
-      // configuration is dangerously broken and untrusted content could escape.
-      try {
-        window.top?.alert(
-          "If you see this, the sandbox is not setup securely.",
-        );
-        throw "FAIL";
-      } catch (e) {
-        if (e === "FAIL") {
-          throw new Error("The sandbox is not setup securely.");
-        }
-
-        // Expected: SecurityError confirms proper sandboxing.
-      }
-
-      // Double-iframe sandbox architecture: THIS file is the outer sandbox proxy
-      // iframe on a separate origin. It creates an inner iframe for untrusted HTML
-      // content. Per the specification, the Host and the Sandbox MUST have different
-      // origins.
-      const inner = document.createElement("iframe");
-      inner.style = "width:100%; height:100%; border:none;";
-      inner.setAttribute(
-        "sandbox",
-        "allow-scripts allow-same-origin allow-forms",
-      );
-      // Note: allow attribute is set later when receiving sandbox-resource-ready notification
-      // based on the permissions requested by the app
-      document.body.appendChild(inner);
-
-      const RESOURCE_READY_NOTIFICATION =
-        "ui/notifications/sandbox-resource-ready";
-      const PROXY_READY_NOTIFICATION = "ui/notifications/sandbox-proxy-ready";
-
-      // Message relay: This Sandbox (outer iframe) acts as a bidirectional bridge,
-      // forwarding messages between:
-      //
-      //   Host (parent window) ↔ Sandbox (outer frame) ↔ View (inner iframe)
-      //
-      // Reason: the parent window and inner iframe have different origins and can't
-      // communicate directly, so the outer iframe forwards messages in both
-      // directions to connect them.
-      //
-      // Special case: The "ui/notifications/sandbox-proxy-ready" message is
-      // intercepted here (not relayed) because the Sandbox uses it to configure and
-      // load the inner iframe with the view HTML content.
-      //
-      // Security: CSP is enforced via HTTP headers on sandbox.html (set by serve.ts
-      // based on ?csp= query param). This is tamper-proof unlike meta tags.
-
-      window.addEventListener("message", async (event) => {
-        if (event.source === window.parent) {
-          // Validate that messages from parent come from the expected host origin.
-          // This prevents malicious pages from sending messages to this sandbox.
-          if (event.origin !== EXPECTED_HOST_ORIGIN) {
-            console.error(
-              "[Sandbox] Rejecting message from unexpected origin:",
-              event.origin,
-              "expected:",
-              EXPECTED_HOST_ORIGIN,
-            );
-            return;
-          }
-
-          if (event.data && event.data.method === RESOURCE_READY_NOTIFICATION) {
-            const { html, sandbox, permissions } = event.data.params;
-            if (typeof sandbox === "string") {
-              inner.setAttribute("sandbox", sandbox);
-            }
-            // Set Permission Policy allow attribute if permissions are requested
-            const allowAttribute = buildAllowAttribute(permissions);
-            if (allowAttribute) {
-              console.log("[Sandbox] Setting allow attribute:", allowAttribute);
-              inner.setAttribute("allow", allowAttribute);
-            }
-            if (typeof html === "string") {
-              // Use document.write instead of srcdoc (which the CesiumJS Map won't work with)
-              const doc =
-                inner.contentDocument || inner.contentWindow?.document;
-              if (doc) {
-                doc.open();
-                doc.write(html);
-                doc.close();
-              } else {
-                // Fallback to srcdoc if document is not accessible
-                console.warn(
-                  "[Sandbox] document.write not available, falling back to srcdoc",
-                );
-                inner.srcdoc = html;
-              }
-            }
-          } else {
-            if (inner && inner.contentWindow) {
-              inner.contentWindow.postMessage(event.data, "*");
-            }
-          }
-        } else if (event.source === inner.contentWindow) {
-          if (event.origin !== OWN_ORIGIN) {
-            console.error(
-              "[Sandbox] Rejecting message from inner iframe with unexpected origin:",
-              event.origin,
-              "expected:",
-              OWN_ORIGIN,
-            );
-            return;
-          }
-          // Relay messages from inner frame to parent window.
-          // Use specific origin instead of "*" to prevent message interception.
-          window.parent.postMessage(event.data, EXPECTED_HOST_ORIGIN);
-        }
-      });
-
-      // Notify the Host that the Sandbox is ready to receive view HTML.
-      // Use specific origin instead of "*" to ensure only the expected host receives this.
-      window.parent.postMessage(
-        {
-          jsonrpc: "2.0",
-          method: PROXY_READY_NOTIFICATION,
-          params: {},
-        },
-        EXPECTED_HOST_ORIGIN,
-      );
-    </script>
-  </body>
-</html>

package/server/static/sandbox_proxy.html

@@ -1,197 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="color-scheme" content="light dark" />
-    <!-- CSP is set via HTTP headers by serve.ts (based on ?csp= query param).
-       The inner iframe inherits this CSP since we use document.write(). -->
-    <title>MCP-UI Proxy</title>
-    <style>
-      html,
-      body {
-        margin: 0;
-        height: 100vh;
-        width: 100vw;
-        /* Transparent background allows parent page to show through */
-        background-color: transparent;
-      }
-      body {
-        display: flex;
-        flex-direction: column;
-      }
-      * {
-        box-sizing: border-box;
-      }
-      iframe {
-        background-color: transparent;
-        border: 0px none transparent;
-        padding: 0px;
-        overflow: hidden;
-        flex-grow: 1;
-        /* Inherit color scheme from parent for consistent transparency */
-        color-scheme: inherit;
-      }
-    </style>
-  </head>
-  <body>
-    <script>
-      function buildAllowAttribute(permissions) {
-        if (!permissions) return "";
-
-        const allowList = [];
-        if (permissions["camera"]) allowList.push("camera");
-        if (permissions["microphone"]) allowList.push("microphone");
-        if (permissions["geolocation"]) allowList.push("geolocation");
-        if (permissions["clipboardWrite"]) allowList.push("clipboard-write");
-
-        return allowList.join("; ");
-      }
-
-      const ALLOWED_REFERRER_PATTERN =
-        /^http:\/\/(localhost|127\.0\.0\.1)(:|\/|$)/;
-
-      if (window.self === window.top) {
-        throw new Error("This file is only to be used in an iframe sandbox.");
-      }
-
-      if (!document.referrer) {
-        throw new Error("No referrer, cannot validate embedding site.");
-      }
-
-      if (!document.referrer.match(ALLOWED_REFERRER_PATTERN)) {
-        throw new Error(
-          `Embedding domain not allowed in referrer ${document.referrer}. (Consider updating the validation logic to allow your domain.)`,
-        );
-      }
-
-      // Extract the expected host origin from the referrer for origin validation.
-      // This is the origin we expect all parent messages to come from.
-      const EXPECTED_HOST_ORIGIN = new URL(document.referrer).origin;
-
-      const OWN_ORIGIN = new URL(window.location.href).origin;
-
-      // Security self-test: verify iframe isolation is working correctly.
-      // This MUST throw a SecurityError -- if `window.top` is accessible, the sandbox
-      // configuration is dangerously broken and untrusted content could escape.
-      try {
-        window.top?.alert(
-          "If you see this, the sandbox is not setup securely.",
-        );
-        throw "FAIL";
-      } catch (e) {
-        if (e === "FAIL") {
-          throw new Error("The sandbox is not setup securely.");
-        }
-
-        // Expected: SecurityError confirms proper sandboxing.
-      }
-
-      // Double-iframe sandbox architecture: THIS file is the outer sandbox proxy
-      // iframe on a separate origin. It creates an inner iframe for untrusted HTML
-      // content. Per the specification, the Host and the Sandbox MUST have different
-      // origins.
-      const inner = document.createElement("iframe");
-      inner.style = "width:100%; height:100%; border:none;";
-      inner.setAttribute(
-        "sandbox",
-        "allow-scripts allow-same-origin allow-forms",
-      );
-      // Note: allow attribute is set later when receiving sandbox-resource-ready notification
-      // based on the permissions requested by the app
-      document.body.appendChild(inner);
-
-      const RESOURCE_READY_NOTIFICATION =
-        "ui/notifications/sandbox-resource-ready";
-      const PROXY_READY_NOTIFICATION = "ui/notifications/sandbox-proxy-ready";
-
-      // Message relay: This Sandbox (outer iframe) acts as a bidirectional bridge,
-      // forwarding messages between:
-      //
-      //   Host (parent window) ↔ Sandbox (outer frame) ↔ View (inner iframe)
-      //
-      // Reason: the parent window and inner iframe have different origins and can't
-      // communicate directly, so the outer iframe forwards messages in both
-      // directions to connect them.
-      //
-      // Special case: The "ui/notifications/sandbox-proxy-ready" message is
-      // intercepted here (not relayed) because the Sandbox uses it to configure and
-      // load the inner iframe with the view HTML content.
-      //
-      // Security: CSP is enforced via HTTP headers on sandbox.html (set by serve.ts
-      // based on ?csp= query param). This is tamper-proof unlike meta tags.
-
-      window.addEventListener("message", async (event) => {
-        if (event.source === window.parent) {
-          // Validate that messages from parent come from the expected host origin.
-          // This prevents malicious pages from sending messages to this sandbox.
-          if (event.origin !== EXPECTED_HOST_ORIGIN) {
-            console.error(
-              "[Sandbox] Rejecting message from unexpected origin:",
-              event.origin,
-              "expected:",
-              EXPECTED_HOST_ORIGIN,
-            );
-            return;
-          }
-
-          if (event.data && event.data.method === RESOURCE_READY_NOTIFICATION) {
-            const { html, sandbox, permissions } = event.data.params;
-            if (typeof sandbox === "string") {
-              inner.setAttribute("sandbox", sandbox);
-            }
-            // Set Permission Policy allow attribute if permissions are requested
-            const allowAttribute = buildAllowAttribute(permissions);
-            if (allowAttribute) {
-              console.log("[Sandbox] Setting allow attribute:", allowAttribute);
-              inner.setAttribute("allow", allowAttribute);
-            }
-            if (typeof html === "string") {
-              // Use document.write instead of srcdoc (which the CesiumJS Map won't work with)
-              const doc =
-                inner.contentDocument || inner.contentWindow?.document;
-              if (doc) {
-                doc.open();
-                doc.write(html);
-                doc.close();
-              } else {
-                // Fallback to srcdoc if document is not accessible
-                console.warn(
-                  "[Sandbox] document.write not available, falling back to srcdoc",
-                );
-                inner.srcdoc = html;
-              }
-            }
-          } else {
-            if (inner && inner.contentWindow) {
-              inner.contentWindow.postMessage(event.data, "*");
-            }
-          }
-        } else if (event.source === inner.contentWindow) {
-          if (event.origin !== OWN_ORIGIN) {
-            console.error(
-              "[Sandbox] Rejecting message from inner iframe with unexpected origin:",
-              event.origin,
-              "expected:",
-              OWN_ORIGIN,
-            );
-            return;
-          }
-          // Relay messages from inner frame to parent window.
-          // Use specific origin instead of "*" to prevent message interception.
-          window.parent.postMessage(event.data, EXPECTED_HOST_ORIGIN);
-        }
-      });
-
-      // Notify the Host that the Sandbox is ready to receive view HTML.
-      // Use specific origin instead of "*" to ensure only the expected host receives this.
-      window.parent.postMessage(
-        {
-          jsonrpc: "2.0",
-          method: PROXY_READY_NOTIFICATION,
-          params: {},
-        },
-        EXPECTED_HOST_ORIGIN,
-      );
-    </script>
-  </body>
-</html>