@modelcontextprotocol/inspector 0.19.0 → 0.20.0

package/client/dist/assets/{index-6PUMPh30.css → index-DdtP67NK.css}

@@ -990,6 +990,9 @@ video {
 .h-96 {
   height: 24rem;
 }
+.h-\[600px\] {
+  height: 600px;
+}
 .h-\[var\(--radix-select-trigger-height\)\] {
   height: var(--radix-select-trigger-height);
 }
@@ -1077,6 +1080,9 @@ video {
 .min-w-\[var\(--radix-select-trigger-width\)\] {
   min-width: var(--radix-select-trigger-width);
 }
+.max-w-\[200px\] {
+  max-width: 200px;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -1151,6 +1157,9 @@ video {
 .resize-none {
   resize: none;
 }
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1400,6 +1409,9 @@ video {
 .bg-muted {
   background-color: hsl(var(--muted));
 }
+.bg-muted\/30 {
+  background-color: hsl(var(--muted) / 0.3);
+}
 .bg-popover {
   background-color: hsl(var(--popover));
 }
@@ -1490,6 +1502,10 @@ video {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -2558,6 +2574,10 @@ h1 {
   .md\:max-w-\[420px\] {
     max-width: 420px;
   }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .\[\&\+div\]\:text-xs+div {

package/client/dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/mcp.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MCP Inspector</title>
-    <script type="module" crossorigin src="/assets/index-3HVc23AL.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-6PUMPh30.css">
+    <script type="module" crossorigin src="/assets/index-B8iPFz0O.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DdtP67NK.css">
   </head>
   <body>
     <div id="root" class="w-full"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Model Context Protocol inspector",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Model Context Protocol a Series of LF Projects, LLC.",
@@ -47,9 +47,9 @@
     "check-version": "node scripts/check-version-consistency.js"
   },
   "dependencies": {
-    "@modelcontextprotocol/inspector-cli": "^0.19.0",
-    "@modelcontextprotocol/inspector-client": "^0.19.0",
-    "@modelcontextprotocol/inspector-server": "^0.19.0",
+    "@modelcontextprotocol/inspector-cli": "^0.20.0",
+    "@modelcontextprotocol/inspector-client": "^0.20.0",
+    "@modelcontextprotocol/inspector-server": "^0.20.0",
     "@modelcontextprotocol/sdk": "^1.25.2",
     "concurrently": "^9.2.0",
     "node-fetch": "^3.3.2",

package/server/build/index.js

@@ -12,10 +12,18 @@ import { StreamableHTTPClientTransport, StreamableHTTPError, } from "@modelconte
 import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import express from "express";
+import rateLimit from "express-rate-limit";
 import { findActualExecutable } from "spawn-rx";
 import mcpProxy from "./mcpProxy.js";
 import { randomUUID, randomBytes, timingSafeEqual } from "node:crypto";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+import { readFileSync } from "fs";
 const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
+const sandboxRateLimiter = rateLimit({
+    windowMs: 15 * 60 * 1000, // 15 minutes
+    max: 100, // limit each IP to 100 /sandbox requests per windowMs
+});
 const defaultEnvironment = {
     ...getDefaultEnvironment(),
     ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
@@ -625,6 +633,20 @@ app.get("/config", originValidationMiddleware, authMiddleware, (req, res) => {
         res.status(500).json(error);
     }
 });
+app.get("/sandbox", sandboxRateLimiter, (req, res) => {
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+    const filePath = join(__dirname, "..", "static", "sandbox_proxy.html");
+    let sandboxHtml;
+    try {
+        sandboxHtml = readFileSync(filePath, "utf-8");
+    }
+    catch (e) {
+        sandboxHtml = "MCP Apps sandbox not loaded: " + e;
+    }
+    res.set("Cache-Control", "no-cache, no-store, max-age=0");
+    res.send(sandboxHtml);
+});
 const PORT = parseInt(process.env.SERVER_PORT || DEFAULT_MCP_PROXY_LISTEN_PORT, 10);
 const HOST = process.env.HOST || "localhost";
 const server = app.listen(PORT, HOST);

package/server/build/static/sandbox_proxy.html

@@ -0,0 +1,197 @@
+<!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>