revert to old check origin code

Author: SteffenDE

README.md

@@ -112,11 +112,12 @@ Vite's `tidewave` accepts the configuration options below:
   even if your server listens on other interfaces, for security purposes. Read
   [our security guidelines for more information and when to allow remote access](https://hexdocs.pm/tidewave/security.html)
   (if you know what you are doing)
-- `allowedOrigins`: hosts or origins allowed to upload screenshots and
-  recordings from the browser. By default, Tidewave uses Vite's configured
-  server host, or `localhost` when Vite uses its implicit host. Ports are
-  ignored, so `http://localhost:5173` and `http://localhost:4000` both allow
-  `localhost`
+- `allowedOrigins`: a list of values matched against the `Origin` header to
+  prevent cross origin and DNS rebinding attacks. Each value must be a string of
+  shape `[scheme:]//host[:port]`, where both scheme and port are optional. The
+  host may also start with `*`. Example: `["//localhost:8000", "//*.test"]`. By
+  default, Tidewave allows Vite's configured server host and port, using
+  `localhost` when Vite uses its implicit host
 - `tmpDir`: temporary directory Tidewave uses for screenshots and recordings.
   Defaults to `tmp`, storing files under `tmp/tidewave/screenshots` and
   `tmp/tidewave/recordings`

src/core.ts

@@ -142,6 +142,8 @@ export function createExtractError(
 }
 
 export interface TidewaveConfig {
+  port?: number;
+  host?: string;
   clientUrl?: string;
   allowRemoteAccess?: boolean;
   allowedOrigins?: string[];

src/http/handlers/upload.ts

@@ -3,14 +3,13 @@ import { mkdir, writeFile } from 'node:fs/promises';
 import type { TidewaveConfig } from '../../core';
 import type { TidewaveHandler, TidewaveNext, TidewaveRequest, TidewaveResponse } from '../types';
 import { magicByteType } from '../magic-bytes';
+import { checkOrigin } from '../security';
 
 const MAX_UPLOAD_SIZE = 200_000_000;
 const ALLOWED_UPLOAD_CONTENT_TYPES = ['image/png', 'image/jpeg', 'video/webm'] as const;
 const ALLOWED_UPLOAD_TYPES = ['screenshot', 'recording'] as const;
 const ALLOWED_UPLOAD_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.webm'] as const;
 const INVALID_UPLOAD = 'Bad Request: missing or invalid file parameter';
-const INVALID_UPLOAD_ORIGIN =
-  "For security reasons, this page only allows connections from the application's own origin.";
 
 class InvalidUploadError extends Error {}
 
@@ -36,7 +35,7 @@ export function createHandleUpload(config: TidewaveConfig): TidewaveHandler {
         return;
       }
 
-      if (!requireSameOrigin(req, res, config)) return;
+      if (!checkOrigin(req, res, config)) return;
       if (uploadTooLarge(req)) {
         badRequest(res);
         return;
@@ -88,58 +87,6 @@ export function createHandleUpload(config: TidewaveConfig): TidewaveHandler {
   };
 }
 
-function requireSameOrigin(
-  req: TidewaveRequest,
-  res: TidewaveResponse,
-  config: TidewaveConfig,
-): boolean {
-  const origin = firstHeaderValue(req.headers.origin);
-  if (!origin) return true;
-
-  if (allowedOriginHosts(config).includes(originHost(origin))) return true;
-
-  console.warn(INVALID_UPLOAD_ORIGIN);
-  res.statusCode = 403;
-  res.end(INVALID_UPLOAD_ORIGIN);
-  return false;
-}
-
-function originHost(origin: string): string {
-  try {
-    return new URL(origin).hostname.toLowerCase();
-  } catch {
-    return '';
-  }
-}
-
-function allowedOriginHosts(config: TidewaveConfig): string[] {
-  // Do not derive this from the request Host header. Host is client-controlled,
-  // while configured origin hosts avoid accepting DNS rebinding requests.
-  return (config.allowedOrigins || []).map(originOrHostToHost).filter(host => host.length > 0);
-}
-
-function originOrHostToHost(originOrHost: string): string {
-  if (originOrHost.startsWith('//')) {
-    return originHost(`http:${originOrHost}`);
-  }
-
-  if (/^[A-Za-z][A-Za-z0-9+.-]*:\/\//.test(originOrHost)) {
-    return originHost(originOrHost);
-  }
-
-  if (originOrHost.startsWith('[')) {
-    const end = originOrHost.indexOf(']');
-    return end === -1 ? originOrHost.toLowerCase() : originOrHost.slice(1, end).toLowerCase();
-  }
-
-  try {
-    const parsed = new URL(`http://${originOrHost}`);
-    return parsed.hostname.toLowerCase();
-  } catch {
-    return originOrHost.toLowerCase();
-  }
-}
-
 function uploadTooLarge(req: TidewaveRequest): boolean {
   const contentLength = firstHeaderValue(req.headers['content-length']);
   if (!contentLength) return false;

src/http/security.ts

@@ -39,6 +39,81 @@ export function checkRemoteIp(
   return false;
 }
 
+export function checkOrigin(
+  req: TidewaveRequest,
+  res: TidewaveResponse,
+  config: TidewaveConfig,
+): boolean {
+  const { origin } = req.headers;
+
+  // No origin header means non-browser request (e.g. Claude Code, Cursor)
+  if (!origin) return true;
+
+  const allowedOrigins = config.allowedOrigins || getDefaultAllowedOrigins(config);
+  const originUrl = parseUrl(origin);
+
+  if (!originUrl) {
+    const message = `For security reasons, Tidewave only accepts requests from allowed origins.\n\nInvalid origin: ${origin}`;
+    console.warn(message);
+    res.statusCode = 403;
+    res.end(message);
+    return false;
+  }
+
+  const isAllowed = allowedOrigins.some(allowed => isOriginAllowed(originUrl, parseUrl(allowed)));
+
+  if (!isAllowed) {
+    const message = `For security reasons, Tidewave only accepts requests from the same origin your web app is running on.\n\nIf you really want to allow remote connections, configure the Tidewave with the \`allowedOrigins: [${JSON.stringify(origin)}]\` option.`;
+    console.warn(message);
+    res.statusCode = 403;
+    res.end(message);
+    return false;
+  }
+
+  return true;
+}
+
+export function getDefaultAllowedOrigins(config: TidewaveConfig): string[] {
+  const { host, port } = config;
+  if (!(host || port)) return [];
+  return [`http://${host}:${port}`, `https://${host}:${port}`];
+}
+
+export function parseUrl(url: string): { scheme?: string; host: string; port?: number } | null {
+  try {
+    const isProtocolRelative = url.startsWith('//');
+    const parsed = new URL(isProtocolRelative ? 'http:' + url : url);
+    return {
+      scheme: isProtocolRelative ? undefined : parsed.protocol?.slice(0, -1),
+      host: parsed.hostname,
+      port: parsed.port ? parseInt(parsed.port) : undefined,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function isOriginAllowed(
+  origin: ReturnType<typeof parseUrl>,
+  allowed: ReturnType<typeof parseUrl>,
+): boolean {
+  if (!origin || !allowed) return false;
+
+  // Check scheme (if specified in allowed)
+  if (allowed.scheme && origin.scheme !== allowed.scheme) return false;
+
+  // Check port (if specified in allowed)
+  if (allowed.port && origin.port !== allowed.port) return false;
+
+  // Check host with wildcard support
+  if (allowed.host.startsWith('*.')) {
+    const allowedDomain = allowed.host.slice(2);
+    return origin.host === allowedDomain || origin.host.endsWith('.' + allowedDomain);
+  }
+
+  return origin.host === allowed.host;
+}
+
 export function isLocalIp(ip?: string): boolean {
   if (!ip) return false;
 

src/vite-plugin.ts

@@ -7,10 +7,14 @@ import { patchConsole } from './logger/console-patch';
 patchConsole();
 
 const DEFAULT_CONFIG: TidewaveConfig = {
+  port: 5173,
+  host: 'localhost',
   allowRemoteAccess: false,
 } as const;
 
-export default function tidewave(config: TidewaveConfig = {}): Plugin {
+export default function tidewave(
+  config: TidewaveConfig = { port: 5173, host: 'localhost' },
+): Plugin {
   return {
     name: 'vite-plugin-tidewave',
     configureServer: server => tidewaveServer(server, config),
@@ -21,10 +25,31 @@ async function tidewaveServer(
   server: ViteDevServer,
   config: TidewaveConfig = DEFAULT_CONFIG,
 ): Promise<void> {
+  const { config: serverConfig } = server;
+  const { host, port } = serverConfig.server;
+
+  if (port) {
+    config.port = port;
+  }
+
+  if (typeof host === 'string') {
+    config.host = host;
+  } else if (host === undefined) {
+    // The host can be undefined, in which case the default is localhost,
+    // see https://vite.dev/config/server-options#server-host.
+    config.host = 'localhost';
+  }
+
+  if (!(config.host || config.port)) {
+    console.error(
+      `[Tidewave] should have both host and port configured, got: host: ${host} port: ${port}`,
+    );
+    return;
+  }
+
   // Set framework and projectName upfront
   config.framework = 'vite';
   config.projectName = config.projectName || (await getProjectName('vite_app'));
-  config.allowedOrigins = config.allowedOrigins || defaultAllowedOrigins(server);
 
   configureServer(server.middlewares, config, {
     getLocalPort: () => {
@@ -33,12 +58,3 @@ async function tidewaveServer(
     },
   });
 }
-
-function defaultAllowedOrigins(server: ViteDevServer): string[] {
-  const { host } = server.config.server;
-  if (typeof host === 'string') return [host];
-
-  // The host can be undefined, in which case the default is localhost,
-  // see https://vite.dev/config/server-options#server-host.
-  return ['localhost'];
-}