npm - @modelcontextprotocol/inspector - Versions diffs - 0.18.0 → 0.20.0 - Mend

@modelcontextprotocol/inspector 0.18.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/LICENSE +196 -1
package/README.md +6 -1
package/client/bin/start.js +14 -4
package/client/dist/assets/{OAuthCallback-CXY8DEIM.js → OAuthCallback-CcWP_GMC.js} +1 -1
package/client/dist/assets/{OAuthDebugCallback-zr6INHin.js → OAuthDebugCallback-D0p8RB9e.js} +1 -1
package/client/dist/assets/{index-Dw52pmVD.js → index-B8iPFz0O.js} +20169 -6820
package/client/dist/assets/{index-DoQUGvvr.css → index-DdtP67NK.css} +59 -0
package/client/dist/index.html +2 -2
package/package.json +7 -7
package/server/build/index.js +22 -0
package/server/build/mcpProxy.js +3 -1
package/server/build/static/sandbox_proxy.html +197 -0

package/client/dist/assets/{index-DoQUGvvr.css → index-DdtP67NK.css} RENAMED Viewed

@@ -863,10 +863,17 @@ video {
 .row-auto {
   grid-row: auto;
 }
+.m-0 {
+  margin: 0px;
+}
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
 }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -953,6 +960,9 @@ video {
 .h-10 {
   height: 2.5rem;
 }
+.h-12 {
+  height: 3rem;
+}
 .h-2 {
   height: 0.5rem;
 }
@@ -980,6 +990,9 @@ video {
 .h-96 {
   height: 24rem;
 }
+.h-\[600px\] {
+  height: 600px;
+}
 .h-\[var\(--radix-select-trigger-height\)\] {
   height: var(--radix-select-trigger-height);
 }
@@ -1016,6 +1029,12 @@ video {
 .min-h-\[60px\] {
   min-height: 60px;
 }
+.w-1\/3 {
+  width: 33.333333%;
+}
+.w-12 {
+  width: 3rem;
+}
 .w-2 {
   width: 0.5rem;
 }
@@ -1061,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%;
 }
@@ -1100,6 +1122,15 @@ video {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
 @keyframes spin {
   to {
@@ -1126,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));
 }
@@ -1375,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));
 }
@@ -1465,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;
@@ -1534,6 +1575,9 @@ video {
 .font-semibold {
   font-weight: 600;
 }
+.capitalize {
+  text-transform: capitalize;
+}
 .italic {
   font-style: italic;
 }
@@ -1667,6 +1711,14 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.text-yellow-500 {
+  --tw-text-opacity: 1;
+  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
+}
+.text-yellow-600 {
+  --tw-text-opacity: 1;
+  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
+}
 .text-yellow-800 {
   --tw-text-opacity: 1;
   color: rgb(133 77 14 / var(--tw-text-opacity, 1));
@@ -1680,6 +1732,9 @@ video {
 .opacity-100 {
   opacity: 1;
 }
+.opacity-20 {
+  opacity: 0.2;
+}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -2519,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 CHANGED Viewed

@@ -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-Dw52pmVD.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DoQUGvvr.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 CHANGED Viewed

@@ -1,9 +1,9 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Model Context Protocol inspector",
-  "license": "MIT",
-  "author": "Anthropic, PBC (https://anthropic.com)",
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "Model Context Protocol a Series of LF Projects, LLC.",
   "homepage": "https://modelcontextprotocol.io",
   "bugs": "https://github.com/modelcontextprotocol/inspector/issues",
   "type": "module",
@@ -47,10 +47,10 @@
     "check-version": "node scripts/check-version-consistency.js"
   },
   "dependencies": {
-    "@modelcontextprotocol/inspector-cli": "^0.18.0",
-    "@modelcontextprotocol/inspector-client": "^0.18.0",
-    "@modelcontextprotocol/inspector-server": "^0.18.0",
-    "@modelcontextprotocol/sdk": "^1.24.3",
+    "@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",
     "open": "^10.2.0",

package/server/build/index.js CHANGED Viewed

@@ -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/mcpProxy.js CHANGED Viewed

@@ -26,7 +26,9 @@ export default function mcpProxy({ transportToClient, transportToServer, }) {
                     id: message.id,
                     error: {
                         code: -32001,
-                        message: error.message,
+                        message: error.cause
+                            ? `${error.message} (cause: ${error.cause})`
+                            : error.message,
                         data: error,
                     },
                 };

package/server/build/static/sandbox_proxy.html ADDED Viewed

@@ -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>