|
| 1 | +#!/usr/bin/env npx tsx |
| 2 | +/** |
| 3 | + * HTTP servers for the MCP UI example: |
| 4 | + * - Host server (port 8080): serves host HTML files (React and Vanilla examples) |
| 5 | + * - Sandbox server (port 8081): serves sandbox.html with permissive CSP |
| 6 | + * |
| 7 | + * Running on separate ports ensures proper origin isolation for security. |
| 8 | + */ |
| 9 | + |
| 10 | +import express from "express"; |
| 11 | +import cors from "cors"; |
| 12 | +import { fileURLToPath } from "url"; |
| 13 | +import { dirname, join } from "path"; |
| 14 | + |
| 15 | +const __filename = fileURLToPath(import.meta.url); |
| 16 | +const __dirname = dirname(__filename); |
| 17 | + |
| 18 | +const HOST_PORT = parseInt(process.env.HOST_PORT || "8080", 10); |
| 19 | +const SANDBOX_PORT = parseInt(process.env.SANDBOX_PORT || "8081", 10); |
| 20 | +const DIRECTORY = join(__dirname, "dist"); |
| 21 | + |
| 22 | +// ============ Host Server (port 8080) ============ |
| 23 | +const hostApp = express(); |
| 24 | +hostApp.use(cors()); |
| 25 | + |
| 26 | +// Exclude sandbox.html from host server |
| 27 | +hostApp.use((req, res, next) => { |
| 28 | + if (req.path === "/sandbox.html") { |
| 29 | + res.status(404).send("Sandbox is served on a different port"); |
| 30 | + return; |
| 31 | + } |
| 32 | + next(); |
| 33 | +}); |
| 34 | + |
| 35 | +hostApp.use(express.static(DIRECTORY)); |
| 36 | + |
| 37 | +hostApp.get("/", (_req, res) => { |
| 38 | + res.redirect("/index.html"); |
| 39 | +}); |
| 40 | + |
| 41 | +// ============ Sandbox Server (port 8081) ============ |
| 42 | +const sandboxApp = express(); |
| 43 | +sandboxApp.use(cors()); |
| 44 | + |
| 45 | +// Permissive CSP for sandbox content |
| 46 | +sandboxApp.use((_req, res, next) => { |
| 47 | + const csp = [ |
| 48 | + "default-src 'self'", |
| 49 | + "img-src * data: blob: 'unsafe-inline'", |
| 50 | + "style-src * blob: data: 'unsafe-inline'", |
| 51 | + "script-src * blob: data: 'unsafe-inline' 'unsafe-eval'", |
| 52 | + "connect-src *", |
| 53 | + "font-src * blob: data:", |
| 54 | + "media-src * blob: data:", |
| 55 | + "frame-src * blob: data:", |
| 56 | + ].join("; "); |
| 57 | + res.setHeader("Content-Security-Policy", csp); |
| 58 | + res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); |
| 59 | + res.setHeader("Pragma", "no-cache"); |
| 60 | + res.setHeader("Expires", "0"); |
| 61 | + next(); |
| 62 | +}); |
| 63 | + |
| 64 | +sandboxApp.get(["/", "/sandbox.html"], (_req, res) => { |
| 65 | + res.sendFile(join(DIRECTORY, "sandbox.html")); |
| 66 | +}); |
| 67 | + |
| 68 | +sandboxApp.use((_req, res) => { |
| 69 | + res.status(404).send("Only sandbox.html is served on this port"); |
| 70 | +}); |
| 71 | + |
| 72 | +// ============ Start both servers ============ |
| 73 | +hostApp.listen(HOST_PORT, () => { |
| 74 | + console.log(`Host server: http://localhost:${HOST_PORT}`); |
| 75 | +}); |
| 76 | + |
| 77 | +sandboxApp.listen(SANDBOX_PORT, () => { |
| 78 | + console.log(`Sandbox server: http://localhost:${SANDBOX_PORT}`); |
| 79 | + console.log("\nPress Ctrl+C to stop\n"); |
| 80 | +}); |
0 commit comments