@vercel/microfrontends 2.3.6 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vercel/microfrontends
 
+## 2.4.0
+
+### Minor Changes
+
+- 7a743be: Add an optional configured origin to the local development proxy via `--origin <origin>` or the `MFE_LOCAL_PROXY_ORIGIN` environment variable (for example `https://web.localhost`). When set, the proxy forwards that origin to your applications as `x-forwarded-proto`/`x-forwarded-host`/`x-forwarded-port` and rewrites fallback redirects onto it, so apps served behind a custom local hostname or a TLS terminator see the URL the browser actually used. When no origin is configured, inbound forwarded headers pass through unchanged.
+
 ## 2.3.6
 
 ### Patch Changes

package/README.md

@@ -21,6 +21,12 @@ Follow the [quickstart](https://vercel.com/docs/microfrontends/quickstart) docum
 
 You can use the frameworks and microfrontends frameworks of your choice. `@vercel/microfrontends` supports Next.js, SvelteKit, React Router, Vite, and React.
 
+## Local proxy origin
+
+The local development proxy can preserve the origin used to reach it. Set it explicitly with `microfrontends proxy --origin <origin>` or `MFE_LOCAL_PROXY_ORIGIN`.
+
+The origin must be an absolute `http` or `https` origin, such as `https://myapp.localhost`, with no path, query string, hash, username, or password. The proxy uses this origin anywhere it needs to preserve the URL clients used to reach the proxy.
+
 ## Need help?
 
 Reach out for help in the [Vercel Community](https://community.vercel.com).

package/dist/bin/cli.cjs

@@ -30,7 +30,7 @@ var import_commander = require("commander");
 // package.json
 var package_default = {
   name: "@vercel/microfrontends",
-  version: "2.3.6",
+  version: "2.4.0",
   private: false,
   description: "Defines configuration and utilities for microfrontends development",
   keywords: [
@@ -2371,19 +2371,56 @@ var MFE_LOCAL_PROXY_HEADER = "x-vercel-mfe-local-proxy-origin";
 var MFE_FLAG_VALUE = "vercel-mfe-flag-value";
 var MFE_FLAG_VALUE_HEADER = `x-${MFE_FLAG_VALUE}`;
 var VERCEL_TOOLBAR_PROXY_BASE_PATH = "/.well-known/vercel-toolbar";
+var ORIGIN_ENV = "MFE_LOCAL_PROXY_ORIGIN";
 function normalizeRepeatedSlashesInPath(url) {
   const searchStart = url.indexOf("?");
   const path7 = searchStart === -1 ? url : url.slice(0, searchStart);
   const search = searchStart === -1 ? "" : url.slice(searchStart);
   return `${path7.replaceAll(/\/[\\/]+/g, "/")}${search}`;
 }
-function rewriteRedirectLocation(locationHeader, localhost) {
-  const redirectUrl = new import_node_url.URL(locationHeader, localhost);
-  const localUrl = new import_node_url.URL(localhost);
-  redirectUrl.protocol = localUrl.protocol;
-  redirectUrl.host = localUrl.host;
+function rewriteRedirectLocation(locationHeader, origin) {
+  const redirectUrl = new import_node_url.URL(locationHeader, origin);
+  const originUrl = new import_node_url.URL(origin);
+  redirectUrl.protocol = originUrl.protocol;
+  redirectUrl.host = originUrl.host;
   return redirectUrl.toString();
 }
+function parseConfiguredOrigin(origin) {
+  if (!origin) {
+    return void 0;
+  }
+  const parsed = parseBrowserOrigin(origin);
+  if (!parsed) {
+    throw new Error(
+      `Invalid origin "${origin}". Expected an absolute http(s) origin with no path, search, hash, username, or password.`
+    );
+  }
+  return parsed.origin;
+}
+function parseBrowserOrigin(origin) {
+  try {
+    const url = new import_node_url.URL(origin);
+    const hasOnlyOrigin = url.protocol === "http:" || url.protocol === "https:" ? url.username === "" && url.password === "" && url.pathname === "/" && url.search === "" && url.hash === "" : false;
+    return hasOnlyOrigin ? url : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function forwardedHeadersForOrigin(origin) {
+  const url = new import_node_url.URL(origin);
+  return {
+    "x-forwarded-proto": url.protocol.slice(0, -1),
+    "x-forwarded-host": url.host,
+    "x-forwarded-port": url.port || (url.protocol === "https:" ? "443" : "80")
+  };
+}
+function stripLocalProxyHeader(headers) {
+  return Object.fromEntries(
+    Object.entries(headers).filter(
+      ([key]) => key.toLowerCase() !== MFE_LOCAL_PROXY_HEADER
+    )
+  );
+}
 var ProxyRequestRouter = class {
   constructor(config, {
     localApps
@@ -2750,11 +2787,13 @@ var LocalProxy = class {
   constructor(config, {
     localApps,
     proxyPort,
-    configFilePath
+    configFilePath,
+    origin
   }) {
     this.router = new ProxyRequestRouter(config, { localApps });
     this.proxyPort = proxyPort ?? this.router.config.getLocalProxyPort();
     this.configFilePath = configFilePath;
+    this.configuredOrigin = parseConfiguredOrigin(origin) ?? parseConfiguredOrigin(process.env[ORIGIN_ENV]);
     this.proxy = import_http_proxy.default.createProxyServer({ secure: true });
     this.proxy.on("error", (err, req, res) => {
       if (res instanceof http.ServerResponse) {
@@ -2780,7 +2819,8 @@ var LocalProxy = class {
   }
   static fromFile(filePath, {
     localApps,
-    proxyPort
+    proxyPort,
+    origin
   }) {
     let microfrontends;
     if (filePath) {
@@ -2794,6 +2834,7 @@ var LocalProxy = class {
     return new LocalProxy(microfrontends.config, {
       localApps,
       proxyPort,
+      origin,
       configFilePath: filePath
     });
   }
@@ -2826,7 +2867,7 @@ var LocalProxy = class {
     httpServer.on("upgrade", (req, socket, head) => {
       const target = this.router.getTarget(req);
       try {
-        const headers = {};
+        const headers = this.configuredOrigin ? forwardedHeadersForOrigin(this.getOrigin()) : {};
         headers[MFE_LOCAL_PROXY_HEADER] = "1";
         this.proxy.ws(req, socket, head, {
           target: target.url,
@@ -2870,6 +2911,8 @@ var LocalProxy = class {
     }
     const target = this.router.getTarget(req);
     const { req: strippedReq, mfeFlagValue } = removeMfeFlagQuery(req);
+    const origin = this.getOrigin();
+    const forwardedHeaders = this.configuredOrigin ? forwardedHeadersForOrigin(this.configuredOrigin) : {};
     if (target.protocol === "https") {
       const { hostname, port, path: path7 } = target;
       const app = this.router.config.getApplication(target.application);
@@ -2880,13 +2923,15 @@ var LocalProxy = class {
       const overrideCookieName = getAppEnvOverrideCookieName(
         target.application
       );
+      const fallbackHeaders = stripLocalProxyHeader(req.headers);
       const requestOptions = {
         hostname,
         path: path7,
         method: req.method,
         headers: {
-          ...req.headers,
+          ...fallbackHeaders,
           host: hostname,
+          ...forwardedHeaders,
           cookie: Object.entries(cookies).reduce((acc, [name, value]) => {
             if (value && // strip the override cookie if present, as this causes an auth redirect. The
             // override is handled by the local proxy.
@@ -2900,7 +2945,6 @@ var LocalProxy = class {
         },
         port
       };
-      const localhost = `http://localhost:${this.proxyPort}`;
       const proxyReq = https.request(requestOptions, (realRes) => {
         if (realRes.statusCode === 401 && realRes.headers["set-cookie"]?.find(
           (cookie) => cookie.startsWith("_vercel_sso_nonce=")
@@ -2922,7 +2966,7 @@ var LocalProxy = class {
           if (locationHeader) {
             realRes.headers.location = rewriteRedirectLocation(
               locationHeader,
-              localhost
+              origin
             );
           }
         }
@@ -2957,7 +3001,7 @@ var LocalProxy = class {
         proxyReq.destroy();
       });
     } else {
-      const headers = {};
+      const headers = { ...forwardedHeaders };
       headers[MFE_LOCAL_PROXY_HEADER] = "1";
       if (mfeFlagValue !== void 0) {
         headers[MFE_FLAG_VALUE_HEADER] = mfeFlagValue.toString();
@@ -2968,6 +3012,9 @@ var LocalProxy = class {
       });
     }
   }
+  getOrigin() {
+    return this.configuredOrigin ?? `http://localhost:${this.proxyPort}`;
+  }
   // Handles requests that return data from the local proxy itself.
   // Returns true if the request was handled, false otherwise.
   handleProxyInfoRequest(path7, res) {
@@ -3026,6 +3073,9 @@ var LocalProxy = class {
     logger.info(`
 \u25B2 Microfrontends Proxy (${package_default.version}) Started`);
     logger.info(`  - Proxy URL: http://localhost:${this.proxyPort}`);
+    if (this.configuredOrigin) {
+      logger.info(`  - Browser origin: ${this.configuredOrigin}`);
+    }
     if (this.configFilePath) {
       logger.info(`  - Config: ${this.configFilePath}`);
     }
@@ -3188,7 +3238,7 @@ function main() {
       );
     }
     return parsedValue;
-  }).action((filePath, options) => {
+  }).option("--origin <origin>", "Origin browsers use to reach the proxy").action((filePath, options) => {
     if (options.names && options.localApps.length) {
       throw new Error(
         "Both --names and --local-apps are set. --names is deprecated and has been replaced with --local-apps, which functions exactly the same. Please only set --local-apps."
@@ -3196,7 +3246,8 @@ function main() {
     }
     const localProxy = LocalProxy.fromFile(filePath, {
       localApps: options.names ?? options.localApps,
-      proxyPort: options.port
+      proxyPort: options.port,
+      origin: options.origin
     });
     localProxy.startServer();
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/microfrontends",
-  "version": "2.3.6",
+  "version": "2.4.0",
   "private": false,
   "description": "Defines configuration and utilities for microfrontends development",
   "keywords": [