remote-components 0.1.2 → 0.2.1

package/dist/{next → host}/proxy.js

@@ -1,87 +1,7 @@
-// src/next/proxy/withRemoteComponents.ts
+// src/host/proxy/index.ts
 import { NextResponse } from "next/server";
 
-// src/shared/remote/proxy.ts
-function getHeader(headers, name) {
-  if (headers instanceof Headers) {
-    return headers.get(name) ?? void 0;
-  }
-  const value = headers[name];
-  return Array.isArray(value) ? value[0] : value;
-}
-function getCorsHeaders(options, requestHeaders) {
-  if (options === false) {
-    return {};
-  }
-  const originHeader = getHeader(requestHeaders, "origin");
-  const refererHeader = getHeader(requestHeaders, "referer");
-  const origin = originHeader ?? (refererHeader ? new URL(refererHeader).origin : "*");
-  const ALLOWED_ORIGINS = (process.env.REMOTE_COMPONENTS_ALLOWED_ORIGINS || (Array.isArray(options?.origin) ? options.origin.join(",") : options?.origin) || "*").split(",").map((allowedOrigin) => allowedOrigin.trim());
-  const isAllowed = ALLOWED_ORIGINS.includes("*") || ALLOWED_ORIGINS.includes(origin);
-  const allowedHeaders = process.env.REMOTE_COMPONENTS_ALLOW_HEADERS || (Array.isArray(options?.headers) ? options.headers.map((h) => h.trim()).join(",") : options?.headers) || getHeader(requestHeaders, "access-control-request-headers");
-  const CORS_HEADERS = isAllowed ? {
-    "Access-Control-Allow-Origin": origin,
-    "Access-Control-Allow-Methods": process.env.REMOTE_COMPONENTS_ALLOW_METHODS || (Array.isArray(options?.method) ? options.method.map((m) => m.trim()).join(",") : options?.method) || "GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS",
-    ...allowedHeaders ? { "Access-Control-Allow-Headers": allowedHeaders } : {},
-    ...process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || options?.credentials ? {
-      "Access-Control-Allow-Credentials": process.env.REMOTE_COMPONENTS_ALLOW_CREDENTIALS || "true"
-    } : {},
-    "Access-Control-Max-Age": options?.maxAge || "600",
-    Vary: "Origin"
-  } : {};
-  return CORS_HEADERS;
-}
-function getSecurityHeaders() {
-  return {
-    "Content-Security-Policy": "frame-ancestors 'none'",
-    "X-Frame-Options": "DENY"
-  };
-}
-function handleCorsPreflightRequest(method, headers, options) {
-  if (method !== "OPTIONS" || options === false) {
-    return null;
-  }
-  const corsHeaders = getCorsHeaders(options, headers);
-  return new Response(void 0, {
-    status: 200,
-    headers: { ...corsHeaders, ...getSecurityHeaders() }
-  });
-}
-
-// src/next/proxy/withRemoteComponents.ts
-function withRemoteComponents(proxy, options) {
-  return async (request) => {
-    const preflightResponse = handleCorsPreflightRequest(
-      request.method,
-      request.headers,
-      options?.cors
-    );
-    if (preflightResponse) {
-      return preflightResponse;
-    }
-    const response = typeof proxy === "function" ? await proxy(request) : NextResponse.next();
-    if (options?.cors !== false) {
-      const corsHeaders = getCorsHeaders(options?.cors, request.headers);
-      Object.entries(corsHeaders).forEach(
-        ([k, v]) => response.headers.set(k, v)
-      );
-    }
-    const securityHeaders = getSecurityHeaders();
-    Object.entries(securityHeaders).forEach(
-      ([k, v]) => response.headers.set(k, v)
-    );
-    return response;
-  };
-}
-
-// src/next/proxy/withRemoteComponentsHost.ts
-import { NextResponse as NextResponse2 } from "next/server";
-
-// src/shared/constants.ts
-var RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
-var CORS_DOCS_URL = "https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components";
-
-// src/shared/ssr/fetch-headers.ts
+// src/host/server/fetch-headers.ts
 function remoteFetchHeaders() {
   return {
     /**
@@ -97,7 +17,11 @@ function remoteFetchHeaders() {
   };
 }
 
-// src/shared/host/proxy.ts
+// src/utils/constants.ts
+var RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
+var CORS_DOCS_URL = "https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components";
+
+// src/host/proxy/protected-fetch.ts
 async function handleProtectedRemoteFetchRequest(requestUrl, options) {
   const url = new URL(requestUrl, "https://fallback.com");
   if (url.pathname !== RC_PROTECTED_REMOTE_FETCH_PATHNAME) {
@@ -177,8 +101,8 @@ async function handleProtectedRemoteFetchRequest(requestUrl, options) {
   });
 }
 
-// src/next/proxy/withRemoteComponentsHost.ts
-function withRemoteComponentsHost(proxy, options) {
+// src/host/proxy/index.ts
+function withConsumeRemoteComponentsProxy(proxy, options) {
   return async (request) => {
     const protectedFetchResponse = await handleProtectedRemoteFetchRequest(
       request.url,
@@ -187,11 +111,10 @@ function withRemoteComponentsHost(proxy, options) {
     if (protectedFetchResponse) {
       return protectedFetchResponse;
     }
-    return typeof proxy === "function" ? await proxy(request) : NextResponse2.next();
+    return typeof proxy === "function" ? await proxy(request) : NextResponse.next();
   };
 }
 export {
-  withRemoteComponents,
-  withRemoteComponentsHost
+  withConsumeRemoteComponentsProxy
 };
 //# sourceMappingURL=proxy.js.map

package/dist/host/proxy.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/host/proxy/index.ts","../../src/host/server/fetch-headers.ts","../../src/utils/constants.ts","../../src/host/proxy/protected-fetch.ts"],"sourcesContent":["import { type NextRequest, NextResponse } from 'next/server';\nimport {\n  type HostProxyOptions,\n  handleProtectedRemoteFetchRequest,\n} from './protected-fetch';\n\n/**\n * Wraps a Next.js proxy handler to add remote component support:\n * handles cross-origin asset fetches via the `/rc-fetch-protected-remote` endpoint,\n * then falls through to your proxy handler (or `NextResponse.next()`) for all other requests.\n *\n * Add `/rc-fetch-protected-remote` to your proxy/middleware matchers to activate it.\n *\n * @param proxy - Optional Next.js proxy handler to run for non-remote-component requests\n * @param options - Configuration options for SSRF protection\n */\nexport function withConsumeRemoteComponentsProxy(\n  proxy?: (request: NextRequest) => NextResponse | Promise<NextResponse>,\n  options?: HostProxyOptions,\n) {\n  return async (request: NextRequest) => {\n    // Check if this is a protected remote fetch request\n    const protectedFetchResponse = await handleProtectedRemoteFetchRequest(\n      request.url,\n      options,\n    );\n\n    if (protectedFetchResponse) {\n      return protectedFetchResponse;\n    }\n\n    return typeof proxy === 'function'\n      ? await proxy(request)\n      : NextResponse.next();\n  };\n}\n\nexport type { HostProxyOptions } from './protected-fetch';\n","/**\n * The headers to use when fetching the remote component.\n */\nexport function remoteFetchHeaders() {\n  return {\n    /**\n     * Authenticates deployment protection for the remote. Needed for SSR and SSG clients.\n     * If the remote component uses vercel deployment protection, ensure the host and remote vercel\n     * projects share a common automation bypass secret, and the shared secret is used as the\n     * VERCEL_AUTOMATION_BYPASS_SECRET env var in the host project.\n     */\n    ...(typeof process === 'object' &&\n    typeof process.env === 'object' &&\n    typeof process.env.VERCEL_AUTOMATION_BYPASS_SECRET === 'string'\n      ? {\n          'x-vercel-protection-bypass':\n            process.env.VERCEL_AUTOMATION_BYPASS_SECRET,\n        }\n      : {}),\n    Accept: 'text/html',\n  };\n}\n","export const RC_PROTECTED_REMOTE_FETCH_PATHNAME = '/rc-fetch-protected-remote';\n\nexport const MISSING_SHARED_MODULES_MESSAGE =\n  'Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponentsConfig` on both host and remote?';\n\nexport const CORS_DOCS_URL =\n  'https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components';\n","/**\n * Proxy utilities for host applications that consume remote components.\n *\n * Hosts do NOT handle CORS - that's the remote's responsibility.\n * Hosts only handle protected fetch proxying.\n */\n\nimport { remoteFetchHeaders } from '#internal/host/server/fetch-headers';\nimport {\n  CORS_DOCS_URL,\n  RC_PROTECTED_REMOTE_FETCH_PATHNAME,\n} from '#internal/utils/constants';\n\nexport interface HostProxyOptions {\n  /**\n   * List of allowed URL patterns (as regex strings) that can be proxied.\n   * These patterns are combined with REMOTE_COMPONENTS_ALLOWED_PROXY_URLS env var if both are set.\n   * If neither is set, all URLs are blocked.\n   */\n  allowedProxyUrls?: string[];\n}\n\n/**\n * Handles protected remote component fetch requests by proxying them with\n * authentication headers. This is needed for accessing Vercel-protected remote\n * component deployments from client-side code.\n *\n * @param requestUrl - The full request URL\n * @param options - Host proxy configuration options\n * @returns Response object if this is a protected fetch request, or null if not\n */\nexport async function handleProtectedRemoteFetchRequest(\n  requestUrl: string,\n  options?: HostProxyOptions,\n): Promise<Response | null> {\n  const url = new URL(requestUrl, 'https://fallback.com');\n\n  if (url.pathname !== RC_PROTECTED_REMOTE_FETCH_PATHNAME) {\n    return null;\n  }\n\n  const targetUrl = url.searchParams.get('url');\n  if (!targetUrl) {\n    return new Response('Bad request, missing url query param', {\n      status: 400,\n    });\n  }\n\n  // Only allow http/https URLs to prevent SSRF via file://, data:, etc.\n  let parsedTargetUrl: URL;\n  try {\n    parsedTargetUrl = new URL(targetUrl);\n  } catch {\n    return new Response('Bad request: invalid URL', { status: 400 });\n  }\n\n  if (\n    parsedTargetUrl.protocol !== 'https:' &&\n    parsedTargetUrl.protocol !== 'http:'\n  ) {\n    return new Response('Bad request: only http/https URLs are supported', {\n      status: 400,\n    });\n  }\n\n  const envPatterns = process.env.REMOTE_COMPONENTS_ALLOWED_PROXY_URLS?.split(\n    ',',\n  ).map((p) => p.trim());\n  const optionPatterns = options?.allowedProxyUrls;\n\n  // Combine both sources if both are specified\n  const allowedPatterns = [...(optionPatterns || []), ...(envPatterns || [])];\n\n  if (allowedPatterns.length === 0) {\n    return new Response(\n      `Forbidden: no allowedProxyUrls or REMOTE_COMPONENTS_ALLOWED_PROXY_URLS configured. ` +\n        `See: ${CORS_DOCS_URL}`,\n      {\n        status: 403,\n      },\n    );\n  }\n\n  // Validate the target URL against allowed patterns to prevent SSRF.\n  // matchTarget is origin + pathname (no query string or fragment).\n  const matchTarget = parsedTargetUrl.origin + parsedTargetUrl.pathname;\n  const isUrlAllowed = allowedPatterns.some((pattern) => {\n    try {\n      const anchored = pattern.startsWith('^') ? pattern : `^${pattern}`;\n      const bounded = anchored.endsWith('$') ? anchored : `${anchored}(/|$)`;\n      const regex = new RegExp(bounded);\n      return regex.test(matchTarget);\n    } catch (error) {\n      console.error(\n        `Invalid regex pattern in allowedProxyUrls: ${pattern}`,\n        error,\n      );\n      return false;\n    }\n  });\n\n  if (!isUrlAllowed) {\n    return new Response(\n      `Forbidden: origin \"${parsedTargetUrl.origin}\" does not match any allowedProxyUrls. ` +\n        `Add a matching pattern to REMOTE_COMPONENTS_ALLOWED_PROXY_URLS or the allowedProxyUrls option. ` +\n        `See: ${CORS_DOCS_URL}`,\n      {\n        status: 403,\n      },\n    );\n  }\n\n  // Fetch the remote resource\n  const response = await fetch(targetUrl, { headers: remoteFetchHeaders() });\n\n  // Only forward safe headers — no set-cookie, CORS, or encoding headers.\n  // content-length is excluded because fetch() auto-decompresses the upstream\n  // response, making the original content-length incorrect for the decoded body.\n  const SAFE_HEADERS = [\n    'content-type',\n    'cache-control',\n    'etag',\n    'last-modified',\n  ] as const;\n  const headers = new Headers();\n  for (const name of SAFE_HEADERS) {\n    const value = response.headers.get(name);\n    if (value) {\n      headers.set(name, value);\n    }\n  }\n\n  return new Response(response.body, {\n    status: response.status,\n    statusText: response.statusText,\n    headers,\n  });\n}\n"],"mappings":"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","names":[]}